首页 > web前端 > js教程 > 总结vue.js的事件处理器实例

总结vue.js的事件处理器实例

零下一度
发布: 2017-06-29 15:47:56
原创
1255 人浏览过

本篇文章主要介绍了详解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: &#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)效果展示:

以上是总结vue.js的事件处理器实例的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板