vue v-on監聽事件
阿新 • • 發佈：2017-05-17
ood 語句 事件 targe vue blog count 內聯 tex
在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>
vue v-on監聽事件