如何实现vuejs事件监听
这篇文章主要介绍如何实现vuejs事件监听，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
在vuejs中，可以使用"v-on"指令来实现事件监听，该指令用来绑定事件监听器；只需要在标签模板中添加"v-on:事件参数="事件处理函数""语句，使用JavaScript设置触发时需要执行的代码即可。
本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。
当模板渲染完成之后，就可以进行事件的绑定与监听。v-on指令用来监听DOM事件，通常在模板内直接使用。
方法及内联语句处理器
通过v-on绑定实力选项属性methods中的方法作为事件的处理器，v-on：后参数接受所有的原生事件名称。
var vm = new Vue({ el: "#app", data: { msg:"hello vue.js" }, methods:{ say:function(){ alert(this.msg); } } })v-on缩写形式：@。@click="say"
v-on支持内联JavaScript语句，但仅限是一个语句。
var vm = new Vue({ el: "#app", data: { msg:"hello vue.js" }, methods:{ sayFrom:function(from){ alert(this.msg + '' + from); } } })在直接绑定methods函数和内联JavaScript与居室，都有可能需要获取原生DOM事件对象
//这样写获取不到event var vm = new Vue({ el: "#app", methods:{ showEvent:function(event){ console.log(event); } } })同一个元素上可以通过v-on绑定多个相同事件函数，执行顺序为顺序执行。
事件修饰符
1、.stop:调用event.stopPropagation().
2、.prevent:调用event.preventDefault().
3、.caputure:使用capture模式添加事件监听器。
...
4、.self:只当事件是从监听元素本身触发时才触发调回。
...
5、.once:
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。
//例子 var vm = new Vue({ el: '#app', methods:{ saySelf(msg) { alert(msg); } } }); //HTML代码 键值修饰符
在监听键盘事件时，需要监测常见的键值。
//监听input的输入，当输入回车时触发submit函数。
记住所有的keyCide比较困难，所以Vue为最常用的按键提供了别名。
.enter
.tab
.delete(捕获"删除"和"退格"键)
.esc
.space
.up
.down
.left
.right
可以通过全局config.keyCodes对象自定义键值修饰符别名：
// 可以使用 v-on:keyup.f1 Vue.config.keyCodes.f1 = 112
与传统事件绑定的区别
1.无需手动管理事件。ViewModel被销毁时，所有的事件处理器都会自动被删除，让我们从获取DOM绑定事件然后在特定情况下再解绑这样的事情中解脱出来。
2.解耦。ViewModel代码是纯粹的逻辑代码，和DOM无关，有利于我们写自动化测试用例。
vue.extend()
为了重复使用的子组件，vue.js提供了Vue.extend(options)方法，创建基础Vue构造器的"子类"，参数options对象和直接声明Vue实例参数对象基本一致。
var Child = Vue.extend({ teplate:'#child', //不同的是，el和data选项需要通过函数返回值赋值，避免多个组件实例共用一个数据 data:function(){ return { ... } }, ... }) Vue.component('child',child) //全局注册子组件 以上是"如何实现vuejs事件监听"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！
