开发者学堂课程【Vue.js 入门与实战：讲解v-model实现表单元素的数据双向绑定】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8135
讲解v-model实现表单元素的数据双向绑定
目录
一、v-model实现表单元素
二、代码
一、v-model实现表单元素
这一节介绍v-model，它是实现双向数据绑定的一个指令。注意，只有这唯一的一个指令可以实现双向数据绑定。像之前学的v-bind和v-on，这些都不能实现双向数据绑定。这是唯一的一个双向数据绑定指令，以后会经常用到。
新建一个html。在data身上可以换一个message：msg:’大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！’。然后在页面上建立标签h4，保存右键浏览。右键可以调看控制台检查。
当前vm实例是在浏览器内存里创建的，那么创建完毕之后在Window对象身上有一个vm这样的对象，它其实就是一个变量，所以肯定属于Window。
在data身上定义了这些message属性或者一些其他的字段，它都会帮助挂载到vm身上，在它内部去实现。所以在methods这里可以通过this.msg直接访问得到。
既然能找到vm，而且vm身上还有个message属性，可以直接在控制台赋值：vm.msg = ‘修改了数据123’回车。可以看到修改了vm上的message，页面上相应的也就被修改了。
但是这并不是双向数据绑定，这是单向的。vm相当于这里面有一个model层，然后修改了model，控制台会自动的同步到model上去，所以这是单向的。
从M同步到页面V，这是单向的。那么页面里面修改了，能不能再同步回vm里面去呢？
但是不能在页面中修改，因为这就是一个普通的h4标签，它无法和用户发生交互行为。哪些东西能和用户进行交互呢？
有一个统一的名称叫做表单元素，注意表单元素是能够让用户进行交互的。那就再建一个input，为了绑定到data里需要添加v-bind。这个v-bind把message里面的值通过属性绑定交给了value。现在在页面进行修改，在控制台进行查看，发现并没有修改。
v-bind只能实现只能实现数据的单项绑定，从M自动绑定到V，无法实现数据的双向绑定。
v-model可以实现：
<input type=”text” style=”width:100%;” v-model=”msg”>将来这个表单元素中的值将会双向绑定到data身上某个属性，绑定到message属性中去。
刷新浏览，接下来在页面修改123。可以看见发生改变，也就是说v-model除了能够实现数据从M渲染到V里去，也能实现V里面数据改变同步到M里。
这就是v-model实现双向数据绑定。
二、代码
<head> <meta charset="UPr-8"> <meta name="viewport" content="width=device-width，initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src=" . /lib/vue-2.4.0.js"></script> </head> <body> <div id=”app”> <h4>{{ msg }}</h4> <!--v-bind 只能实现数据的单项绑定，从M自动绑定到V，无法实现数据的双向绑定--> <!--<input type=”text” v-bind:value=”msg”style=”width:100%;”>--> <!--使用 v-model指令，可以实现 表单元素和Model中数据的双向数据绑定--> <!--注意：v-model只能运行在 表单元素中 --> <!--input(radio,text,address,email……) select checkbox textarea --> <input type=”text” style=”width:100%;” v-model=”msg”> </div> <script> //创建vue 实例，得到ViewMode1 var vm= new vue ({ el: ‘#app’, data: { msg:’大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！’ }, methods: {} ｝）； </script> </body>
