:model是v-bind:model的缩写
语法格式：
v-model="vue_instance_attr"
//value会自动把输入值赋值给vue实例的attr字段。
使用示例
<!--input输入框-->
<div id="app">
<input type="text" v-model="message" placeholder="请输入">
<p>输入的内容是: {{message}}</p>
</div>
<script>
var vue=new Vue({
el:'#app',
data:{
message:''
}
});
</script>
v-model指令的本质是：
1.它负责监听用户的输入事件，从而更新数据，并对一些极端场景进行一些特殊处理。
2.同时，v-model会忽略所有表单元素的value、checked、selected特性的初始值，它总是将vue实例中的数据作为数据来源。
3.然后当输入事件发生时，实时更新vue实例中的数据。
用v-bind和v-on指令实现v-model
<!--input输入框-->
<div id="app">
<!--把message字段的值作为input标签的value属性值，同时监听输入事件，实时更新message的值-->
<input type="text" @input="handleInput($event)" placeholder="请输入" v-bind:value="message">
<p>输入的内容是: {{message}}</p>
</div>
<script>
var vue=new Vue({
el:'#app',
data:{
message:''
},
methods:{
handleInput: function (event) {
console.info("控制台打印event详情")
console.info(event)
console.info(event.toLocaleString());
this.message=event.target.value;
}
}
});
</script>
