在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码，下面我们就简单聊聊Vue.js中的监听事件是怎么处理的。
在vue.js中监听事件是通过v-on指令来实现的，先看一下简单的监听事件代码。
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="app"> 10 <button v-on:click="count += 1">点击测试</button> 11 <p>这个按钮被点击了{{count}}次</p> 12 </div> 13 </body> 14 <script> 15 var vm = new Vue({ 16 el:"#app", 17 data:{ 18 count:0 19 } 20 }) 21 </script> 22 </html>
下面再看看监听方法事件的代码示例
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="app"> 10 <button v-on:click="test">点击测试</button> 11 </div> 12 </body> 13 <script> 14 var vm = new Vue({ 15 el:"#app", 16 data: { 17 name: 'Vue.js' 18 }, 19 // 在 `methods` 对象中定义方法 20 methods: { 21 test: function (event) { 22 // `this` 在方法里指当前 Vue 实例 23 alert('Hello ' + this.name + '!') 24 // `event` 是原生 DOM 事件 25 alert(event.target.tagName) 26 } 27 } 28 }) 29 </script> 30 </html>
内联处理器方法，内联javaScript语句
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="app"> 10 <button v-on:click="say('say hello')">say hello</button> 11 <button v-on:click="say('say goodbye')">say goodbye</button> 12 </div> 13 </body> 14 <script> 15 var vm = new Vue({ 16 el:"#app", 17 data: { 18 name: 'Vue.js' 19 }, 20 // 在 `methods` 对象中定义方法 21 methods: { 22 say:function(message){ 23 alert(message) 24 } 25 } 26 }) 27 </script> 28 </html>