vue的事件繫結
阿新 • • 發佈：2021-12-07
v-on事件繫結指令，用來輔助程式設計師為DOM元素繫結事件監聽
原生DOM物件有onclick、oninput、onkeyup等原生事件，替換為vue的事件繫結形式後為v-on:click、v-on:input、v-on:keyup
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <button v-on:click="greet">Greet</button> <p>{{ num }}</p> <button v-on:click="addCount">+1</button> </div> <script> var app = new Vue({ el:"#app", data: { name:"vue.js", num: 0 }, methods:{ //v-on繫結的事件處理函式需要在methods中宣告 greet: function (event){ alert('hello'+ this.name+'!') if(event){ alert(event.target.tagName) } }, addCount: function (num){//事件處理函式的名字 // this表示當前new出來的vm例項物件 // 通過this可以訪問到data中的資料 this.num +=1 } } }) </script> </body> </html>