夜光带你走进Vue.js（二十）擅长的领域

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102455890

本文深入探讨Vue.js中事件修饰符的使用方法，包括.stop、.prevent、.capture、.self和.once，以及如何利用按键修饰符监听特定键盘事件，如.enter、.tab和.esc等。

摘要由CSDN通过智能技术生成

夜光序言：

起风了，天是实，地为虚，一支画笔撬象。起风了，天为虚，地是实，一支心笔攀登。起风了，思也迈，想也动，天地成海任意游。起风了，情也敲，眸也翻，天地成书随境有。

正文：

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

.stop
.prevent
.capture
.self
.once

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

嗯唔~~
那个 → 记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>夜光</title>
</head>

<body>

<div id="app">
    <input type="button"
           value="单击后增加"
           @click="m +=1"
    >

    <input type="button"
           value="绑定函数的按钮"
           @click="add"
    >

    <input type="button"
           value="绑定可传值函数的按钮"
           @click="add2(3,4)"
    >

    <div>嗯唔：这个按钮被点击了 {{ m }} </div>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            m:0
        },

        methods:{
            add:function(e){
                e.stopPropagation();
                this.m +=2;
            },

            add2:function(m,n){
                this.m=m+n;
            }
        }

    })
</script>
</body>
</html>