14 модификаторов Vue, которые любят задавать интервьюеры

интервью Vue.js
14 модификаторов Vue, которые любят задавать интервьюеры

«Эта статья участвовала в мероприятии Haowen Convocation Order, щелкните, чтобы просмотреть:Двойные заявки на внутреннюю и внешнюю стороны, призовой фонд в 20 000 юаней ждет вас, чтобы бросить вызов!"

предисловие

Всем привет, меня зовут Линь Сансин, как все знают,修饰符Это также один из важных компонентов Vue.修饰符Это может значительно повысить эффективность разработки.Далее я представлю вам面试官最喜欢问的13种Vue修饰符

image.png

1.lazy

lazyЭффект модификатора заключается в том, что значение не изменится при изменении значения поля ввода.Когда курсор покидает поле ввода,v-modelЗначение связанного значения изменится

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

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

lazy1.gif

2.trim

trimМодификаторы работают как в JavaScripttrim()метод, функция состоит в том, чтобыv-modelНачальные и конечные пробелы связанного значения отфильтровываются.

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

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

number.gif

3.number

numberРоль модификатора заключается в преобразовании значения в число, но есть две ситуации, в которых сначала вводится строка, а затем число.

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

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

Если вы вводите число первым, берется только часть предыдущего числа.

trim.gif

Если сначала ввести буквы,numberНедопустимый модификатор

number2.gif

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 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. левый, правый, средний

Эти три модификатора являются событиями, запускаемыми левой, средней и правой кнопками мыши.

<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, что хорошо на стороне ПК, но на мобильной стороне это приведет к зависанию нашей веб-страницы, поэтому, когда мы используем этот модификатор, он эквивалентен предоставление Событие onscroll имеет модификатор .lazy

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

12.camel

不加camel viewBox会被识别成viewbox
<svg :viewBox="viewBox"></svg>

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

13.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)

14.keyCode

Когда мы пишем событие таким образом, событие будет запускаться независимо от того, какая кнопка нажата.

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

Так что, если вы хотите ограничить его определенным ключевым триггером? В этот моментkeyCodeМодификаторы пригодны

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

keyCode, предоставленный Vue:

//普通键
.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)">

Эпилог

Моя колонка обновлена:

Если вы считаете, что эта статья вам немного поможет, поставьте лайк и поддержите Линь Сансиня, ха-ха. Или присоединяйтесь к моей группе, ха-ха, давайте ловить рыбу и учиться вместе: meron857287645

Категории