从零开始的VUE.js学习（三）

修饰符的使用

v-on .stop

此修饰符阻止外层事件触发，比如下面代码

<div id="app">
    <div @click="DivHandler">
        <div class="inner" @click.stop="divHandler">
            <input type="button" value="戳他" @click="btnHandler">
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'wdnmd'
        },
        methods:{
            divHandler:function () {
                console.log("2")
            },
            btnHandler:function () {
                console.log('3')
            },
            DivHandler:function () {
                console.log("1")
            }
        }
    })
</script>

一共三层，当你在输出三的那层加入.stop修饰符，那么1,2两层的事件不会触发，若在第二层加入.stop修饰符，第一层的不会触发，添加方法为@click.stop。

v-on .prevent

用于阻止默认行为,如果再加上.self，在上一层元素中使用会阻止他的事件响应，如果是.self.prevent,在无默认行为的元素中使用不会阻止之前的默认行为，只会阻止自己绑定的事件的响应，如下图代码，当a标签被点击时alert2不会响应，console输出chufa和1页面不跳转，若是.self.prevent，输出chufa，1页面跳转。

<div @click="alert1">
    <div @click.prevent.self="alert2">

        <a href="https://www.baidu.com/" @click="linkClick">有问题百度</a>
    </div>
</div>

alert1:function () {
    console.log('1')
},
alert2:function () {
    console.log('2')
},
linkClick:function () {
  console.log('chufa')
},

v-on .capture

实现捕获触发事件，当触发多个事件时，谁有这个修饰符就先触发谁

v-on .self

实现只有点击当前元素时候才会触发事件处理函数

v-on .once

使用once使事件处理函数只触发一次