修饰符

修饰符是vue功能的拓展，是对vue事件或者系统操作等等进行功能的补充。

看下面的案例

 <div id="app">
        <div class="outer" @click="outer">
            <div class="center" @click="center">
                <div class="inner" @click="inner">

                </div>
            </div>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var vue= new Vue({
            el:"#app",
            methods: {
                outer(){
                    console.log("外层")
                },
                center(){
                    console.log("中间")

                },
                inner(){
                    console.log("内层")

                },
            }
        })
    </script>

在浏览器中我们点击绿色的方块，打开控制面板可以看到依次输出“内层，中间，外层”。

此时点击了inner，其实就相当于点击了center和outer，此时如果都绑定了事件监听，就势必都会被触发。

我们想要阻止这种事件冒泡，通过两种修饰符方法stop和self。

<1>stop修饰符

<div class="outer" @click="outer">
    <div class="center" @click="center">
        <div class="inner" @click.stop="inner"></div>
    </div>
</div>

 

 

 

 此时就回只弹出内层，阻止了时间冒泡，

stop修饰符的作用就是阻止事件的一个冒泡。

其作用类似原生JavaScript的event.stopPropagation()方法

inner(event) {
    event.stopPropagation();
    console.log("内层")
}

<2>self修饰符

我们看下面的案例

<div class="outer" @click.self="outer">
    <div class="center" @click.self="center">
        <div class="inner" @click.self="inner"></div>
    </div>
</div>

此时我们可以看到，点击谁，谁输出结果。

self修饰符的作用是只有点击元素本身的时候才能触发事件，不接受冒泡上来的事件，同时也不能阻止事件的冒泡。

此时我们再看

<div class="outer" @click="outer">
    <div class="center" @click.self="center">
        <div class="inner" @click.self="inner"></div>
    </div>
</div>

当我们点击绿色的一层是会输出内层和外层，点击蓝色的一层输出中间和外层，所以，self修饰实际是不能阻止事件向上冒泡的。

 

prevent修饰符

如果一个超级链接，既有链接，又有事件，此时点击超级链接后会发生什么

我们看下面的一个案例

  <div id="app">
        <a href="http://www.baidu.com" @click="alertDialog">百度</a>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var vue= new Vue({
            el:"#app",
            methods: {
                alertDialog(){
                    alert("百度")
                }
            }
        })
    </script>

此时我们点击可以看到先弹出对话框，在跳转到百度。

 

如果此时我们不需要跳转到百度，可以通过prevent修饰符进行阻止。此时只会弹出对话框，不会跳转到百度。

<a href="http://www.baidu.com" @click.prevent="alertDialog">点击跳转到百度</a>

prevent也有原生的事件方法

event.preventDefault();

 

 

capture修饰符

capture修饰符是对事件捕获的监听，vue的事件监听，默认都是获取冒泡阶段的，所以使用capture去监听捕获阶段的事件

<div class="outer" @click.capture="outer">
            <div class="center" @click.capture="center">
                <div class="inner" @click.capture="inner">

                </div>
            </div>
        </div>

我们会看到在浏览器中点击绿色盒子之后会先弹出“外层，中间，内层”

 

 

 

once修饰符

 

once修饰符的作用就是使事件只触发一次

我们看下面的一个案例

<div id="app">
        <p>{{a}}</p>
        <button @click.once="add">按我加1</button>
        
    </div>
    <script src="./js/vue.js"></script>
    <script>
        var vue= new Vue({
            el:"#app",
            data:{
                a:100
            },
            methods: {
                add(){
                    this.a++
                    console.log(this.a)
                }
            }
        })
    </script>

此时我们在浏览器中点击，发现智能点击一次，继续点击便不会加一，data中的数据也不会加一。