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. docker部署TX-LCN5.0.2

    主要是在配置tx-lcn.manager.host时需要特别注意下,应该安装如下配置进行 tx-lcn: manager: host: 0.0.0.0 port: 8070 heart-time: 1 ...

  2. R-CNN论文阅读摘要

    论文链接: https://arxiv.org/pdf/1311.2524.pdf Abstract Our approach combines two key insights: (1) one c ...

  3. python调试工具remote_pdb

    介绍一个调试python代码的工具:remote_pdb https://pypi.org/project/remote-pdb/ 安装 pip install remote-pdb 使用 1,设置断 ...

  4. 使用div 的 contenteditable属性，实现输入编辑，输入 "#" 出现下拉选择

    文章原文:https://www.cnblogs.com/yalong/p/11883585.html 演示效果如下:   具体代码可以看 https://github.com/YalongYan/e ...

  5. 小D课堂 - 新版本微服务springcloud+Docker教程_5-02 Netflix开源组件断路器

    笔记 2.Netflix开源组件断路器Hystrix介绍     简介:介绍Hystrix基础知识和使用场景          文档地址:         https://github.com/Net ...

  6. SSM框架—Spring AOP之基于注解的声明式AspectJ（Demo）

    项目结构 XML <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http ...

  7. 一百二十五：CMS系统之首页轮播实现

    把base模板分为左右两块版心 .main-container{ /*整体版心*/ width: 990px; margin: 0 auto; overflow: hidden;}.lg-contai ...

  8. excel怎么设置密码保护?Excel文件添加密码保护教程

    excel怎么设置密码保护?Excel文件添加密码保护教程 众所周知,Excel具有强大的数据处理和数据分析能力,广泛应用于加工学统计及金融统计中.特别是金融统计需要较高的安全性,那么就一定要为Exc ...

  9. MySQL性能的五大配置参数(内存参数)

    内存参数: 存储引擎/共享日志缓冲区,缓冲区池 innodb_buffer_pool_sizeinnodb_additional_mem_pool_sizeinnodb_log_buffer_size ...

  10. Git学习教程一之安装Git&&&本地仓库建立

    一. 安装git 1:在Windows上使用Git,可以从Git官网直接下载安装程序,(网速慢的同学请移步国内镜像),然后按默认选项一直安装即可. 2:安装完成后,在开始菜单里找到“Git”-> ...