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. Django环境搭建win（二）

    Django 1.11.x 支持 Python 2.7, 3.4, 3.5 和 3.6,17年4月4号 已经发布(长期支持版本 LTS) win7下: 一.使用pip安装 1.首先要安装pip 2.p ...

  2. airflow自动生成dag

    def auto_create_dag(): dag_list=[] dag = DAG() dag_list.append(dag) return dag_list dags = auto_crea ...

  3. canvas实现水印

    最近遇到一个需求,给所有页面加水印(登录人),不影响其他点击等功能的使用,目的是防止信息外漏,当时就在想:这年头,PS就不说人人都能使用,谁手机还没个涂鸦功能,防不了,但是就是这么个需求,那就实现吧! ...

  4. Java web 实验三部分资料上传

    花好月圆系列 貂蝉 黄月英 孙尚香 甄姬 标准包 魏 曹操 司马懿 郭嘉 甄姬 张辽 许褚 夏侯惇 蜀 刘备 关羽 张飞 诸葛亮 黄月英 赵云 马超 吴 孙权 孙尚香 周瑜 大乔 甘宁 吕蒙 群 吕布 ...

  5. python格式化输出（% format用法）

    %基本用法: 十进制输出:print('%d' % 6)    6也可以换成其它的数字变量 八进制输出:print('%o' % 6)  6也可以换成其它的数字变量 字符串输出:print('%s' ...

  6. 状压dp之不相连块

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

  7. js怎么动态加载js文件（JavaScript性能优化篇）

    下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度 [基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完 ...

  8. R语言：各类型数据文件的导入

    导入csv: read.csv() 导入txt: read.table() 注意,txt文件编码为unicode的导入r会报错,需转换成ANSI 读入excel:需要安装xlsx包,安装此包前先下载好 ...

  9. 微信小程序之状态管理A

    其实这个标题 不是很对 主要是最近小程序项目中 有这么一个状态 所有商品都共用一个商品详情页面  大概就是这样子  为了公司 保险起见,一些展示的内容已经处理 但是无伤大雅 就是这么两个按钮 左侧粉色 ...

  10. Android跨进程通信广播（Broadcast）

    广播是一种被动跨进程通讯的方式.当某个程序向系统发送广播时,其他的应用程序只能被动地接收广播数据.这就象电台进行广播一样,听众只能被动地收听,而不能主动与电台进行沟通,在应用程序中发送广播比较简单.只 ...