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. springMVC课程笔记（一）springMVC架构原理分析

    一.springMVC架构原理分析 1.先搞清楚什么是springMVC: 其实springMVC是spring框架中的一个模块,springMVC和spring无需通过中间整合层整合,SpringM ...

  2. jquery+ajax 实现搜索框提示

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

  3. POJ 1789 -- Truck History（Prim）

     POJ 1789 -- Truck History Prim求分母的最小.即求最小生成树 #include<iostream> #include<cstring> #incl ...

  4. YOLO: You Only Look Once论文阅读摘要

    论文链接: https://arxiv.org/pdf/1506.02640.pdf 代码下载: https://github.com/gliese581gg/YOLO_tensorflow Abst ...

  5. 数据分析 - matpltlib 模块

    matplotlib 模块 引入模块 import matplotlib.pyplot as plt 设置图片大小 - figure 展示图片 - show 画图 - 实例化后指定类型画图 plot  ...

  6. 'pybot.bat' 不是内部或外部命令,也不是可运行的程序

    在通过命令行工具 运行RobotFramework的文件, 会使用到pybot.bat. 在dos输入pybot提示'pybot' 不是内部或外部命令,也不是可运行的程序或批处理文件, 可以在pyth ...

  7. PCD（点云数据）文件格式

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=54 为什么用一种新的文件格式? PCD文件格式并非白费力气地做重复工作,现有 ...

  8. Js 监听器

    在Ajax取数据时,采用$("#id").click(function(){})的方式不能正确设置监听,需要用$("#parent").on("cli ...

  9. 工具 --- Git

    Git介绍 Git是目前世界上最先进的分布式版本控制系统. git 诞生: git诞生之前当时的CVS和SVN这些集中式的版本控制系统不但速度慢,而且必须联网才可以使用.由于代码量越来越多,linus ...

  10. Leetcode之动态规划（DP）专题-198. 打家劫舍（House Robber）

    Leetcode之动态规划(DP)专题-198. 打家劫舍(House Robber) 你是一个专业的小偷,计划偷窃沿街的房屋.每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互 ...