предисловие
Вы когда-нибудь сталкивались с таким кодом при написании кода?
Настоящим Сяо Лин отправился изучать его, на самом деле это Вью.修饰符.同时它也是Vue的重要组成成分之一，利用好修饰符可以大大地提高Развивая эффективность, вы также можете减少Много ненужного кода. Далее я разберу 14 модификаторов Vue, которые обычно используются в разработке.
1.lazy
Как подсказывает название,lazyФункция модификатора заключается в том, что связанное lazyValue не изменится при изменении значения поля ввода.Когда курсор покидает поле ввода,v-modelПривязанное значение lazyValue будет только меняться.
<!--html-->
<input type="text" v-model.lazy="lazyValue">
<div>{{lazyValue}}</div>
<!--data-->
data() {
return {
lazyValue:"100"
}
}
2.trim
trimРоль модификатора заключается в том, чтобы поместить начало и конец значения, связанного v-моделью.空格удалять. В реальной разработке мы обычно используем его для модификации содержимого окна поиска.过滤Исключите ситуацию, когда пользователь не может найти контент из-за пробела до и после пользовательского ввода.
<input type="text" v-model.trim="trimValue">
<div>{{trimValue}}</div>
data() {
return {
trimValue:"100"
}
},
3.number
numberРоль модификатора заключается в преобразовании значения в число, но есть два случая: сначала ввести строку, а затем ввести число.
Если вы вводите число первым, берется только часть предыдущего числа.
Если сначала ввести буквы,
numberНедопустимый модификатор
Конечно, вы также можетеtype='number'для достижения этой функции.
Конечно, это столкнется с проблемой.Например, когда нам обычно нужно ввести цену, которая контролирует два десятичных знака, возникнет проблема (цена не может быть отрицательной и должна сохранять только два десятичных знака). Сяолин обычно использует следующие методы для достижения:
<!--允许输入小数(两位小数)-->
<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" >
4.stop
stopДействие модификатора заключается в предотвращении事件冒泡.
<div class="out-box" @click="clickEvent(2)" >
触发输出2
<div class="in-box" @click.stop="clickEvent(1)">触发输出1</div>
</div>
methods: {
// 点击事件
clickEvent(num){
console.log('出发输出:'+num);
}
},
5.capture
По умолчанию всплывающая подсказка событий всплывает изнутри наружу.captureМодификаторы работают в обратном порядке, захватывая снаружи внутрь.
<div class="out-box" @click.capture="clickEvent(2)" >
触发输出2
<div class="in-box" @click="clickEvent(1)">触发输出1</div>
</div>
Как вы можете видеть из результатов, всплывающее всплывающее окно события click внутри div полностью изменено. Сначала вывод 2, затем вывод 1.
6.self
Эффект самоможенного модификатора заключается в том, что только сам связывание события Click будет вызвать событие.
<div class="out-box" @click.self="clickEvent(2)" >
触发输出2
<div class="in-box" @click="clickEvent(1)">触发输出1</div>
</div>
Видно, что срабатывает только 2, а 1 не срабатывает.
7.once
onceЭффект модификатора заключается в том, что событие выполняется только один раз.
<div class="out-box" @click="clickEvent(2)" >
触发输出2
<div class="in-box" @click.once="clickEvent(1)">触发输出1</div>
</div>
Как видно из демо, привязкаonceDiv не будет срабатывать снова после запуска события (но все еще всплывает событие).
8.prevent
preventЧто делает модификатор, так это предотвращает события по умолчанию (например, переход метки)
<a href="http://www.w3school.com.cn" @click.prevent="clickEvent(1)">点击A标签</a>
Как видите, тег a нажат, а собственное событие перехода не запускается.
9.native
nativeМодификатор добавляется к событию пользовательского компонента, чтобы гарантировать, что событие может быть выполнено.
<!--子组件要是没有emit click事件 就执行不了-->
<Child @click="clickEvent(1)"></Child>
<!--可以执行-->
<Child @click.native="clickEvent(1)"></Child>
можно увидеть неиспользованныйnativeИ компонент, у которого нет события отправки щелчка, не вызывает событие.
10.слева, справа, посередине
.left,.right,.middleЭти три модификатора являются событиями, запускаемыми левой, средней и правой кнопками мыши.
<div class="out-box" @click.left="clickEvent('left')" @click.middle="clickEvent('middle')" @click.right="clickEvent('right')">鼠标各键触发</div>
11.sync
Когда родительский компонент передает значение дочернему компоненту, а дочерний компонент хочет изменить это значение (обычно прямая модификация сообщает об ошибке), вы можете сделать это.
<Child :childValue="trimValue" @changeChildValue="value=>trimValue = value"></Child>
<!--child-->
methods: {
changeChildValue(){
this.$emit('update:childValue', '子修改过的值')
}
},
Эта ситуация более распространена, и метод резки более сложен. Итак, мы рисуем .sync.
<!--父组件-->
<Child :childValue.sync="trimValue" ></Child>
<!--子组件-->
methods: {
changeChildValue(){
this.$emit('update:childValue', '子修改过的值')
}
},
12.keyCode
Модификация .keyCode в основном используется для запуска событий с ключами. Чаще всего в проекте используется возврат каретки для запуска функции поиска.
<p>.keyCode</p>
<input type="text" @keyup[keyCode]="clickEvent('keyCode')">
keyCode, предоставленный Vue:
//普通键
.enter
.tab
.delete //(捕获“删除”和“退格”键)
.space
.esc
.up
.down
.left
.right
//系统修饰键
.ctrl
.alt
.meta
.shift
Это также может быть вызвано кодом ключа, конкретным кодом ключа:
Псевдонимы модификаторов клавиш можно настроить с помощью глобального объекта config.keyCodes:
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
13.passive
Модификатор .passive в основном используется для добавления модификатора, подобного .lazy, к событию onscroll. На стороне ПК нет проблем, но на мобильной стороне наши веб-страницы будут зависать. Так что мы собираемся использовать это.
<div @scroll.passive="onScroll">...</div>
14.camel
Поскольку функции HTML нечувствительны к регистру, модификатор .camel позволяет использовать имена атрибутов v-bind в верблюжьем регистре при использовании шаблонов DOM, таких как атрибут SVG viewBox: он фактически будет отображаться как
<svg viewbox="viewbox"></svg>
Это приведет к сбою рендеринга, потому что тег SVG распознает только viewBox, а не то, что такое viewbox.
<!--加了canmel viewBox才会被识别成viewBox-->
<svg :viewBox.camel="viewBox"></svg>
вопрос
В: Можно ли использовать два модификатора, например click.self.stop?
О: Да
<div class="out-box" @click.stop.prevent="clickEvent(2)" ></div>
может вызвать.stop,.preventдва модификатора.
Эпилог
Эта статья относится к статье брата Сансиня:
13 модификаторов Vue, которые любят задавать интервьюеры
И добавьте собственное понимание и практическую работу.
адрес проекта:GitHub.com/fire небольшой PA…