vue组件事件,vue 事件实现原理
本文主要介绍Vue.js前端框架的事件处理总结。本文介绍了v-on指令的基本用法，并通过实例进行了详细说明，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
1. v-on 事件监听
使用v-on指令监控DOM事件。该指令通常直接在模板中使用，当事件被触发时会执行一些JavaScript代码。
v-on 指令的基本用法
(1)在HTML中使用v-on指令，它后面可以跟所有本机事件名称。基本用法如下：
按钮v-on:click=show show /button
将click事件绑定到show方法，当点击“show”按钮时，执行show()方法，在Vue实例中定义show()方法。
(2)在使用v-on指令的过程中，Vue.js提供了v-on指令的缩写形式“@”。上述代码可以重写如下：
Button @click=show 显示/button
(3)V-ON指令的简单用法如下：
div id=box
！-v-on的基本用法-
按钮v-on:click= count 1 count/按钮
p按钮被单击了{{count1}}次/p
！-V-关于简单用法-
Button @click=count2 计数/button
p按钮被单击了{{count2}}次/p
/div
脚本类型=文本/javascript
var vm=new Vue({
el : #box ，
数据：{
计数1:0，
计数2:0
}
});
/脚本
下图显示了v-on指令的简单用法：
事件处理方法
在使用v-on指令的过程中，事件需要通过v-on指令绑定到某个方法，绑定的方法在methods选项中定义为事件处理程序。示例代码参考如下：
div id=box
按钮v-on:click=show show /button
/div
脚本类型=文本/javascript
var vm=new Vue({
el : #box ，
数据：{
姓名：小明，
年龄：29，
职业：“演员”
},
方法：{
show:function(){
Alert(姓名： this.name 年龄： this.age 职业： this . occupation)；
}
}
});
/脚本
用显示方法绑定点击事件的v-on指令结果图片如下：
使用内联 JavaScript 语句
(1)除了直接绑定到方法，使用v-on指令还支持内联JavaScript语句，但只能使用一条语句。示例代码参考如下：
div id=box
按钮v-on:click= show( rising star ) show/按钮
/div
脚本类型=文本/javascript
var vm=new Vue({
el : #box ，
方法：{
显示：功能(消息){
Alert (message:消息)；
}
}
});
使用内联JavaScript语句的运行结果如下图所示：
(2)当需要在inline语句中获取原生DOM事件对象时，可以在方法中传递一个特殊变量$event。示例代码如下：
div id=box
a href= 3358 www . Baidu . com rel= external no follow v-on:click= show(明日之星，$event){{message}}/a
/div
脚本类型=文本/javascript
var vm=new Vue({
el : #box ，
数据：{
消息：“你好”
},
方法：{
显示：函数(消息1，e){
e . prevent default()；
警报(消息1)；
}
}
});
/脚本
除了向show()方法传递一个值之外，还传递了一个特殊的变量$event。这个变量的作用是在超链接被点击时处理原生DOM事件，应用preventDefault()方法防止超链接跳转。点击“Hello”超链接，会弹出一个对话框，运行结果如下图所示：
2. 事件处理修饰符
修饰符是由半角句点符号表示的特殊后缀。Vue.js为v-on指令提供了许多修饰符，包括事件修饰符和键修饰符。事件修饰符
在事件处理程序中，经常调用preventDefault()或stopPropagation()方法来实现特定的功能。为了处理这些DOM事件细节，Vue.js为v-on指令提供了事件修饰符。下表显示了的常见事件修饰符及其说明：
修饰符可以串联使用，不绑定事件处理方法只能使用修饰符。事件修饰符的用法如下：
！-阻止点击事件扩散-
a v-on:click . stop= do something /a
！-阻止表单的默认提交事件-
表单v-on:submit . prevent= on submit /form
！-仅当事件由当前元素本身触发时调用处理函数-
div v-on:click . self= do something /div
！-修饰符串联，防止表单默认提交事件并防止冒泡-
a v-on:click . stop . prevent= do something /a
！-只有修饰符，没有绑定事件-
表单v-on:submit.prevent/form
应用. stop修饰符来防止事件冒泡的示例代码如下：
div id=box
Div-on: click= show (div事件触发)
按钮v-on:click.stop=show(按钮的事件触发器) display /button
/div
/div
脚本类型=文本/javascript
var vm=new Vue({
el : #box ，
方法：{
显示：功能(消息){
警报(消息)；
}
}
});
/脚本
当点击Show按钮时，只会触发按钮的click事件。如果。按钮中没有使用stop修饰符，当点击“Show”按钮时，不仅会触发按钮的click事件，还会触发div的click事件，会弹出两个对话框。操作结果如下图所示：
(1)使用。停止修改器：
(2)单击确定，不使用。要显示的停止修饰符：
按键修饰符
除了事件修饰符，Vue.js还为v-on指令提供按键修饰符，以便监视键盘事件中的按键。当键盘事件被触发时，需要检测按键的键码值，代码如下：
输入v-on:keyup.13=提交
v-on命令用于监控键盘的keyup事件。键盘中回车键的keyCode值是13，所以在文本框中输入内容后点击回车键会调用submit()方法。
对于上面显示的代码，您可以使用它的别名。回车键的别名是Enter，代码如下：
输入v-on:keyup.enter=submit
Vue.js为常用键提供的别名如下表所示：
备注：我们将在后期继续跟进Vue.js的前端框架：表单控件绑定。希望大家能支持和关注。
关于Vue.js前端框架的事件处理总结这篇文章到此为止。更多相关Vue.js事件处理内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。