Vue--事件处理修饰符

最新推荐文章于 2024-04-04 11:02:50 发布
最新推荐文章于 2024-04-04 11:02:50 发布
阅读量439 收藏
点赞数
分类专栏： vue

capture即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。 
就是谁有该事件修饰符，就先触发谁。 例子如下:

<html>
  <head>
    <title>Vue事件修饰符 capture</title>
    <script src="vue.js"></script>
    <style type="text/css">
      *{
         text-align:center;
         line-height:40px;
         margin:0 auto;
      }
      div {
         width:100px;
      }
      #obj1 {
         background:deeppink;
      }
      #obj2 {
         background:pink;
      }
      #obj3 {
         background:hotpink;
      }
      #obj4 {
         background:#ff4225
      }
    
    </style>
  </head>
  <body>
   <div id="example">
      <div id="obj1" @click.capture="doSomething">
         obj1
         <div id="obj2" @click.capture="doSomething">
         obj2
           <div id="obj3" @click="doSomething">
             obj3
               <div id="obj4" @click="doSomething">
               obj4
               </div>
           </div>
         </div>
      </div>
   </div>
   <script>
    new Vue({
      el:"#example",
      data:{
        id:""
      },
      methods:{
        doSomething:function(event){
           this.id = event.currentTarget.id;
           alert(this.id);
        }  
      }
    })
   </script>
  </body>
</html>

当点击obj4的时候 触发顺序是 obj1,obj2,obj4,obj3   由于1，2有修饰符，故而先触发事件，然后就是4本身触发，最后冒泡事件。

 

self可以理解为跳过冒泡事件和捕获事件，只有直接作用在该元素上的事件才可以执行。

<html>
  <head>
    <title>Vue事件修饰符 self</title>
    <script src="vue.js"></script>
    <style type="text/css">
      *{
         text-align:center;
         line-height:40px;
         margin:0 auto;
      }
      div {
         width:100px;
      }
      #obj1 {
         background:deeppink;
      }
      #obj2 {
         background:pink;
      }
      #obj3 {
         background:hotpink;
      }
      #obj4 {
         background:#ff4225
      }
     
    </style>
  </head>
  <body>
   <div id="example">
      <div id="obj1" @click="doSomething">
         obj1
         <div id="obj2" @click="doSomething">
         obj2
           <div id="obj3" @click.self="doSomething">
             obj3
               <div id="obj4" @click="doSomething">
               obj4
               </div>
           </div>
         </div>
      </div>
   </div>
   <script>
    new Vue({
      el:"#example",
      data:{
        id:""
      },
      methods:{
        doSomething:function(event){
           this.id = event.currentTarget.id;
           alert(this.id);
        }
      }
    })
   </script>
  </body>
</html>

当点击obj4的时候会依次弹出  obj4,obj2,obj1 ,只有使用了事件修饰符的obj3没有弹出。只有当我们点击obj3才会触发它

once这个事件修饰符让点击事件只能触发一次

<html>
  <head>
    <title>Vue事件修饰符 once</title>
    <script src="vue.js"></script>
    <style type="text/css">
    </style>
  </head>
  <body>
   <div id="example">
      <button @click.once="clickme">点击我</button>
   </div>
   <script>
     new Vue({
       el:"#example",
       methods:{
         clickme(){
            alert("我被触发了");
         }
       }
     })
   </script>
  </body>
</html>

洛神赋在csdn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue事件修饰符和按键修饰符用法总结
12-03
事件修饰符是以点`.`开头的指令后缀，用于在事件处理函数中添加额外的行为。以下是一些常见的事件修饰符： 1. `.prevent`：这个修饰符用于调用 `event.preventDefault()`，阻止浏览器的默认行为。例如，表单提交时...
Vue修饰符
Yannnnnm的博客
01-11 1444
一、修饰符是什么 在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号 在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理 二、修饰符包含哪些 vue中修饰符分为以下五种： 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符 三、修饰符的作用 表单修饰符 在我们填写表单的时候用得最多的是input标签，指令用得最多的是v-model 关于表单的修饰符有如下： lazy .
vue中的修饰符
田兴的博客
09-17 8560
一、事件修饰符 .stop 阻止事件继续传播 .prevent 阻止标签默认行为 .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 .self 只当在 event.target 是当前元素自身时触发处理函数 .once 事件将只会触发一次 .passive 告诉浏览器你不想阻止事件的默认行为 <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事
Vue 32个修饰符，你不一定全知道！
热门推荐
前端开发博客
01-18 1万+
点击上方前端开发博客，关注公众号回复加群，加入前端群前言vue简洁好用体现在很多个地方，比如其内置了32+修饰符，可以很方便我们阻止冒泡、阻止默认事件、鼠标事件处理、系统键盘事件等等，让...
vue常用的修饰符
weixin_43962020的博客
12-09 2091
使用sync需要注意：使用sync的时候，子组件传递的事件名格式必须为update:value，其中value必须与子组件中props中声明的名称完全一致，注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用，将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的。在我们填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步。解析，则会返回原来的值。
Vue事件符.capture的含义用法
木木木华的博客
08-28 7762
vue事件符的.capture用法，含义是捕获。 先看一个4层结构的div盒子：div(最外层) >div(爷爷) >div(父亲) >div(儿子) 点击最里层儿子,则会冒泡打印输出，输出为： 现在给@click添加.capture修饰符 一、首先添加单个.capture给每层盒子，点击“儿子”看效果 1.给父亲加 输出： 2. 给爷爷加输出： 3. 给最外层加输出： 二、首先添加多个.capture给每层盒子，点击“儿子”看效果 ...
Vue 按键修饰符处理事件的方法
08-27
Vue 按键修饰符处理事件的方法 Vue 按键修饰符是 Vue 框架中的一种特殊处理事件的方法，它允许开发者轻松地处理键盘事件，无需关心 keyCode 的值。 Vue 按键修饰符主要分为两大类：按键别名和系统修饰键。 按键...
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
11-20
Vue 事件处理方法 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 v-on:click 单击事件 <button class=” btn btn-info” v-on:click=”add(1)”> + + </button> <button ...
vue中的事件修饰符
C20000407的博客
07-27 880
vue中的事件修饰符 1.prevent：阻止默认事件（常用） <a href="http://www.baidu.com" @click.prevent="showinfo"></a> 2.stop：阻止事件冒泡（常用） *{ margin-top: 20px; } .demo1{ height: 50px; background-color: skyblue; } <div class="demo1" @click="showInfo"> <butto
Vue 常用的修饰符有哪些？
weixin_62897746的博客
01-18 5380
在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号。 在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理 vue中修饰符分为以下五种： 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符
vue修饰符最全
qq_44741577的博客
02-02 1322
如果不用keyCode修饰符，那我们每次按下键盘都会触发shout，当我们想指定按下某一个键才触发这个shout的时候，这个修饰符就有用了，具体键码查看。在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。当我们写如下代码的时候,我们会发现如果仅仅使用系统修饰键是无法触发keyup事件的。事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给。另，如果是鼠标事件，那就可以单独使用系统修饰符。
Vue常见的事件修饰符
weixin_52512511的博客
08-07 2103
1.prevent:阻止默认事件(常用)2. stop:阻止事件冒泡(常用)3. once:事件只触发一次(常用)4.captrue:使用事件的捕捉模式(不常用)5.self:只有event.target是当前操作的元素时才触发事件(不常用)6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕(不常用)
Vue事件修饰符
weixin_49627122的博客
08-29 1448
为了更纯粹的数据逻辑，vue提供了很多事件修饰符，来代替处理一些 DOM 事件细节。主要是用来和事件连用，决定事件出发的条件或者用来阻止事件的触发机制。
vue中各类事件修饰符
WEBYANGxw的博客
12-19 2389
vue中各类事件修饰符
【前端知识之Vue】Vue常用的修饰符
weixin_44337386的博客
06-23 1432
本系列主要整理前端面试中需要掌握的知识点。本节介绍怎么缓存当前组件。
vue中的修饰符作用详细讲解
WUYOU798的博客
12-02 2981
vue中修饰符的使用
『VUE』10. 事件修饰符（详细图文注释）
最新发布
MZH
04-04 1731
『VUE』10. 事件修饰符（详细图文注释）
Vue常用修饰符
m0_67381422的博客
06-19 8648
1. 事件修饰符 - 处理 DOM 事件细节 2. 按键修饰符 - 为 v-on 在监听键盘事件时添加按键修饰符 3. 系统修饰键 -实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。 4. 鼠标按钮修饰符 - 限制处理函数仅响应特定的鼠标按键 5. 表单修饰符 - v-model增强的修饰符...
vue v-model 的修饰符
05-13
- .lazy：默认情况下，v-model 会在 input 事件触发后同步数据，使用 .lazy 修饰符可以让它改为在 change 事件触发后同步数据。 - .number：如果绑定的值需要转为数字类型，可以使用 .number 修饰符，它会自动将输入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值