事件监听

v-on

　　使用v-on进行事件绑定监听，回调函数写在methods中。可以使用@的这种简写形式来代替v-on，当事件源无参数传递时，可省略括号。

　　语法如下所示：

<button @:事件=回调函数(参数)>点我</button>

　　下面是一个小的示例：

<body>

<div id="app">
    <button @click="func">点我</button>
</div>

<script src="./vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",methods: {
            func() {
                console.log("点击事件发生了");
            }
        }
    })
</script>
</body>

$event

　　事件源传入形参$event，则是当前事件对象。

<body>

<div id="app">
    <button @click="func($event)">点我</button>
</div>

<script src="./vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",methods: {
            func(ev) {
                console.log(ev);
            }
        }
    })
</script>
</body>

修饰符

.once

　　使用.once修饰符后，该事件只会监听一次。当执行完这一次动作后将取消监听。

<div id="app">
    <button @click.once="func">点我</button>
</div>

<script src="./vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",methods: {
            func() {
                console.log("只执行一次");
            }
        }
    })
</script>
</body>

.prevent

　　使用.prevent修饰符来阻止默认事件的发生：

<body>

<div id="app">
    <a href="http://www.google.com/" @click.prevent="func">点我</a>
</div>

<script src="./vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",methods: {
            func() {
                console.log("不执行默认事件");
            }
        }
    })
</script>
</body>

.stop

　　使用.stop修饰符阻止事件冒泡。

<style>
    .f {
        width: 100px;
        height: 100px;
        background-color: red;
        text-align: center;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .s {
        width: 50px;
        height: 50px;
        background: blue;
        text-align: center;
        color: white;
    }
</style>

<body>

<div id="app">
    <section @click="father" class="f">
        <!-- 父亲事件不会触发 -->
        <article @click.stop="son" class="s"></article>
    </section>
</div>

<script src='./vue.js'></script>
<script>
    "use strict";
    const app = new Vue({
        el: "#app",data: {},methods: {
            son() {
                console.log("儿子事件触发");
            },father() {
                console.log("父亲事件触发")
            }
        },});
</script>
</body>

.self

　　使用.self修饰符，也可以防止冒泡。只有点击到自己时才触发，不会通过冒泡触发。

<style>
    .f {
        width: 100px;
        height: 100px;
        background-color: red;
        text-align: center;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .s {
        width: 50px;
        height: 50px;
        background: blue;
        text-align: center;
        color: white;
    }
</style>

<body>

<div id="app">
    <!-- 点儿子时父亲事件不会触发 -->
    <section @click.self="father" class="f">
        <article @click="son" class="s"></article>
    </section>
</div>

<script src='./vue.js'></script>
<script>
    "use strict";
    const app = new Vue({
        el: "#app",});
</script>
</body>

.capture

　　使用.capture，开启事件捕获。当子元素点击事件后，冒泡到父元素时，先执行完父元素监听事件的回调函数，再执行子元素监听事件的回调函数。

　　正常情况下是先执行子元素回调，再执行父元素回调

<style>
    .f {
        width: 100px;
        height: 100px;
        background-color: red;
        text-align: center;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .s {
        width: 50px;
        height: 50px;
        background: blue;
        text-align: center;
        color: white;
    }
</style>
<body>

<div id="app">
    <section @click.capture="father" class="f">
        <article @click="son" class="s"></article>
    </section>
</div>

<script src='./vue.js'></script>
<script>
    "use strict";
    const app = new Vue({
        el: "#app",});
</script>
</body>

键盘修饰符

　　使用@事件.键位的形式，来监听用户按下的键盘键位。

　　当按下的键位与监听的键位相同，则执行监听回调函数。

　　如下示例，使用组合监听。当再输入框内按下ctrl与a键时将触发事件的回调函数。

<body>
    <div id="app">
        <input type="text" @keyup.ctrl.a="func">
    </div>
    <script src='./vue.js'></script>
    <script>
        "use strict";
        const app = new Vue({
            el: "#app",data: {
            },methods:{
                func(){
                    console.log("执行了");  
                },},});
    </script>
</body>

鼠标修饰符

　　使用@事件.按键的形式，来监听用户按下的鼠标按键。

　　当按下的按键与监听的键位相同，则执行监听回调函数。

　　如下所示，当用户在特定区域内按下右键后，阻止默认的右键弹出菜单事件，并执行事件的回调函数。

<body>
    <div id="app">
        <section @contextmenu.prevent="func" :style={width:"300px",height:"300px",backgroundColor:"red"}>
        </section>
    </div>
    <script src='./vue.js'></script>
    <script>
        "use strict";
        const app = new Vue({
            el: "#app",});
    </script>
</body>

修饰符连用

　　修饰符支持连用，如下所示：

<button @click.once.stop=func>点我</button>

　　意思非常明显，只执行一次，阻止默认事件。

Vue 事件监听