Vue 事件处理操作实例详解


Posted in Javascript onMarch 05, 2019

本文实例讲述了Vue 事件处理操作。分享给大家供大家参考,具体如下:

1 监听事件

可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

html:

<div id="app1">
  <button v-on:click="counter +=1">递增</button>
  <p>按钮已被点击 {{ counter }} 次。</p>
</div>

js:

var app1 = new Vue({
  el: "#app1",
  data: {
    counter: 0
  }
});

效果:

Vue 事件处理操作实例详解

2 事件处理方法

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

html:

<div id="app2">
  <button v-on:click="greet">问候</button>
</div>

js:

var app2 = new Vue({
  el: "#app2",
  data: {
    name: 'Deniro'
  },
  methods: {
    greet: function (event) {
      //这里的 this 指向的是当前 Vue 实例
      console.log('你好 ' + this.name + '!');
      if (event) {
        console.log(event.target.tagName);
      }
    }
  }
});

效果:

Vue 事件处理操作实例详解

也可以直接调用 Vue 实例定义的函数:

Vue 事件处理操作实例详解

3 内联处理器中的方法

除了直接绑定到一个方法,也可以在内联 JavaScript 语句中调用方法:

html:

<div id="app3">
  <button v-on:click="greet('你好')">问候</button>
</div>

js:

var app3 = new Vue({
  el: "#app3",
  methods: {
    greet: function (message) {
      console.log(message);
    }
  }
});

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

html:

<button v-on:click="warn('表单已被禁用',$event)">提交</button>

js:

methods: {
  ...
  warn: function (message,event) {
    //访问原生对象
    if(event){
      event.preventDefault();
    }
    console.log(message);
  }
}

4 事件修饰符

在事件处理程序中调用 event.preventDefault()event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
<!--阻止单击事件继续传播-->
<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>
<!--在 event.target 为当前元素自身时触发处理函数-->
<!--即事件不是从内部元素触发的-->
<div v-on:click.self="doThat">...</div>

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

<!--点击事件只会触发一次-->
<a v-on:click.once="doThis"></a>

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

2.3.0 新增

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

<!--滚动事件的默认行为将会被立即触发(不会等待 onScroll 事件完成)-->
<!--包含 event.preventDefault() 的情况-->
<div v-on:scroll.passive="onScroll">...</div>

这个 .passive 修饰符尤其能够提升移动端的性能。

不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你不想阻止事件的默认行为。

5 按键修饰符

在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

<!--keyCode 为 13 时调用 vm.submit()-->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

<!--使用按键别名-->
<input v-on:keyup.enter="submit">
<!--使用缩写语法-->
<input @keyup.enter="submit">

全部的按键别名:

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

//自定义按键的修饰符别名
Vue.config.keyCodes.f1 = 112;

自动匹配按键修饰符

2.5.0 新增

你也可直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符:

<input @keyup.page-down="onPageDown">

在上面的例子中,处理函数仅在 $event.key === 'PageDown' 时被调用。

有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9,它们的内置别名应该是首选。

6 系统修饰键

2.1.0 新增

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

  • .ctrl
  • .alt
  • .shift
  • .meta

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

<!--Alt + C-->
<input @keyup.alt.67="clear">
<!--Ctrl + Click-->
<div @click.ctrl="doSomething">Do something</div>

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

6.1 .exact 修饰符

2.5.0 新增

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

<!--Ctrl 或 Alt 或 Shift 被一同按下时会触发-->
<button @click.ctrl="onClick">A</button>
<!--有且只有 Ctrl 被按下时才会触发-->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!--没有任何系统修饰符被按下时才会触发-->
<button @click.exact="onClick">A</button>

6.2 鼠标按钮修饰符

2.2.0 新增

  • .left
  • .right
  • .middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

7 为什么在 HTML 中监听事件?

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

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。

当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
老鱼 浅谈javascript面向对象编程
Mar 04 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
JavaScript实现刮刮乐效果
Nov 01 Javascript
JavaScript组合继承详解
Nov 07 Javascript
Vue插槽原理与用法详解
Mar 05 #Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 #Javascript
JavaScript函数定义方法实例详解
Mar 05 #Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 #Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 #Javascript
微信小程序保存多张图片的实现方法
Mar 05 #Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 #Javascript
You might like
PHP4实际应用经验篇(4)
2006/10/09 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
Python对文件操作知识汇总
2016/05/15 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
python 中如何获取列表的索引
2019/07/02 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
修理厂厂长岗位职责
2014/01/30 职场文书
自行车广告词大全
2014/03/21 职场文书
标准单位租车协议书
2014/09/23 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
美容院员工规章制度
2015/08/05 职场文书
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android