1. 事件修饰符

在事件处理函数中,我们可能需要经常处理诸如阻止默认事event.preventDefault()或阻止事件冒泡event.stopPropagation() 等事情, 虽然实现起来很轻松, 但是最好的方式就是方法只用来处理纯粹的数据逻辑, 而不是去处理了DOM事件细节

为了解决这个问题，Vue.js 为 v-on 事件绑定指令提供了事件修饰符。

1.1. 修饰符的理解

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

例如:

<div id="app">    <form action="/wuwei" @submit.prevent="handleSubmit">        <input type="submit" value="提交"/>    </form></div><script>       const vm = new Vue({        el: "#app",        data: {            msg: "hello"        },        methods: {            handleSubmit(){                console.log("submit")            }        }    })</script>

默认情况下当你点击submit按钮时,页面就会发生跳转, 当我们添加了修饰符.prevent, 就会阻止默认的跳转页面的行为

那接下来就让我们看看都有哪些事件修饰符吧

1.2. 事件修饰符1.2.1. 阻止事件传播

使用修饰符.stop,阻止事件的传播

<div @click.stop="handleClickWrap">grandson</div>

示例:

<div id="app">    <div          class="box"         @click="handleClickBox"         >        <div              class="wrap"             @click.stop="handleClickWrap"             ></div>    </div></div><script>       const vm = new Vue({        el: "#app",        data: {            msg: "hello"        },        methods: {            handleClickBox(){                console.log("box")            },            handleClickWrap(){                console.log("wrap")            }        }    })</script>

1.2.2. 将事件绑定在捕获阶段

默认的事件是绑定在冒泡阶段的,

但是我们通过修饰符将事件绑定在捕获阶段

使用修饰符.capture(捕获)

<div @click.capture="handleClickBox">parent</div>

示例:

<div id="app">    <div          class="box"         @click.capture="handleClickBox"         >        <div              class="wrap"             @click="handleClickWrap"             ></div>    </div></div>

如果将box的事件绑定在了捕获阶段,那么这里就会先执行box的事件在执行wrap的事件

阻止事件传播与事件捕获组合使用

<div @click.capture.stop="parent">parent</div>

示例:

<div id="app">    <div          class="box"         @click.capture.stop="handleClickBox"         >        <div              class="wrap"             @click="handleClickWrap"             ></div>    </div></div>

这里事件将永远无法传递到wrap事件上, wrap的事件函数将永远不能执行, 因为每次点击wrap触发的事件流到box 就被stop终止了

1.2.3.阻止默认事件

使用修饰符 .prevent

<a href="; @click.prevent='child'>百度</a>

1.2.4. 事件只触发一次

事件只会在第一次点击时触发,之后再点击将不再触发这个事件

使用修饰符 .once

<div @click.once="handleChild">child</div>

1.2.5. 当事件发生在事件源身上的时候在触发

只用当事件发生在元素自己身上时才触发,

使用修饰符.self

<div @click.self="child">child</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

2. 表单修饰符

除了事件除了有修饰符, Vue还给其他的指令提供了一些修饰符帮我们很好的处理一些问题.

那么我们就先来看看表单修饰符

2.1 lazy修饰符

使用了这个修饰符将会从“input事件”变成change事件进行同步

说白了change就是当你表单失去焦点时或者手动的点击enter键时触发,

input就是内容一变马上触发

<div id="app">    <input type="text" v-model.lazy="message">    <p>{{ message }}</p></div><script>new Vue({   el:"#app",   data:{     message:""   }})</script>

2.2 number修饰符

首先要明这个number并不是限制用户的输入,而是将用户输入的数据尝试绑定为 js 中的 number 类型

举个例子，如果用户输入300，data 中绑定的其实是'300'(string)，

添加 number 指令后可以得到 300(number)的绑定结果。

而如果用户输入的不是数字，这个指令并不会产生任何效果。

<div id="app">    <div>        未使用number修饰符num1        <input type="text" v-model="num1">    </div>    <div>        使用number修饰符num2        <input type="text" v-model.number="num2">    </div></div><script>    new Vue({        el:"#app",        data:{            num1:'',            num2:''        }    })</script>

通过示例我们发现, 同样是输入数字,未使用修饰符输入的表单得到的是字符串, 使用表单得到的是数字

注意:

如果你输入的不是数字而是字母, 就算你是用了表单number修饰符 也不会转为数字, 因为转不了,

2.3 trim 修饰符

可以用来过滤前后的空格

<div id="app">    <input type="text" v-model.trime="message">    <button @click="type">获取当前的类型</button></div><script>    new Vue({        el:"#app",        data:{            message:""        },        methods:{            type(){                console.log(this.message);            }        }    })</script>

通过上面的例子我们能发现,其实表单修饰符主要作用就是在我们通过表单收集数据的时候,对数据进行先期处理, 过滤掉不需要的空格

3. 按键修饰符

键盘修饰符主要修饰的是键盘事件

.ctrl

.alt

.shift

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

通常按键修饰符也可以用键盘码来代替使用

示例:

 <!-- vue-app 是根容器  --><div id='vue-app'>    <h1> 键盘 Event </h1>    <label>姓名：</label>    <input type="text" @keyup="logName">    <label>年龄：</label>    <input type="text" @keyup="logAge">        <!-- 键盘修饰符 当点击enter时才会触发事件  -->    <input type="text" @keyup.enter="logAge">        <!-- 链式修饰符 当同时点击alt和enter时才会触发事件  -->    <input type="text" @keyup.alt.enter="logAge"></div><script>//实例化Vue对象new Vue({    el: "#vue-app"，    data:{        age: 30,        x:0,        y:0    }，    metholds:{        logName: function(){            consolog.log("你正在输入名字")        },        logAge: function(){            consolog.log("你正在输入年龄")        },    }})</script>   

4. 案例: todo 例子

<div id="app">    <!-- 注意这里没有按钮, 是通过keyup绑定事件, 并且只有enter才会触发事件函数add, 因为enter键的键值是13 -->    <input type="text" v-model="val" @keyup.13="add">    <ul>        <li v-for="(item,index) in arr">            {{item}}             <button @click="remove(index)">X</button>        </li>    </ul></div><script src="./node_modules/vue/dist/vue.js"></script><script>    var vm = new Vue({   // 根实例        el: '#app',        data: {            val: '',            arr: []        },        methods: {            add() {                // 将数据添加到数组中                this.arr.unshift(this.val);                // 数据清空                this.val = '';            },            remove(i) {                // 方法一:                // splice 会修改原数组                //this.list.splice(index,1)                                // 方法二                // filter方法不修改原数组, 所以要手动覆盖                this.arr = this.arr.filter((value, index) => {                    return index !== i;                })            }        }    })</script>