指令修饰符

vue2
957 词
指令修饰符

指令修饰符#

通过 "." 指明一些指令 后缀 ，不同 后缀 封装了不同的处理操作--简化代码

  1. 按键修饰符

    @keyup.enter --键盘回车监听

  2. v-model修饰符

    v-model.trim --去除首尾空格

    v-model.number --转数字

  3. 事件修饰符

    @事件名.stop--阻止冒泡

    @事件名.prevent--阻止默认行为

按键修饰符#

@keyup.enter 键盘回车监听

以案例-小黑记事本为例

为表单元素绑定 keyup.enter 事件，即可实现回车添加功能 

<input placeholder="请输入任务" class="new-todo" v-model=input"todoName" v-on:keyup.enter="add" />

再来做另一个实验，看看去掉 enter 会发生什么

@keyup--监听键盘事件

在表单按下键盘，除了enter的其他键也会触发keyup事件

.enter 相当于封装了判断按键是否为enter的逻辑

v-model修饰符#

.trim/.number#


添加.trim/.number之前

添加.trim/.number之后

可见姓名表单在添加 .trim 之后，将表单值进行了首尾空格处理，表单在失焦之后也会按数据更新视图，去除输入的首尾空格

而年龄表单在添加 .number 修饰符之前存入data的数据是字符串型数据，在添加之后会存入正确的数值型 

<label for="uname">姓名：</label>
<input v-model.trim="uname" type="text" id="uname" />
<br />
<label for="age">年龄：</label>
<input v-model.number="age" type="number" id="age" />

事件修饰符#

@事件名.stop--阻止冒泡

father
son

@事件名.prevent--阻止默认行为

百度一下

按事件冒泡来看，点击了son会触发son绑定的点击事件，但同时也会触发father的点击事件

在添加 .stop 修饰符后即可阻止冒泡，相当于在回调函数中添加 e.stopPropagation()

阻止默认行为，添加 .prevent 修饰符即可，相当于 e.preventDefault() 

<div @click="fa" class="father">
    father
    <div @click.stop="so" class="son">son</div>
</div>
<a @click.prevent href="https://www.baidu.com" target="_blank">百度一下</a>
// 事件修饰符
const event = new Vue({
    el: '#event',
    methods: {
        fa() {
            alert('点击了father');
        },
        so() {
            alert('点击了son');
        },
    },
});