<强> 1。 <强>什么是双向绑定?
Vue框架很核心的功能就是双向的数据绑定。双向是指:HTML标签数据绑定到Vue对象,另外反方向数据也是绑定的。通俗点说就是,Vue对象的改变会直接影响到HTML的标签的变化,而且标签的变化也会反过来影响Vue对象的属性的变化。
这样以来,就彻底变革了之前Dom的开发方式,之前Dom驱动的开发方式尤其是以jQuery为主的开发时代,都是Dom变化后,触发js事件,然后在事件中通过js代码取得标签的变化,再跟后台进行交互,然后根据后台返回的结果再更新HTML标签,异常的繁琐。有了Vue这种双向绑定,让开发人员只需要关心json数据的变化即可,Vue自动映射到HTML上,而且HTML的变化也会映射回js对象上,开发方式直接变革成了前端由数据驱动的开发时代,远远抛弃了Dom开发主导的时代了。
<强> 2。 <强> Vue绑定文本
数据绑定最常见的形式就是使用“胡子”语法(双大括号)的文本插值,比如模板引擎:车把中就是用的<代码>{{}}>
创建的Vue对象中的数据属性就是用来绑定数据到HTML的。参考如下代码:
& lt; span>信息:{{味精}}& lt;/span>
& lt; script>
应用var=new Vue({//创建Vue对象.Vue的核心对象。
埃尔:“#应用”,//el属性:把当前Vue对象挂载到div标签上,#应用是id选择器
数据:{//数据:是Vue对象中绑定的数据
味精:“你好Vue !'//消息自定义的数据
}
}）;
& lt;/script>
<强> 3。 <强>绑定数据中使用JavaScript表达式
对于所有的数据绑定,Vue。js都提供了完全的JavaScript表达式支持。
& lt; span>信息:{{味精+“-”+名称}}& lt;/span>
& lt; script>
应用var=new Vue({//创建Vue对象.Vue的核心对象。
埃尔:“#应用”,//el属性:把当前Vue对象挂载到div标签上,#应用是id选择器
数据:{//数据:是Vue对象中绑定的数据
味精:'你好',//消息自定义的数据
名称:“flydragon”//名称自定义的属性,vue可以多个自定义属性,属性类型也可是复杂类型
}
}）;
& lt;/script>
结果:
嗨,flydragon
当然Vue还可以支持表达中的任何计算,函数处理等。参考下面的综合点的案例。
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Vue入门之数据绑定——表达式运算& lt;/title>
& lt;脚本src=" https://unpkg.com/vue/dist/vue.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
{{味精+“-”+名称}}
& lt; p>
{{isOk & # 63;‘123’:‘456’}}
& lt;/p>
& lt; p>我的年龄是:{{* 2岁}}& lt;/p>
& lt;/div>
& lt; script>
应用var=new Vue({//创建Vue对象.Vue的核心对象。
埃尔:“#应用”,//el属性:把当前Vue对象挂载到div标签上,#应用是id选择器
数据:{//数据:是Vue对象中绑定的数据
味精:'你好',//消息自定义的数据
名称:“flydragon”,
isOk:没错,
年龄:18
}
}）;
& lt;/script>
& lt;/body>
& lt;/html>
之前
<强> 4。 <强> Vue属性绑定
Vue中不能直接使用<代码>{{表达式}}语法进行绑定html的标签,而是用它特有的v-bind指令(就是一种写法,先按照格式走,具体指令是什么可以后续再了解)。
绑定的语法结构:
& lt;标签v-bind:属性名="要绑定的Vue对象的数据里的属性名“祝辞& lt;/标签比;
例如:
& lt;跨越v-bind: id=" menuId "在{{menuName}} & lt;/span>
参考如下代码案例:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Vue入门之数据绑定——属性绑定& lt;/title>
& lt;脚本src=" https://unpkg.com/vue/dist/vue.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt; div v-bind: id=癕enuContaineId”比;
& lt; a href=" https://www.yisu.com/zixun/" v-bind:类=癕enuClass”在首页& lt;/a>
& lt; a href=" https://www.yisu.com/zixun/" v-bind:类=癕enuClass祝辞产品& lt;/a>
& lt; a href=" https://www.yisu.com/zixun/" v-bind:类=癕enuClass祝辞服务& lt;/a>
& lt; a href=" https://www.yisu.com/zixun/" v-bind:类=癕enuClass祝辞关于& lt;/a>
& lt;/div>
& lt;/div>
& lt; script>
应用var=new Vue ({
埃尔:“#应用”,
数据:{//数据:是Vue对象中绑定的数据
MenuClass:“top-menu”,
MenuContaineId:“sitemenu”
}
}）;
& lt;/script>
& lt;/body>
& lt;/html>
