5. Vue事件

一、事件监听

可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript 代码或绑定事件处理方法。

1.1 在触发事件时执行JavaScript代码

<div id="app">
    <button v-on:click="count=count+1">单击按钮</button>
    <p>上述按钮被单击{{count}}次</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            count:0
        }
    });
</script>

1.2 绑定事件处理方法

<div id="app">
    <button v-on:click="addCount">单击按钮</button>
    <p>上述按钮被单击{{count}}次</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            count:0
        },
        methods:{
            addCount:function(event){//event是原生 DOM 事件
                this.count+=1;
                if (event) {
        			alert(event.target.tagName);
      			}
            }
        }
    });
</script>

1.3 内联处理器中的方法

除了直接绑定事件处理方法，也可以在内联JavaScript语句中调用方法。

<div id="app">
    <button @click="say('hi')">单击按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        methods:{
            say:function (msg) {
                console.log(msg);
            }
        }
    });
</script>

1.4 使用按键修饰符监听按键

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

二、事件修饰符

事件修饰符是自定义事件行为，配合v-on指令来使用，写在事件之后，用.符号连接。

修饰符	说明
.stop	阻止事件冒泡
.prevent	阻止默认事件行为
.capture	事件捕获
.self	将事件绑定到自身，只有自身才能触发
.once	事件只触发一次

2.1 .stop阻止事件冒泡

默认的事件传递方式是冒泡，所以同一事件类型会在元素内部和外部触发，有可能会造成事件的错误触发，所以需要.stop修饰符阻止事件冒泡。

<div id="app">
    <div @click="doParent">
        <div @click="doThis">事件冒泡</div>
        <div @click.stop="doThis">阻止事件冒泡</div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        methods:{
            doParent:function () {
                console.log('我是父元素单击事件');
            },
            doThis:function () {
                console.log('我是被单击元素事件');
            }
        }
    });
</script>

2.2 .prevent阻止默认事件行为

<div id="app">
    <a href="https://www.baidu.com" @click.prevent="doSub">阻止默认行为</a>
    <a href="https://www.baidu.com">不阻止默认行为</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        methods:{
            doSub:function () {
                console.log("阻止默认行为后，触发的事件");
            }
        }
    });
</script>

2.3 .capture事件捕获

事件捕获的执行顺序是由外部结构向内部结构执行，与事件冒泡的顺序相反。

<div id="app">
    <div v-on:click.capture="doParent">
        <button v-on:click="doThis">事件捕获</button>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        methods:{
            doParent:function () {
                console.log('我是父元素单击事件');
            },
            doThis:function () {
                console.log('我是被单击元素事件');
            }
        }
    });
</script>

2.4 .self自身触发

事件修饰符.self用来实现只有DOM元素本身会触发事件。

  <style>
        .Odiv1{
            width: 80px;height: 80px;background-color: #aaa;margin: 5px;
        }
        .Odiv2{
            width: 50px;height: 50px;background-color: #ccc;
        }
    </style>

<div id="app">
    <div class="Odiv1" @click.self="doParent">a
        <div class="Odiv2" @click="doThis">b</div>
    </div>

    <div class="Odiv1" @click="doParent">c
        <div class="Odiv2" @click.self="doThis">d</div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        methods:{
            doParent:function () {
                console.log('我是父元素单击事件');
            },
            doThis:function () {
                console.log('我是被单击元素事件');
            }
        }
    });
</script>

2.5 .once只触发一次

事件修饰符.once用于阻止事件多次触发，只触发一次。

<div id="app">
    <button @click.once="doThis">只执行一次</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        methods:{
            doThis:function () {
                console.log("我是当前元素的单击事件且执行一次");
            }
        }
    });
</script>

注意：事件修饰符的书写顺序很重要,v-on:click.prevent.self会阻止所有的单击的默认行为。而v-on:click.self.prevent会阻止元素本身的默认行为。