vue-事件修饰符-详解（.prevent .stop .once .capture .self）

vue事件修饰符-详解

.prevent -------等于javascript的event.preventDefault()
作用：阻止默认程序的运行
```
<form @submit.prevent="SomeFunction"></form>
```
单独submit点击后会自动进行提交等一系列操作，prevent就可以阻止这些操作，让上面这段代码乖乖执行我们分配给它的SomeFunction

.stop
作用:阻止冒泡
什么叫冒泡?冒泡就是子元素的事件传递到父元素，用以下代码为例，点击button后，触发inner-click，但是因为这个button在中间的这个middle里，同时也相当于我们点击了middle这个元素，也就是button的父元素。同理，也相当于点击了outer元素，也就是说执行了inner-click后再执行middle-click紧接着outer-click。这就叫做冒泡，一个从子元素向父元素传递事件的行为。

<div id="app"> <div class="outer" @click="outer-click"> <div class="middle" @click="middle-click"> <button @click="inner-click">点击我(^_^)</button></div></div>
</div>

　　methods: { inner: function () {console.log('inner： 这是最里面的Button' )}, middle: function () { console.log('middle: 这是中间的Div' )}, outer: function () { console.log('outer: 这是外面的Div' )} }

运行结果：

inner： 这是最里面的Button
middle: 这是中间的Div
outer: 这是外面的Div

.stop的存在就相当于阻止事件向父元素传递，保证只执行inner-cli

<div id="app"> <div class="outer" @click="outer-cli"> <div class="middle" @click="middle-cli"> <button @click.stop="inner-cli">点击我(^_^)</button></div></div>
</div>

运行结果：

inner： 这是最里面的Button

同理.stop如果放在middle里面，那么输出结果为：

 inner： 这是最里面的Buttonmiddle: 这是中间的Div

.capture
作用：打乱冒泡顺序，用以下代码为例，发生click事件时会优先去找你可以传递到的所有父元素中最后一个有.capture的元素（这里可以传递到middle和outer，最有一个有.capture的元素是outer），然后优先执行这个元素的事件，紧接着执行倒数第二个有.capture的事件（middle），最后再按照正常的冒泡顺序从自己开始往上执行未经执行的父元素的click事件
```
<div id="app"> <div class="outer" @click.capture="outer"> <div class="middle" @click.capture="middle"> <button @click="inner">点击我(^_^)</button></div></div>
</div>
```
运行结果：
```
outer: 这是外面的Div
middle: 这是中间的Div
inner： 这是最里面的Button
```
Some More Examples:
```
<div id="app"> <div class="outer" @click="outer"> <div class="middle" @click.capture="middle"> <button @click="inner">点击我(^_^)</button></div></div>
</div>
```
运行结果：
```
middle: 这是中间的Div
inner： 这是最里面的Button
outer: 这是外面的Div
```
.self
作用：不让子元素的事件触发自己绑定的事件，但是不会阻止冒泡！
例子：
```
<div id="app"> <div class="outer" @click="outer"> <div class="middle" @click.self="middle"> <button @click="inner">点击我(^_^)</button></div></div>
</div>
```
这里middle这里有一个.self，当我们点击button的时候，先执行inner，传递到middle，但是.self阻止了middle的cli事件，所以继续冒泡到outer,执行outer的click事件。
运行结果：
```
   inner： 这是最里面的Buttonouter: 这是外面的Div
```

.once
顾名思义，事件只会触发一次

<button @click.once="inner">点击我(^_^)</button>

祝你好运！！！

vue-事件修饰符-详解（.prevent .stop .once .capture .self）相关推荐

Vue 事件修饰符详解
本人后端程序员,由于绑页面需要使用vue,在自学的过程中不懂事件修饰符,特此请教后才理解,在这提出我的分享,忘各位大神指正. vue官网上指出: 在事件处理程序中调用 event.preventDef ...
vue事件修饰符详解
vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...
事件修饰符@（stop, prevent, self, once, capture, passive）
事件修饰符@(stop, prevent, self, once, capture, passive) <div @touchmove.prevent></div> .stop ...
Vue事件修饰符（prevent，stop，once，capture，self）
1.Vue的事件修饰符: 1.prevent 阻止默认事件(常用) 2.stop:阻止默认冒泡(常用) 3.once:事件只触发一次(常用) 4.capture:使用事件的捕获模式 5.self:只有 ...
vue事件修饰符有哪些
vue 事件修饰符 1.prevent:阻止默认事件 2.stop:阻止事件冒泡 3.once:事件只触发一次 4.capture:使用事件的捕捉模式 5.self:只有event.target是当前 ...
Vue事件修饰符的理解
Vue中的事件修饰符: 1.prevent:阻止默认事件(常用): 2.stop:阻止事件冒泡(常用): 3.once:事件只触发一次(常用): 4.capture:使用事件的捕获模式: 5.self ...
java访问修饰符详解——学java，零基础不怕，不只要理论，更要实践+项目，a href=http://www.bjweixin.com太原维信科技提供 /a...
java访问修饰符详解--学java,零基础不怕,不只要理论,更要实践+项目 <a href=http://www.bjweixin.com>太原维信科技提供 </a> pub ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
Vue事件修饰符的总结
分为六点: 1.prevent 阻止默认行为(常用) 2.stop 阻止事件冒泡(常用) 3.once 事件值触发一次(常用) ...
vue 事件修饰符与按键修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是: ...

vue-事件修饰符-详解（.prevent .stop .once .capture .self）

vue-事件修饰符-详解（.prevent .stop .once .capture .self）相关推荐

最新文章

热门文章