v-on
vue可以使用v-on指令来监听事件，方便与用户进行交互。我们不需要修改DOM中的数据，所有的操作都由Vue来实现，你编写的代码只需要关注底层逻辑。这也是Vue强大的地方之一
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="id"> 10 {{message}} 11 <button v-on:click="reverseMessage">逆转信息</button> 12 </div> 13 </body> 14 <script> 15 var vm = new Vue({ 16 el:"#id", 17 data:{ 18 message:'Hello Vue.js!' 19 }, 20 methods:{ 21 reverseMessage:function(){ 22 //把数据的顺序调换 23 this.message = this.message.split('').reverse().join('') 24 } 25 } 26 }) 27 </script> 28 </html>
v-model
在上面的例子中再添加 v-model指令双向绑定表单输入和应用状态，实现指令之间的组合使用
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="id"> 10 {{message}} 11 <input v-model="message"> 12 <button v-on:click="reverseMessage">逆转信息</button> 13 </div> 14 </body> 15 <script> 16 var vm = new Vue({ 17 el:"#id", 18 data:{ 19 message:'Hello Vue.js!' 20 }, 21 methods:{ 22 reverseMessage:function(){ 23 //把数据的顺序调换 24 this.message = this.message.split('').reverse().join('') 25 } 26 } 27 }) 28 </script> 29 </html>