>本节讲解的内容对前面的章节具有依赖性,如果看起来有困难,请先看本系列前面的章节 ## 一、本节说明 前面的章节我们学习了v-bind指定,可以通过模型数据去影响视图。我们都知道VUE是支持双向数据绑定的,那么视图是如何影响数据的呢?那就要学到我们这一节的内容v-model。v-model可以将表单输入绑定到对应的模型数据。 ## 二、 怎么做 我们通过v-model实现一个简单的需求 * 通过表单input绑定模型数据message,表单数据变化data.message也发生变化 * 然后通过Mustache表达式,将变化之后的message数据显示到视图页面上 ![](https://img.kancloud.cn/77/dd/77ddfcbc34c019b7fdb56e41d6193469_877x394.png) ## 三、 效果 ![](https://img.kancloud.cn/d1/d6/d1d69d473fc36acc704b8288d8b69050_442x88.gif) ## 四、 深入 v-model实际上是一个语法糖,也就是简写,他实际上包含了两个操作: * v-bind绑定value属性 * v-on监听表单元素的输入事件,并改变数据 所以,下面的两种写法实现的效果是一致的。 ![](https://img.kancloud.cn/32/a8/32a8fa0a73dc1150890de37bb2d0091a_684x122.png)