插值两种方式：{{}}，v-model
v-model
可以用v-model指令在只能在表单<input>及<textarea>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
监听用户的输入事件以更新数据
<body> <div id="form"> <form> <input v-model="message" placeholder="edit me"> <p> Message is :{{ message }} </p> </form> </div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> var form = new Vue({ el:'#form', data:{ message:'hello world', } }) </script> </body>
修饰符
.lazy（懒惰，加回车键显示结果）
<body> <div id="form"> <!-- 阻止表单默认的submit行为 --> <form @submit.prevent> <!-- .lazy懒惰 加回车键 --> <input v-model.lazy="message" placeholder="edit me"> <p> Message is :{{ message }} </p> </form> </div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> var form = new Vue({ el:'#form', data:{ message:'hello world', } }) </script> </body>
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
只允许输入数值
<body> <div id="form"> <!-- 阻止表单默认的submit行为 --> <form @submit.prevent> <input v-model.number="age" type="number"> </form> </div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> var form = new Vue({ el:'#form', data:{ age:10, } }) </script> </body>
鼠标按钮修饰符
