监听事件


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

示例:

 <div id="example-1">                                                 HTML
   <button v-on:click="counter += 1">Add 1</button>
   <p>The button above has been clicked {{ counter }} times.</p>
 </div>
 var example1 = new Vue({                                               JS
   el: '#example-1',
   data: {
     counter: 0
   }
 })

结果:

事件处理方法


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

示例:

 <div id="example-2">                                                HTML
   <!-- `greet` 是在下面定义的方法名 -->
   <button v-on:click="greet">Greet</button>
 </div>
 var example2 = new Vue({                                             JS
   el: '#example-2',
   data: {
     name: 'Vue.js'
   },
   // 在 `methods` 对象中定义方法
   methods: {
     greet: function (event) {
       // `this` 在方法里指向当前 Vue 实例
       alert('Hello ' + this.name + '!')
       // `event` 是原生 DOM 事件
       if (event) {
         alert(event.target.tagName)
       }
     }
   }
 })

 // 也可以用 JavaScript 直接调用方法
 example2.greet() // => 'Hello Vue.js!'

内联处理器中的方法


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

 <div id="example-3">                                                HTML
   <button v-on:click="say('hi')">Say hi</button>
   <button v-on:click="say('what')">Say what</button>
 </div>
 new Vue({                                                       JS
   el: '#example-3',
   methods: {
     say: function (message) {
       alert(message)
     }
   }
 })

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

 <div id="example-3">
   <button v-on:click="warn('Form cannot be submitted yet.', $event)">                  HTML
     Submit
   </button>
 </div>
 new Vue({                                                       JS
   el: '#example-3',
   methods: {
     warn: function (message, event) {
       // 现在我们可以访问原生事件对象
       if (event) event.preventDefault()
       alert(message)
     }
   }
 })

事件修饰符


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

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

——  .stop

——  .prevent

——  .capture

——  .self

——  .once

——  .passive

 <!-- 阻止单击事件继续传播 -->                                            HTML
 <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新增

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

不像其他只能对原生的dom事件起作用的修饰符,.once 修饰符还能被用到自定义的组件事件上。如果你还没有阅读关于组件的文档,现在没有关系!

2.3.0新增

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

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

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

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

按键修饰符


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

 <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->                                             HTML
 <input v-on:keyup.13="submit">

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

 <!-- 同上 -->                                                                    HTML
 <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`                                                                     HTML
 Vue.config.keyCodes.f1 = 112

自动匹配按键修饰符

2.5.0新增

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

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

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

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

系统修饰键


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"。

.exact 修饰符

2.5.0 新增

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

 <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->                                                           HTML
 <button @click.ctrl="onClick">A</button>

 <!-- 有且只有 Ctrl 被按下的时候才触发 -->
 <button @click.ctrl.exact="onCtrlClick">A</button>

 <!-- 没有任何系统修饰符被按下的时候才触发 -->
 <button @click.exact="onClick">A</button>

鼠标按钮修饰符

2.2.0新增

——  .left

——  .right

——  .middle

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

为什么在HTML中监听事件?


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

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

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

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

vue基础——事件处理的更多相关文章

  1. vue基础---事件处理

    (1)事件监听 v-on 指令监听 DOM 事件,并在触发时运行JS代码 <div class="event_area"> {{message}} <button ...

  2. Vue基础语法-数据绑定、事件处理和扩展组件等知识详解(案例分析,简单易懂,附源码)

    前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...

  3. python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  4. 前端Vue基础学习

    Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...

  5. Vue基础知识梳理

    1. Vue 实例 1.1 创建一个Vue实例 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的.可复用的组件树组成.demo 1.2 数据与方法 数据的响应式渲 ...

  6. vue基础入门(2.1)

    2.vue基础用法 2.1.事件处理 2.1.1.监听事件 使用v-on:事件名称 = '事件处理函数'的形式来监听事件,事件处理函数要写在methods后面的对象中 <!DOCTYPE htm ...

  7. Vue基础(1)

    Vue简介 1.JavaScript框架 2.简化Dom操作 3.响应式数据驱动 Vue基础 通过下面代码引用vue: <script src="https://cdn.jsdeliv ...

  8. vue - vue基础/vue核心内容

    终于算是顺利进入vue了,确实也只有学了过后才知道,之前三过vue而不学,确实是对的,现在进来了一点都不后悔,ajax.node.js.promise.webpack.git等等确实是除了三大基础外还 ...

  9. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

随机推荐

  1. TortoiseSVN使用步骤和trunk,Branch,Tag详细说明

    1 安装及下载client 端 2 什么是SVN(Subversion)? 3 为甚么要用SVN? 4 怎么样在Windows下面建立SVN Repository? 5 建立一个Working目录 6 ...

  2. 一 JAVA整体概念以及安装部署

    JAVA 基本概念  JVM(JAVA virtual machine)java虚拟机,是java的能跨平台的核心,java的跨平台实现,就是在各种系统中布置JVM,然后java应用运行在JVM中,相 ...

  3. Apache Spark 内存管理详解

    在spark里面,内存管理有两块组成,一部分是JVM的堆内内存(on-heap memory),这部分内存是通过spark dirver参数executor-memory以及spark.executo ...

  4. hello world之Makefile

    hello world之Makefile

  5. War包反编译过程

    War包反编译过程 很多人可以将项目编译为war发布,可是有时候得到war确看不到源码.今天分享下war反编译的过程: 1.首先下载一个小工具,在http://jd.benow.ca/官网下载jd-g ...

  6. 大数据应用之HBase数据插入性能优化之多线程并行插入测试案例

    一.引言: 上篇文章提起关于HBase插入性能优化设计到的五个参数,从参数配置的角度给大家提供了一个性能测试环境的实验代码.根据网友的反馈,基于单线程的模式实现的数据插入毕竟有限.通过个人实测,在我的 ...

  7. CentOS 7安装和配置ssh

      1. 安装openssh-server yum install -y openssl openssh-server 2. 修改配置文件 用vim打开配置文件/etc/ssh/sshd_config ...

  8. BASIC-1_蓝桥杯_闰年判断

    正确代码: #include <stdio.h> int main(void){ int year = 0 ; scanf("%d",&year); if (y ...

  9. java操作Excel之POI(5)利用POI实现使用模板批量导出数据

    后台导出方法: 在源文件夹src下面放个准备好的模板:/com/cy/template/userExportTemplate.xls,这个模板有头部一行: /** * 后台导出方法 * 利用POI实现 ...

  10. Java 经典练习题_Day06

    面向对象与面向过程的比较 类与对象的关系 成员变量和局部变量 构造方法 this 构造代码块 局部代码块 匿名对象 一. 选择题 1.下列各项中关于面向对象及面向过程的说法错误的是:(BDE) A.  ...