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. IO之复制文件的四种方式

    1. 使用FileStreams复制 这是最经典的方式将一个文件的内容复制到另一个文件中. 使用FileInputStream读取文件A的字节,使用FileOutputStream写入到文件B. 这是 ...

  2. CISCN final 几道web题总结

    因为都有源码,所以这里直接从源码开始分析: 1.Easy web 这道题本来的意思应该是通过注入来load_file读取config.php来泄露cookie的加密密钥,从而伪造身份进行登陆再上传sh ...

  3. 项目中遇到的关于Java的问题

    1.Collections对List集合中的数据进行排序 http://blog.csdn.net/veryisjava/article/details/51675036 2.Java随机数 http ...

  4. 状压dp之不相连块

    传送门 一块田里草地格子不能相邻,问有几种方案. 预处理不相邻块 #include<iostream> #include<cstdio> #include<algorit ...

  5. ubuntu进行apt-get时候出现Package ssh is not available, but is referred to by another package 错误

    今天在ubuntu进行ssh安装的时候,出现如下错误. Reading package lists... Done Building dependency tree... Done Package s ...

  6. 用单元测试来调试SilverFish AI

    [TestFixture] public class AiTest { [Test] public void Test() { Settings.Instance.LogFolderPath = @& ...

  7. P4127 [AHOI2009]同类分布

    P4127 [AHOI2009]同类分布 题解 好的,敲上数位DP  DFS板子 记录一下填的各位数字之和 sum ,然后记录一下原数 yuan 最后判断一下  yuan%sum==0 不就好啦??? ...

  8. 客户端连接虚拟机上的MYSQL报错

    这个原因是因为虚拟机的数据库拒绝其他主机访问 所以需要设置虚拟机的mysql 打开mysql mysql>GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' ID ...

  9. outlier异常值检验算法之_箱型图(附python代码)

    python机器学习-乳腺癌细胞挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003&u ...

  10. [转]MySQL查询语句执行过程详解

    Mysql查询语句执行原理 数据库查询语句如何执行?语法分析:首先进行语法分析,对使用sql表示的查询进行语法分析,生成查询语法分析树.语义检查:检查sql中所涉及的对象以及是否在数据库中存在,用户是 ...