概述 Vue.js 最显著的特点就是响应式和数据驱动&＃xff0c;也就是将Model和View进行单向绑定或者双向绑定。
单向绑定 把Model绑定到View&＃xff0c;当更新Model时View就会自动更新。因此&＃xff0c;我们不需要再通过原声Javascript代码进行额外的DOM操作。
双向绑定 把Model绑定到View的同时&＃xff0c;也将View绑定到Model上。这样&＃xff0c;当更新Model时&＃xff0c;View就会自动更新&＃xff1b;反之&＃xff0c;如果用户更新了View&＃xff0c;Model的数据也自动被更新了。
Vue中的应用 插值 插值形式就是{{data}}的形式&＃xff0c;它使用的是单向绑定。
< body> < div id&＃61; "vm" > < p> Hello, { { name} } ! < / p> < p> You are { { age} } years old! < / p> < / div> < / body> < script src&＃61; "https://cdn.jsdelivr.net/npm/vue&＃64;2.5.21/dist/vue.js" > < / script> < script type&＃61; "text/Javascript" > let vm &＃61; new Vue ( { el: &＃39;#vm&＃39; , data: { name: &＃39;Bob&＃39; , age: 18 } } ) ; < / script>
此时在控制台输入vm.name &＃61; &＃39;Tom&＃39;&＃xff0c;可以观察到页面自动地、实时地 发生了变化&＃xff0c;原来的"Hello, Bob!"自动变成了"Hello, Tom!"。
v-bind 如果我们希望某些节点能够支持单向绑定&＃xff0c;我们只需要在该属性前面加上v-bind:指令&＃xff0c;这样Vue在解析的时候会识别出该指令&＃xff0c;就会将该将其属性的值跟Vue实例的Model进行绑定。如
< body> < div id&＃61; "vm" > < p v- bind: class &＃61; "classed" > Hello, { { name} } ! < / p> < / div> < / body> < script src&＃61; "https://cdn.jsdelivr.net/npm/vue&＃64;2.5.21/dist/vue.js" > < / script> < script type&＃61; "text/Javascript" > let vm &＃61; new Vue ( { el: &＃39;#vm&＃39; , data: { name: &＃39;Bob&＃39; , classed: &＃39;red&＃39; } } ) ; < / script> < style> . red { background: red; } . blue { background: blue; } < / style>
如上面代码所示&＃xff0c;vm.classed的初始值为red&＃xff0c;此时
vm.classed&＃61;&＃39;blue&＃39;&＃xff0c;此时背景就自动变成了蓝色。
可以看到通过对class属性进行绑定我们就可以动态的改变class对应的样式&＃xff0c;这个都是通过Model的操作完成的&＃xff0c;没有设置任何的DOM操作。
v-model v-model主要是用在表单元素中&＃xff0c;实现了双向绑定。
< body> < form id&＃61; "vm" action&＃61; "#" > < p> < input v- model&＃61; "email" > < / p> < p> < input v- model&＃61; "name" > < / p> < / form> < / body> < script src&＃61; "https://cdn.jsdelivr.net/npm/vue&＃64;2.5.21/dist/vue.js" > < / script> < script type&＃61; "text/Javascript" > let vm &＃61; new Vue ( { el: &＃39;#vm&＃39; , data: { email: &＃39;&＃39; , name: &＃39;&＃39; } } ) ; < / script>
我们可以在表单中输入内容&＃xff0c;然后在控制台中用vm.$data查看Model的内容&＃xff0c;也可以用vm.name查看Model的name属性&＃xff0c;它的值和表单对应的vm.name&＃61;&＃39;Tom&＃39;&＃xff0c;表单对应的
可以看出通过v-model实现了表单数据和Model数据的双向绑定。
京公网安备 11010802041100号