總結vue.js的事件處理器實例

這篇文章主要介紹了詳解vue.js的#事件處理器v-on:click，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

用v-on 指令監聽DOM 事件

注意:HTML5中不能使用v-on，換上@

（1）html程式碼：

<p id="example"> 
 <button v-on:click="greet">Greet</button> 
 // 或者 

<button @click="greet">Greet</button> 
</p>

（2）js程式碼：

var vm = new Vue({ 
 el: '#example', 
 data: { 
 name: 'Vue.js' 
 }, 
 // 在 `methods` 对象中定义方法 
 methods: { 
 greet: function (event) { 
  // 方法内 `this` 指向 vm 
  alert('Hello ' + this.name + '!') 
  // `event` 是原生 DOM 事件 
  alert(event.target.tagName) 
 } 
 } 
})

 （3）效果顯示：

以上是總結vue.js的事件處理器實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！