Vue----.stop、.prevent、.capture、.self用法以及.stop和.self的区别

1、" .stop “：阻止冒泡，具体事例，在点击【戳他】按钮后，触发 input对应的函数 ‘btnHandler’，该函数执行完成后，会触发div的函数’ divHandler '，为了防止此类情况的发生，需要在Input的点击事件上添加” .stop "。

<div class="inner" @click="divHandler"> <!-- 使用 .stop 阻止冒泡 --><input type="button" value="戳他" @click.stop="btnHandler">
</div>

2、" .prevent " : 使用 " .prevent " 阻止默认行为，在超链接中的点击事件中使用该属性，超链接不会跳转而只执行函数对应的内容。

<!-- 使用 .prevent 阻止默认行为 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">去百度</a>

3、" .capture " ：实现捕获触发事件的机制，在点击【戳他】按钮后，先执行div标签的函数，再执行【戳他】按钮，对应的函数。

<!-- 使用 .capture 实现捕获触发事件的机制 -->
<div class="inner" @click.capture="divHandler"><!-- 从外到里 --><input type="button" value="戳他" @click.stop="btnHandler">
</div>

4、" .self "：只有点击当前元素的时候，才会触发事件处理函数。点击【戳他】按钮，只执行【戳他】按钮对应的函数，而不会冒泡执行div中的函数，div中的函数只有点击时才触发。

<div class="inner" @click.self="divHandler"><input type="button" value="戳他" @click.stop="btnHandler">
</div>

5、" .once ": 只触发一次事件处理函数。点击【有问题，先去百度】，执行a标签对应的函数，再次点击会跳转到百度页面。

<a href="http://www.baidu.com" @click.prevent.once="linkClick">去百度</a>

6、" .stop “和” .self “的区别：” .self “只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为。” .stop "会阻止所有的冒泡的行为。

点击【戳他】后只执行【戳他】对应的函数，往上的两个div中的函数不执行。

<div class="outer" @click="div2Handler"><div class="inner" @click="divHandler"><input type="button" value="戳他" @click.stop="btnHandler"></div></div>

点击【戳他】后，会执行 btnHandler和div2Handler函数，而不执行divHandler函数。

<div class="outer" @click="div2Handler"><div class="inner" @click.self="divHandler"><input type="button" value="戳他" @click="btnHandler"></div>
</div>

Vue----.stop、.prevent、.capture、.self用法以及.stop和.self的区别相关推荐

vue click事件_vue指令用法
vue指令指令式带有 v- 前缀的特殊特性v-text和v-html都属于指令将数据和dom做关联,当表达式的值改变时,响应式地作用在视图解决大胡子语法闪烁案例 [v-cloak] {dispal ...
「后端小伙伴来学前端了」Vue中 this.$set的用法 | 可用于修改对象中数组的某一个对象、可用于更新数据到视图
夜晚有明月,梦里有佳人前言最近在写老师布置的vue项目,真的说实话,每天真就是在百度.google.bing等各个搜索引擎之间反复横跳,不然就是掘金搜一搜.思否搜一搜,还有CSDN看一看.我的前端 ...
ElementUI+VUE 日期控件禁用用法
今天给大家整理一下ElementUI+VUE 日期控件禁用用法,希望对大家有所帮助! HTML文件 <el-date-pickerv-model="value"type=&q ...
详解Vue中watch的高级用法
转载自详解Vue中watch的高级用法我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: 1 2 3 4 5 6 7 8 9 10 ...
slot多作用域 vue_详解Vue.js 作用域、slot用法（单个slot、具名slot）
作用域HEi免费资源网在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板:HEi免费资源网 {{message}} 这里的message就是一个slot,但是它绑定的是父组件 ...
vue新版router.addRoute基础用法
vue新版router.addRoute基础用法新版Vue Router中用router.addRoute来替代原有的router.addRoutes来动态添加路由.子路由在添加子路由的时候比如 ...
Vue过滤器的几种用法
Vue过滤器的几种用法本文主要介绍Vue项目中filter的几种用法. 一. 单独在组件或者是页面中使用单独在页面或者是组件中使用vue filter比较简单,主要是用在{{ }} 和v-bind ...
vue和react相同点_我在React和Vue中创建了相同的应用程序。这是区别。
vue和react相同点 by Sunil Sandhu 由Sunil Sandhu 我在React和Vue中创建了相同的应用程序. 这是区别. (I created the same app in ...
vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
vue 路由传参 params 与 query两种方式的区别
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...

Vue----.stop、.prevent、.capture、.self用法以及.stop和.self的区别

Vue----.stop、.prevent、.capture、.self用法以及.stop和.self的区别相关推荐

最新文章

热门文章