关于前端:百毒不侵面试官最喜欢问的13种Vue修饰符

前言

大家好，我是林三心，家喻户晓，修饰符 也是 Vue 的重要组成成分之一，利用好 修饰符 能够大大地进步开发的效率，接下来给大家介绍一下 面试官最喜爱问的 13 种 Vue 修饰符

1.lazy

lazy修饰符作用是，扭转输入框的值时 value 不会扭转，当光标来到输入框时，v-model绑定的值 value 才会扭转

<input type="text" v-model.lazy="value">
<div>{{value}}</div>

data() {
        return {value: '222'}
    }

2.trim

trim修饰符的作用相似于 JavaScript 中的 trim() 办法，作用是把 v-model 绑定的值的首尾空格给过滤掉。

<input type="text" v-model.trim="value">
<div>{{value}}</div>

data() {
        return {value: '222'}
    }

3.number

number修饰符的作用是将值转成数字，然而先输出字符串和先输出数字，是两种状况

<input type="text" v-model.number="value">
<div>{{value}}</div>

data() {
        return {value: '222'}
    }

先输出数字的话，只取后面数字局部

先输出字母的话，number修饰符有效

4.stop

stop修饰符的作用是阻止冒泡

<div @click="clickEvent(2)" style="width:300px;height:100px;background:red">
    <button @click.stop="clickEvent(1)"> 点击 </button>
</div>

methods: {clickEvent(num) {
            不加 stop 点击按钮输入 1 2
            加了 stop 点击按钮输入 1
            console.log(num)
        }
    }

5.capture

事件默认是由里往外 冒泡 ，capture 修饰符的作用是反过来，由外网内 捕捉

<div @click.capture="clickEvent(2)" style="width:300px;height:100px;background:red">
    <button @click="clickEvent(1)"> 点击 </button>
</div>

methods: {clickEvent(num) {
            不加 capture 点击按钮输入 1 2
            加了 capture 点击按钮输入 2 1
            console.log(num)
        }
    }

6.self

self修饰符作用是，只有点击事件绑定的自身才会触发事件

<div @click.self="clickEvent(2)" style="width:300px;height:100px;background:red">
    <button @click="clickEvent(1)"> 点击 </button>
</div>

methods: {clickEvent(num) {
            不加 self 点击按钮输入 1 2
            加了 self 点击按钮输入 1 点击 div 才会输入 2
            console.log(num)
        }
    }

7.once

once修饰符的作用是，事件只执行一次

<div @click.once="clickEvent(2)" style="width:300px;height:100px;background:red">
    <button @click="clickEvent(1)"> 点击 </button>
</div>

methods: {clickEvent(num) {
            不加 once 屡次点击按钮输入 1
            加了 once 屡次点击按钮只会输入一次 1 
            console.log(num)
        }
    }

8.prevent

prevent修饰符的作用是阻止默认事件（例如 a 标签的跳转）

<a href="#" @click.prevent="clickEvent(1)"> 点我 </a>

methods: {clickEvent(num) {
            不加 prevent 点击 a 标签 先跳转而后输入 1
            加了 prevent 点击 a 标签 不会跳转只会输入 1
            console.log(num)
        }
    }

9.native

native修饰符是加在自定义组件的事件上，保障事件能执行

执行不了
<My-component @click="shout(3)"></My-component>

能够执行
<My-component @click.native="shout(3)"></My-component>

10.left，right，middle

这三个修饰符是鼠标的左中右按键触发的事件

<button @click.middle="clickEvent(1)"  @click.left="clickEvent(2)"  @click.right="clickEvent(3)"> 点我 </button>

methods: {
        点击中键输入 1
        点击左键输入 2
        点击右键输入 3
        clickEvent(num) {console.log(num)
        }
    }

11.passive

当咱们在监听元素滚动事件的时候，会始终触发 onscroll 事件，在 pc 端是没啥问题的，然而在挪动端，会让咱们的网页变卡，因而咱们应用这个修饰符的时候，相当于给 onscroll 事件整了一个.lazy 修饰符

<div @scroll.passive="onScroll">...</div>

12.camel

不加 camel viewBox 会被辨认成 viewbox
<svg :viewBox="viewBox"></svg>

加了 canmel viewBox 才会被辨认成 viewBox
<svg :viewBox.camel="viewBox"></svg>

12.sync

当 父组件 传值进 子组件，子组件想要扭转这个值时，能够这么做

父组件里
<children :foo="bar" @update:foo="val => bar = val"></children>

子组件里
this.$emit('update:foo', newValue)

sync修饰符的作用就是，能够简写：

父组件里
<children :foo.sync="bar"></children>

子组件里
this.$emit('update:foo', newValue)

13.keyCode

当咱们这么写事件的时候，无论按什么按钮都会触发事件

<input type="text" @keyup="shout(4)">

那么想要限度成某个按键触发怎么办？这时候 keyCode 修饰符就派上用场了

<input type="text" @keyup.keyCode="shout(4)">

Vue 提供的 keyCode：

// 一般键
.enter 
.tab
.delete //(捕捉“删除”和“退格”键)
.space
.esc
.up
.down
.left
.right
// 零碎润饰键
.ctrl
.alt
.meta
.shift

例如（具体的键码请看键码对应表）

按 ctrl 才会触发
<input type="text" @keyup.ctrl="shout(4)">

也能够鼠标事件 + 按键
<input type="text" @mousedown.ctrl.="shout(4)">

能够多按键触发 例如 ctrl + 67
<input type="text" @keyup.ctrl.67="shout(4)">

结语

我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜爱前端，想学习前端，那咱们能够交朋友，一起摸鱼哈哈，摸鱼群，加我请备注【思否】