vue 事件修饰符 个人见解

最新推荐文章于 2024-04-04 11:02:50 发布
最新推荐文章于 2024-04-04 11:02:50 发布
阅读量1k 收藏 2
点赞数 1
分类专栏： vue 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41868790/article/details/84378239
版权
事件修饰符总览
  • stop : 阻止冒泡
  • capture ： 捕获
  • self ：点击自身才触发
  • once ： 只触发一次
  • prevent ：阻止默认事件
综述

例如下面代码中的各个嵌套的div，say()方法为弹窗显示所传入的参数。

<div id="app">
  <div @click="say('outter')">outter
    <div @click="say('middle')">middle
      <div @click="say('inner')">inner
		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
	  </div>	  
	</div>
  </div>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>

vue中点击内层的div时默认以冒泡的方式依次触发事件。即点击最内层inner时，会依次从内到外出发事件，此时点击inner后弹窗顺序为
inner
middle
outter

事件修饰符的作用即为控制这种事件的触发方式。

stop

将div代码修改为,即在middle一层加上stop修饰。

	<div @click="say('outter')">outter
	  <div @click.top="say('middle')">middle
	    <div @click="say('inner')">inner
		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
	    </div>	  
	  </div>
	</div>

此时，运行弹窗顺序为
inner
middle

middle弹窗后便停止，outter没有继续弹窗，所以称stop的功能为阻止冒泡。

capture

capture 释义为捕获，其流程与冒泡相反，冒泡是从内至外，捕获为从外到内。
修改代码为：

  <div @click="say('outter')">outter
    <div @click.capture="say('middle')">middle
      <div @click="say('inner')">inner
		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
	  </div>	  
	</div>
  </div>

此时点击inner的弹窗顺序为:
middle
inner
outter

在响应inner前，其外层middle先将点击事件捕获了，所以先触发middle。而outter没有修饰默认为冒泡所以在内层两个弹窗后弹窗。

self

self 为响应自身时才可触发。
修改代码为：

<div @click="say('outter')">outter
    <div @click.self="say('middle')">middle
      <div @click="say('inner')">inner
		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
	  </div>	  
	</div>
  </div>

此时点击inner的弹窗顺序为:
inner
outter

其中middle被修饰为self，所以当点击inner时，向上冒泡时middle不被触发，直接跳到outter。此时只有点击middle时才可触发其点击事件。

once

once 为只响应第一次，随后的便不响应。
修改div代码为：

  <div @click="say('outter')">outter
    <div @click.once="say('middle')">middle
      <div @click="say('inner')">inner
		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
	  </div>	  
	</div>
  </div>

此时第一次点击inner时，弹窗顺序为：
inner
middle
outter

第二次点击inner时，弹窗顺序为：
inner
outter

即第二次触发middle时，事件被once修饰符过滤了。

prevent

prevent 作用为阻止默认事件
沿用上例代码：

  <div @click="say('outter')">outter
    <div @click.once="say('middle')">middle
      <div @click="say('inner')">inner
		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
	  </div>	  
	</div>
  </div>

a标签的默认事件为跳转进入href，增加click.prevent修饰后，当点击该链接时，并没有发生跳转而直接发生div的弹窗响应了。

代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <div @click="say('outter')">outter
    <div @click="say('middle')">middle
      <div @click="say('inner')">inner
		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
	  </div>	  
	</div>
  </div>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>
</body>
</html>
糖醋小侠
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue事件修饰符和按键修饰符用法总结
12-03
之前关于vue事件修饰符和按键修饰符的一点分析，最近需要回顾，就顺便发到随笔上了 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。 .prevent .capture .self .once <div @click='doThis' style="widt
Vue修饰符
Yannnnnm的博客
01-11 1414
一、修饰符是什么 在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号 在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理 二、修饰符包含哪些 vue中修饰符分为以下五种： 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符 三、修饰符的作用 表单修饰符 在我们填写表单的时候用得最多的是input标签，指令用得最多的是v-model 关于表单的修饰符有如下： lazy .
『VUE』10. 事件修饰符（详细图文注释）
最新发布
MZH
04-04 928
『VUE』10. 事件修饰符（详细图文注释）
Vue基础--Vue中的事件绑定指令详解
qq_44749491的博客
09-24 5942
详解Vue中的事件绑定
vue中修饰符
iygxv
02-24 1211
故心故心故心故心小故冲啊 文章目录vue中修饰符分为以下五种：表单修饰符事件修饰符鼠标按钮修饰符键盘修饰符v-bind修饰符 vue中修饰符分为以下五种： 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符 表单修饰符 lazy 在我们填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步 trim 自动过滤用户输入的首空格字符，而中间的空格不会过滤 number 自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析
Vue内置指令大全
CoderBin的博客
10-04 1358
大家好，我是 CoderBin，太久没碰 Vue 了，搞的连一些最基本的指令写法都有点模糊了，所以这一次就对Vue所有的内置指令进行回顾总结，前面先说明一些常用指令，不常用的放在后面。
Vue 学习笔记
Pennyswh的博客
10-04 1294
Vue 实例化 每一个vue与应用都需要通过实例化来实现。 &lt;div id="vue_det"&gt; &lt;h1&gt;site : {{site}}&lt;/h1&gt; &lt;h1&gt;url : {{url}}&lt;/h1&gt; &lt;h1&gt;{{details()}}&lt;/h1&gt; &lt;/div&amp
vue的详细用法之---vue的基础语法（一）
zayyo的博客
11-26 536
v-once指令 v-once用于指定元素或者组件只渲染一次： p当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过； p该指令可以用于性能优化； 如果是子节点，也是只会渲染一次： v-text指令 用于更新元素的 textContent： v-html 默认情况下，如果我们展示的内容本身是 html 的，那么vue并不会对其进行特殊的解析。 p如果我们希望这个内容被Vue可以解析出来，那么可以使用 v-html 来展示； v-pre v-pre用于跳过元素和它的子元素的编译过程
Vue3自学笔记
weixin_46139439的博客
08-26 632
vue3学习笔记
事件修饰符
Issssy的博客
11-25 356
event.preventDefault()/阻止默认行为或者event.stopPropagation()/阻止事件冒泡。.stop.prevent 修饰符可以串联，既阻止冒泡又阻止默认行为。为了解决这个问题，Vue.js提供了事件修饰符。.self 当事件目标是当前元素自身时，触发事件。@submit.prevent 提交事件不在重载页面。.capture 将原本默认的冒泡方式改为捕捉方式。修饰符是以点开头的指令后缀来表示的。.prevent 阻止事件默认行为。.stop 阻止事件冒泡继续传播。
Vue事件修饰符native、self示例详解
10-16
主要给大家介绍了关于Vue事件修饰符native、self的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Vue 按键修饰符处理事件的方法
08-27
主要介绍了Vue 按键修饰符的相关资料，vue中新增按键修饰符和系统修饰符来处理类似的事件，具体内容详情大家参考下本
vue中的事件修饰符
C20000407的博客
07-27 822
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中各类事件修饰符
WEBYANGxw的博客
12-19 2356
vue中各类事件修饰符
Vue常见的事件修饰符
weixin_52512511的博客
08-07 1265
1.prevent:阻止默认事件(常用)2. stop:阻止事件冒泡(常用)3. once:事件只触发一次(常用)4.captrue:使用事件的捕捉模式(不常用)5.self:只有event.target是当前操作的元素时才触发事件(不常用)6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕(不常用)
Vue事件修饰符
weixin_49627122的博客
08-29 1416
为了更纯粹的数据逻辑，vue提供了很多事件修饰符，来代替处理一些 DOM 事件细节。主要是用来和事件连用，决定事件出发的条件或者用来阻止事件的触发机制。
Vue常用修饰符
m0_67381422的博客
06-19 8544
1. 事件修饰符 - 处理 DOM 事件细节 2. 按键修饰符 - 为 v-on 在监听键盘事件时添加按键修饰符 3. 系统修饰键 -实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。 4. 鼠标按钮修饰符 - 限制处理函数仅响应特定的鼠标按键 5. 表单修饰符 - v-model增强的修饰符...
vue 事件修饰符&按键修饰符
04-02
Vue事件修饰符是用来改变事件的行为的特殊标记。它们以点号(".")开头，紧跟着是修饰符的名称。Vue提供了以下事件修饰符： 1. .stop：阻止事件冒泡； 2. .prevent：阻止默认行为； 3. .capture：使用事件捕获模式； 4. .self：只当事件在该元素本身（而不是子元素）触发时触发回调； 5. .once：只触发一次； 6. .passive：告诉浏览器该事件处理程序不会调用preventDefault()。 例如： ``` <button @click.stop="doSomething"></button> ``` 在这个例子中，当点击按钮时，事件不会冒泡到父元素。 ``` <a href="#" @click.prevent="doSomething"></a> ``` 在这个例子中，当点击链接时，页面不会跳转到指定链接，因为事件被阻止了默认行为。 ``` <div @click.capture="doSomething"></div> ``` 在这个例子中，使用事件捕获模式，事件从最外层元素开始向内传递。 ``` <div @click.self="doSomething"></div> ``` 在这个例子中，只有当点击div元素本身时，事件才会触发回调函数。 ``` <button @click.once="doSomething"></button> ``` 在这个例子中，事件只会触发一次。 ``` <div @touchstart.passive="doSomething"></div> ``` 在这个例子中，告诉浏览器该事件处理程序不会调用preventDefault()，可以提高页面的滚动性能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值