不积跬步，无以至千里；不积小流，无以成江海。
Vuejs语言基础
v-model：
实现表单元素和数据的双向绑定（表单在实际开发中，特别是对用户信息的提交，非常常见）。
基本使用：
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data: {
message: ‘你好呀‘
}
})
</script>
分析：
1.在输入框输入内容时，因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变；
2.当message发生改变时，因为使用Mustache语法，将message的值插入到DOM中,所以DOM会发生响应的改变；
3.所以，通过v-model实现了双向的绑定。
原理：
v-model其实是一个语法糖，它的背后本质上是包含两个操作：
1. v-bind 绑定一个value值
2. v-on 指令给当前元素绑定 input 事件
<div id="app">
<!-- <input type="text" v-model="message">-->
<!-- <input type="text" :value="message" @input="valueChange">-->
<input type="text" :value="message" @input="message = $event.target.value">
{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: ‘#app‘,
data: {
message: ‘你好呀‘
},
methods: {
valueChange(event){
this.message = event.target.value;
}
}
})
</script>
一起学Vuejs（五）----- v-model基本使用和原理
原文：https://www.cnblogs.com/smilexuezi/p/13798839.html