Vue事件修饰符

目录

Vue当中的事件修饰符目的：

事件冒泡：

事件修饰符：

1.stop:

2.prevent:

3.once:

4.capture:

5.self:

6.passive

键盘修饰

---

Vue当中的事件修饰符目的：

为了更纯粹的数据逻辑，vue提供了很多事件修饰符，来代替处理一些 DOM 事件细节。 主要是用来和事件连用，决定事件出发的条件或者用来阻止事件的触发机制

事件冒泡：

提到修饰符需要先介绍一下事件冒泡：

事件冒泡，当事件发生后，这个事件就要开始传播（从里到外或者从外到里）为什么要传播呢？. 因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。. 例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

什么意思呢，举个例子：

我设定大的div里有一个点击事件，按钮有一个点击事件，但是点击小的div也会触发div点击事件，点击div里的按钮会触发两个事件，这就是事件冒泡，修饰符就是为了避免事件冒泡的

 

代码：

<style>
#aa{width: 300px;height: 300px;background-color: red;}
#app {width: 600px;height: 600px;background-color: green;}
</style>
<div id="app" @click="divClick">
    <div id="aa" @click="aaClick">
        <button @click="btnClick">按钮</button>
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el : "#app",
        data:{},
        methods:{
            btnClick() {
                alert("button被点击了");
            },
            divClick() {
                alert("div被点击了");
            },
            aaClick() {
                alert("aa被点击了");
            }
        }
     });
</script>

事件修饰符：

怎么应用呢，就是在@click后面直接.修饰符就行:

<button @click.stop=""></button>

用的是上方的样式，下面就只写html和输出结果了：

1.stop:

    <div id="app" @click="divClick">
        <div id="aa" @click="aaClick">
            <button @click.stop="btnClick">按钮</button>
        </div>
    </div>

这样点击按钮不会触发aaClick和divClick

2.prevent:

<a href="https://www.baidu.com" @click.prevent="aClick">百度一下</a>

某些标签像a标签，他本身是拥有默认事件的，这些事件虽然是冒泡之后开始的，但是不会因为stop而停止，阻止类似于这种本身拥有默认事件的标签，就需要prevent来阻止标签的默认事件

3.once:

    <div id="app" @click="divClick">
        <div id="aa" @click="aaClick">
            <button @click.once="btnClick">按钮</button>
        </div>
    </div>

 加上once修饰符之后事件只触发一次，但是once不影响事件的冒泡，上层事件仍然会触发，并且加上once的事件prevent会失效，页面刷新之后次数会被重置

连续点击的结果就是除了第一次会三个弹窗都出来，剩下的都只会出现除了按钮的另外两个弹窗

4.capture:

    <div id="app" @click="divClick">
        <div id="aa" @click.capture="aaClick">
            <button @click="btnClick">按钮</button>
        </div>
    </div>

加上.capture修饰符的时候会先触发事件

点击按钮结果就是：先执行aaClick之后执行btnClick最后执行divClick

5.self:

    <div id="app" @click="divClick">
        <div id="aa" @click.self="aaClick">
            <button @click="btnClick">按钮</button>
        </div>
    </div>

只有自身才能触发

点击按钮结果就是：执行btnClick和divClick，跳过aaClick;

点击中间层aa结果：执行aaClick和divClick，他也不影响事件冒泡

6.passive

.passive是2.3.0 新增的修饰符，是用来告诉浏览器你不想阻止事件的默认行为。

为什么需要告诉浏览器不阻止事件的默认行为？
简单来说，每次事件产生，浏览器都会去查询是否由preventDefault()阻止该次事件的默认动作。我们加上.passive是为了告诉浏览器，不用查询了，我们没有阻止。

所以说，.passive修饰符就是为了提升移动端的性能。在滚动监听，@scoll,@touchmove时，每次使用内核线程查询prevent会使滑动卡顿，使用.passive修饰符跳过内核线程查询，可以大大的提高流畅度。

键盘修饰

顾名思义：就是通过键盘操作事件

用法和事件修饰符一样，举一个小栗子：

        <div id="app" @keyup.enter="valid">
            <input type="text" v-model="input">
            <input type="button" value="提交" @click="valid">
        </div>
        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({    
                el: "#app",
                data: {
                    input : "",
                },
                methods: {
                    valid() {
                        if(this.input == ""){
                            alert("用户名不能为空");
                        }
                },
            });
 
        </script>

 这样就可以通过回车来进行操作了

都有哪些键盘修饰符呢：

• .enter---------回车
• .tab------------tab键
• .delete--------包含delete和backspace和小键盘关闭的小键盘的.
• .esc------------返回键
• .space---------空格键
• .up--------------向上键
• .down----------向下键
• .left--------------向左键
• .right------------向右键