文章详情页

详解Vue之事件处理

更多 QQ空间微信 QQ好友腾讯朋友复制链接

【字号：大中小】日期：2023-01-08 13:14:06浏览：51作者：猪猪

在Vue进行前端开发中，事件监听是必不可少的功能，本文通过简单的小例子，简述v-on的简单用法，仅供学习分享使用，如有不足之处，还请指正。

监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。如下所示：

<button v-on:click='counter += 1'>Add 1</button> <p>按钮被点击了 {{ counter }} 次.</p>

其中counter为Vue自定义的一个属性值。

事件处理方法

事实上，许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。如下所示：

<button v-on:click='greet'>Greet</button>

greet 是在下面定义的方法名。如下所示：

内联处理器中的方法

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法，如下所示：

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

其中say，warn均为自定义方法，如下所示：

say: function (message) { alert(message);},warn: function (message, event) { // 现在我们可以访问原生事件对象 if (event) { event.preventDefault(); } alert(message);}

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。事件修饰符共以下几种：

.stop .prevent .capture .self .once .passive

<a v-on:click.stop='doThis'>点击666</a><form v-on:submit.prevent='onSubmit'> <div>阻止提交</div></form><a v-on:click.stop.prevent='doThat'></a><form v-on:submit.prevent> <div id='d'>只有修饰符</div></form><div v-on:click.capture='doThis'>doThis...</div><div v-on:click.self='doThat'>doThat...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

新增属性

不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。

<a v-on:click.once='doThis'>点我一次666</a>

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

<div v-on:scroll.passive='onScroll'>...</div>

这个 .passive 修饰符尤其能够提升移动端的性能。不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<input v-on:keyup.enter='submit' type='text' value='点我777' />  <input v-on:keyup.page-down='onPageDown' type='text' value='点我888' />

系统修饰符

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl .alt .shift .meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

<input @keyup.alt.67='clear'>  <div @click.ctrl='doSomething'>Do something</div>

请注意：修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

.exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<button @click.ctrl='onClick'>A</button>  <button @click.ctrl.exact='onCtrlClick'>A</button>  <button @click.exact='onClick'>A</button>

鼠标按钮修饰符

这些修饰符会限制处理函数仅响应特定的鼠标按钮，如下所示：

.left .right .middle

为什么在 HTML 中监听事件?

你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

本例中全部代码如下所示：

<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>事件处理</title>  <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> </head> <body> <div id='app'> <h2>监听事件</h2>  <button v-on:click='counter += 1'>Add 1</button> <p>按钮被点击了 {{ counter }} 次.</p> <h2>事件处理方法</h2>   <button v-on:click='greet'>Greet</button>  <h2>内联处理器中的方法</h2>  <button v-on:click='say(’hi’)'>Say hi</button> <button v-on:click='say(’what’)'>Say what</button>  <br> <button v-on:click='warn(’表单不能被提交.’, $event)'>提交</button> <h2>事件修饰符</h2>   <a v-on:click.stop='doThis'>点击666</a> <br>  <form v-on:submit.prevent='onSubmit'><div> 阻止提交</div> </form> <br>  <a v-on:click.stop.prevent='doThat'></a> <br>  <form v-on:submit.prevent><div id='d'> 只有修饰符</div> </form> <br>   <div v-on:click.capture='doThis'>doThis...</div> <br>   <div v-on:click.self='doThat'>doThat...</div>  <h2>新增</h2>  <a v-on:click.once='doThis'>点我一次666</a>      <div v-on:scroll.passive='onScroll'>...</div>  <h2>按键修饰符</h2>   <input v-on:keyup.enter='submit' type='text' value='点我777' />  <input v-on:keyup.page-down='onPageDown' type='text' value='点我888' />  <h2>#按键码</h2>  <input v-on:keyup.13='submit' type='button' value='key up 13'>  <h2>系统修饰键</h2>   <input @keyup.alt.67='clear'>  <div @click.ctrl='doSomething'>Do something</div>  <h2>#.exact 修饰符</h2>   <button @click.ctrl='onClick'>A</button>  <button @click.ctrl.exact='onCtrlClick'>A</button>  <button @click.exact='onClick'>A</button> <h2>#鼠标按钮修饰符</h2>  <h2>为什么在 HTML 中监听事件?</h2>  </div> <script type='text/javascript'> var app=new Vue({el:’#app’,data:{ msg:’hello world!!!’, counter:0, name: ’Vue.js’},// 在 `methods` 对象中定义方法methods:{ greet: function (event) { // `this` 在方法里指向当前 Vue 实例 alert(’Hello ’ + this.name + ’!’) // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } }, say: function (message) { alert(message); }, warn: function (message, event) { // 现在我们可以访问原生事件对象 if (event) { event.preventDefault(); } alert(message); }, doThis:function(){ alert(’点我666’); }, doThat:function(){ alert(’点它666’); }, submit:function(){ alert(’点我--submit’); }, onPageDown:function(){ alert(’点我--onPageDown’); }, doSomething:function(){ alert(’点我--doSomething’); }, clear:function(){ alert(’点我--clear’); }, onClick:function(){ alert(’点我--onClick’); }, onCtrlClick:function(){ alert(’点我--onCtrlClick’); }} }); </script> </body></html>

以上就是详解Vue之事件处理的详细内容，更多关于Vue之事件处理的资料请关注好吧啦网其它相关文章！

Vue

上一条：Vue watch响应数据实现方法解析下一条：Vue路由切换页面不更新问题解决方案

相关文章：

1. 分析Android 11.0Settings源码之主界面加载2. Python面向对象实现方法总结3. python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析4. 如何使用Mock修改Android设备上的features5. Java 如何实现AES加密6. set rs=conn.execute,set rs=server.createobject(“ADODB.recordset”)的性能对比7. Python csv文件记录流程代码解析8. 浅谈PHP设计模式之门面模式Facade9. Windows+Apache搭建PHP开发环境10. PHP操作Session和Cookie

排行榜

					
					Spring AspectJ AOP框架注解原理解析
Python面向对象实现方法总结
Java 如何实现AES加密
在Spring 中使用@Aspect 控制自定义注解的操作
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
set rs=conn.execute,set rs=server.createobject(“ADODB.recordset”)的性能对比
Python csv文件记录流程代码解析
PHP操作Session和Cookie
如何使用Mock修改Android设备上的features
Django数据库迁移常见使用方法
Javascript实现打鼓效果
				

热门标签