理论知识
- 双向数据绑定
- 数据绑定指数据和变量关联，两者内容一致。
- 双向即两个方向。
- 方向一 通过插值表达式，html标签绑定中vue实例对象的data属性中的变量，即获取变量并显示，此时时模型的值向网页输出。
- 方向二 通过v-model指令，将能够获取用户操作值的网页标签同vue实例对象的data属性中的变量绑定，即修改变量值，此时是修改模型的值。例如，微博输入评论。
- vue实例对象的data属性的变量是这两个方向的传递者， 用户操作<----v-model--->data变量<-----{{插值表达式}}--->网页内容显示
- mvvm设计思想
- 这是一种理论思想，有不同的实现方式。vue是其中的一种。
- m(model),数据模型，plain javascript object。在vue实例的data属性即是模型的实现。
- v(view),视图。广泛指dom元素。
- vm(view-model),数据模型关联视图。在vue中底层通过dom listener和data binding,上层通过v-xx系列指令实现view和model的关联,即双向数据绑定。
dom listener是方向二，data binding是方向一。
- v-model底层实现原理
- 通过属性绑定+事件绑定实现v-model的双向数据绑定的功能。属性绑定实现方向一的绑定，事件绑定实现了方向二的绑定。
- 下面的两行代码效果相同。
<input type="text" v-model='msg'>
<input type="text" v-bind:value='msg' v-on:input='msg=$event.target.value'>
对于v-on事件绑定，可以直接使用完整的语句块,即等号左右两侧都有内容。
在此处使用event事件需要加'$'.
实践
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div >{{ msg}} </div> //获取变量的值
<input v-model='msg'> //获取用户输入数据，还有下拉框、单选框等
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
msg:'123'
}
})
</script>
</body>
</html>
总结
- 指令的本质是vue作者自定义的网页标签属性。因此他的位置是在标签的左尖括号内部。