第十一节:Vue事件/表单/按键的修饰符

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="http://www.baidu.com" @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修饰符.png

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

注意:

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

表单修饰符.png

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>