Home >Web Front-end >JS Tutorial >Summary of vue.js event handler examples

Summary of vue.js event handler examples

零下一度
零下一度Original
2017-06-29 15:47:561240browse

This article mainly introduces the detailed explanation of vue.jseventprocessor v-on:click. The editor thinks it is quite good, so I will share it now. For everyone, and as a reference for everyone. Let’s follow the editor and take a look.

Use the v-on command to monitor DOM events

Note: v-on cannot be used in HTML5, replace it with @

(1) html code:

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

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

(2) js code:

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

(3) Effect display:

The above is the detailed content of Summary of vue.js event handler examples. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn