Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰符. 下面是 vue 的 事件修饰符 和 按键修饰符.

事件修饰符

<!-- 阻止单击事件冒泡 -->

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

<!-- click 事件只能点击一次，2.1.4版本新增 -->

<a v-on:click.once="doThis"></a>

按键修饰符

<!-- 只有在 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

.ctrl

.alt

.shift

.meta

下面是一个实际的例子, 执行顺序为: 最外层 > 第二层 > 最里层 > 第三层

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

  <style>

      .style1 {

          width: 100px; height: 100px; background-color: tomato;

          text-align: center; line-height: 100px; color: white;

          cursor: pointer;

      }

  </style>

</head>

<body>

    <div id="app">

        <div class="style1" v-on:click.capture="act1">

            <!-- 最外层 -->

            <div v-on:click.capture="act2">

                <!-- 第二层 -->

                <div v-on:click="act3">

                    <!-- 第三层 -->

                    <div v-on:click="act4">

                        <!-- 最里层 -->

                        点击

                    </div>

                </div>

            </div>

        </div>

    </div>

    <script>

        var vApp = new Vue({

            el: "#app",

            methods: {

                act1: function () { alert("最外层") },

                act2: function () { alert("第二层") },

                act3: function () { alert("第三层") },

                act4: function () { alert("最里层") }

            }

        })

    </script>

</body>

</html>

怎样在 Vue 中使用 事件修饰符 ?的更多相关文章

  1. vue中的事件修饰符

    vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...

  2. 33、vue中的事件修饰符.stop、.prevent、.self、.capture、.once

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. （二）咋使用VUE中的事件修饰符

    1,stop修饰符:阻止事件冒泡 首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下 现在我们在click后面添 ...

  4. vue中的.passive修饰符

    一.passive作用 详情请参考MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)中 ...

  5. [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)

    preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...

  6. vue指令与事件修饰符

    一.条件渲染指令 vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show. 实例: <!DOCTYPE html> <html lang="en&q ...

  7. vue学习(六) 事件修饰符 stop prevent capture self once

    //html <div id="app"> <div @click="divHandler" style="height:150px ...

  8. Vue指令之事件修饰符

    事件修饰符: + .stop 阻止冒泡 + .prevent 阻止默认事件 + .capture 添加事件侦听器时使用事件捕获模式 + .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 ...

  9. vue中的.native修饰符

    如果你想在某个组件的根元素上绑定事件,直接使用 @click=''function' 是不生效的,我们可以添加.native修饰符 @click.native=''function'',请看以下dem ...

随机推荐

  1. SAE上配置Django静态文件

    很简单,步骤如下: 1.修改配置文件 setting.py 中的STATIC_ROOT为 '/static/' 2. 运行 python manage.py collectstatic , 将静态文件 ...

  2. ubuntu 安装eclipse for c++

    linux的GUI和windos比起来实在逊色,虽然它的终端模式(命令行模式)非常强大.linux发行版ubuntu的GUI相对其他版本要华丽一些,所以最近由redhat转向ubuntu进行linux ...

  3. 2018-2019-2 20175226王鹏雲 实验四《Android程序设计》实验报告

    2018-2019-2 20175226王鹏雲 实验四<Android程序设计>实验报告 实验报告封面 课程:Java程序设计 班级:1752班 姓名:王鹏雲 学号:20175226 指导 ...

  4. Linux设备驱动程序 之 Makefile

    典型的模块Makefile如下所示: ifneq ($(KERNELRELEASE),) obj-m := hello.o else KERNELDIR ?=/lib/modules/$(shell ...

  5. WPF global exception handler

    WPF global exception handler [duplicate] https://stackoverflow.com/questions/1472498/wpf-global-exce ...

  6. 关于jenkins

    启动不了时可更改端口 java -jar jenkins.war –httpPort=8090

  7. 数据库 | SQL语法优化方法及实例详解

    使用复合索引 如果经常执行如上查询,那么建立三个单独索引不如建立一个复合索引,因为三个单独索引通常数据库每次执行只能使用其中一个,虽然这样比不使用索引而进行全表扫描提高了很多效率,但使用复合索引因为索 ...

  8. qt 之http学习

    在Qt网络编程中,需要用到协议,即HTTP.它是超文本传输协议,它是一种文件传输协议. 新建工程名为“http”,然后选中QtNetwork模块,最后Base class选择QWidget.注意:如果 ...

  9. RecoderUtils录音工具类

    import android.media.MediaRecorder; import android.os.Environment; import java.io.File; import java. ...

  10. Rancher Server部署方式及Rancher HA环境部署

    类似Rancher这种的容器管理和编排工具,它可以很快地让每个组织获得高效的弹性集群管理能力.当前技术世界的发展形势就是让开发人员从繁琐的应用配置和管理中解放出来,使用容器镜像来处理复杂的程序运行依赖 ...