开发者学堂课程【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 可以实现：
将来这个表单元素中的值将会双向绑定到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>
