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 相关文章推荐
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 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
解析php中curl_multi的应用
2013/07/17 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
php实现购物车功能(下)
2016/01/05 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
js中生成map对象的方法
2014/01/09 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
瑜伽国际:Yoga International
2018/04/18 全球购物
公司口号大全
2014/06/11 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
家长反馈意见及建议
2015/06/03 职场文书
初婚未育证明样本
2015/06/18 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
56句经典英文座右铭
2019/08/09 职场文书