vue事件处理器怎么使用
本篇内容介绍了“vue事件处理器怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
监听事件
可以用v-on指令监听DOM事件来触发一些javascript代码。
demo:
<div v-on:click="++counter">点击，增加1</div>
<span>{{counter}}</span> data:{
counter:0
}方法事件处理器
许多事件处理器的逻辑都很复杂，所以直接把javaScript代码写在v-on指令中是不可行的。因此v-on可以接收一个定义的方法来调用
<div v-on:click="counter()">点击，增加1</div>
<span>{{counter}}</span>data:{
counter:0
},
method:{
counter:function(){
this.counter++;
}
}有时也需要在内联语句处理器中访问原生DOM事件，可以用特殊变量$event把它传入方法：
$event 原生事件对象
事件修饰符
在事件处理程序中调用event.preventDefault()或event.stopPropagagation()是非常常见的需求。尽管我们可以在methods中轻松实现这点，但更好的
方式是：methods只是纯粹的数据逻辑，而不是去处理DOM事件的细节。
为了解决这个问题，Vue.js为v-on提供了事件修饰符，通过由（.）表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once
<!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件侦听器时使用事件捕获模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <div v-on:click.self="doThat">...</div>
新增
<!--点击事件将只会触发一次--> <a v-on:click.once="dothis"></a>
不像其他只能对原生的DOM事件起作用的修饰符，.once修饰符还能被用到自定义的组件事件上
按键修饰符
在监听键盘事件时，我们经常需要监听常见的键值。 Vue允许为v-on在监听事件时添加按键修饰符：
<!--只有在keyCode是13时调用vm.submit()--> <input v-on:keyup.13="submit">
常见的按键还有别名：
<input v-on:keyup.enter="submit"> <input @keyup.enter="submit">
全部的按键别名：
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
可以通过全局config.keyCodes对象 自定义案件修饰符别名
//可以使用v-on:keyup.f1 Vue.config.keyCodes.f1=112
按键修饰符 新增
可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生反应。
.ctrl
.alt
.shift
.meta
注意：在不同系统的键盘上，meta对应的键不一样
为什么在HTML中监听事件
你可能注意到这种事件监听的方式违背了关注点分离的传统理念。不必担心，因为所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上，它不会导致任何维护上的困难。实际上，使用v-on有几个好处：
1 扫一眼HTML模板便能轻松定位在JavaScript代码里对应的方法
2 因为你无须在JavaScript里手动绑定事件，你的viewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试。
3 当一个ViewModel被销毁时，所有的事件处理器都会自动被删除，你无须担心如何自己清理它们。
为什么要使用Vue
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。
“vue事件处理器怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注蜗牛博客网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论