[TOC]
модификатор формы
Наиболее часто используемая инструкция двусторонней привязки ввода v-модели реализует отображение привязки ввода и вывода в реальном времени.
<div>
<input type="text" v-model="value">
<p>{{value}}</p>
</div>
.lazy курсор оставить обновление
Но иногда мы хотим обновить представление после того, как закончим набирать курсор и уйдем, что эквивалентно запуску обновления в событии onchange.
<div>
<input type="text" v-model.lazy="value">
<p>{{value}}</p>
</div>
.trim отфильтровать начальные и конечные пробелы
Только начальные и конечные пробелы могут быть отфильтрованы! Во-первых и последнее, середина не будет фильтроваться
<input type="text" v-model.trim="value">
.number
Если вы сначала вводите числа, это ограничивает вас только числами. Если вы сначала вводите строку, это эквивалентно тому, что вы не добавляете .numberВместо единого ограничения на ввод чисел или преобразование ввода в числа
модификатор события
.stop останавливает всплытие события
Из-за механизма всплытия событий, когда мы привязываем событие щелчка к элементу, оно также вызывает событие щелчка родителя; Блокировка всплывающих событий одним щелчком мыши эквивалентна вызову метода event.stopPropagation().
<div @click="shout(2)">
<button @click="shout(1)">ok</button>
</div>
//js
shout(e){
console.log(e)
}
//1
//2
<div @click="shout(2)">
<button @click.stop="shout(1)">ok</button>
</div>
//只输出1
.prevent предотвращает поведение события по умолчанию
Поведение по умолчанию для блокировки событий, например, блокирование отправки формы при нажатии кнопки отправки. Эквивалентно вызову метода event.preventDefault().
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
Примечание. Одновременно можно использовать несколько модификаторов, но порядок может различаться.
- Использование V-On: click.prevent. self предотвратит все клики, а V-On: Щелкните. Sev.prevent только предотвратит щелчки на самом элементе.
- Не используйте .passive с .prevent, потому что .prevent будет проигнорирован и браузер может показать вам предупреждение. Помните, что .passive сообщает браузеру, что вы не хотите блокировать поведение событий по умолчанию.То есть судить слева направо~
.self срабатывает при нажатии на сам элемент
Обратный вызов запускается только в том случае, если событие было запущено из самого элемента, к которому оно было привязано. Как показано ниже, только что мы знаем из .stop, что дочерний элемент будет всплывать к родительскому элементу, вызывая запуск события щелчка родительского элемента.Когда мы добавляем этот .self, мы нажимаем кнопку и не запускаем Событие click родительского элемента Shout, Только когда щелкнут родительский элемент (синий фон), он будет кричать~ Из английского перевода this self означает «сам, сам», вы можете увидеть использование этого модификатора
<div class="blue" @click.self="shout(2)">
<button @click="shout(1)">ok</button>
</div>
.once срабатывает только один раз
После того, как этот модификатор привязан к событию, он может сработать только один раз и не сработает во второй раз.
<button @click.once="shout(1)">ok</button>
.capture захват срабатывает вниз
Полный механизм событий таков: фаза захвата — фаза цели — фаза всплытия.
По умолчанию триггер события всплывает от цели. Когда этот .capture добавляется, он переворачивается, и запуск события начинается с верхнего уровня, содержащего этот элемент, и запускается вниз.
<div @click.capture="shout(1)">
obj1
<div @click.capture="shout(2)">
obj2
<div @click="shout(3)">
obj3
<div @click="shout(4)">
obj4
</div>
</div>
</div>
</div>
// 1 2 4 3
В приведенном выше примере, когда мы нажимаем на obj4, мы ясно видим разницу. obj1 и obj2 запускают события в фазе захвата, поэтому 1 и 2 сначала сопровождаются obj3, а obj4 запускается фазой всплытия по умолчанию, поэтому это сначала 4, а затем пузыри до 3~
.пассивная задержка события прокрутки
Когда мы прослушиваем события прокрутки элемента, всегда будет запускаться событие onscroll, что хорошо на стороне ПК, но на мобильной стороне это приведет к зависанию нашей веб-страницы, поэтому, когда мы используем этот модификатор, он эквивалентен предоставление Событие onscroll имеет модификатор .lazy
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
.native преобразуется в нативные события
Мы часто пишем много виджетов, и некоторые виджеты могут связывать некоторые события, но такие события связывания, как следующие, не будут запускаться. Вы должны использовать .native для изменения этого события клика (то есть можно понять, что функция этого модификатора заключается в преобразовании компонента vue в обычный HTML-тег)Примечание. Использование модификатора .native для управления обычными тегами HTML сделает событие недействительным.
модификатор кнопки мыши
Мы только что говорили об этом событии щелчка. Обычно мы запускаем его левой кнопкой. Иногда нам нужно изменить контекстное меню или что-то в этом роде, и нам нужно использовать правый или средний щелчок. В настоящее время нам нужно использовать модификатор кнопки мыши.
.левый левый щелчок
.правый щелчок
.средний средний щелчок
<button @click.right="shout(1)">ok</button>
модификатор ключ-значение
По сути, это тоже своего рода модификатор событий, потому что он используется для модификации событий клавиатуры, таких как onkeyup, onkeydown и т. д.
.keyCode
Если модификатор keyCode не используется, то мы будем запускать крик каждый раз, когда нажимаем на клавиатуру. Этот модификатор полезен, когда мы хотим указать, что крик запускается нажатием определенной клавиши. Конкретный код клавиши см. код соответствующей таблицы https://zhidao.baidu.com/question/266291349.html
<input type="text" @keyup.keyCode="shout(4)">
Для удобства использования,Vue предоставляет псевдонимы для некоторых часто используемых клавиш.
обычный ключ
.войти .tab .delete //(捕获“删除”和“退格”键) .пространство .esc .вверх .вниз .осталось .правильно
Ключ модификации системы
.ctrl
.alt
.meta
.shift
Псевдонимы модификаторов клавиш можно настроить с помощью глобального объекта config.keyCodes:// можно использоватьv-on:keyup.f1vue.config.keyCodes.f1 = 112
Из вышеизложенного видно, что клавиши делятся на общие и системные клавиши-модификаторы, в чем разница?
Когда мы напишем следующий код, мы обнаружим, что событие keyup не может быть запущено, если используются только системные клавиши-модификаторы.<input type="text" @keyup.ctrl="shout(4)">Так как? Нам нужно связать клавиши модификатора системы с другими кодами клавиш, такими как<input type="text" @keyup.ctrl.67="shout(4)">Таким образом, когда мы одновременно нажмем ctrl+c, будет запущено событие keyup.
Кроме того, если это событие мыши, вы можете использовать системный модификатор отдельно.
<button @mouseover.ctrl="shout(1)">ok</button>
<button @mousedown.ctrl="shout(1)">ok</button>
<button @click.ctrl.67="shout(1)">ok</button>
который:Модификаторы, которые нельзя использовать одним пальцем на системных клавишах-модификаторах (минимум два пальца, возможно более одного). Вы можете реализовать события клавиатуры, удерживая клавишу модификатора системы одним пальцем и удерживая другую клавишу одним пальцем. События мыши также можно реализовать, удерживая системную клавишу-модификатор одним пальцем и мышь другой рукой.
.exact
Мы упоминали эту системную клавишу-модификатор выше.Когда мы привязываем событие нажатия клавиши щелчка таким образом, удивительно, что мы можем одновременно нажимать несколько системных клавиш-модификаторов, таких как щелчок ctrl-shift, который также может быть вызван. некоторые сценарии, в которых нам это нужно или может быть запущено только нажатием клавиши модификатора системы (например, при создании некоторых сочетаний клавиш), и его нельзя запустить, когда мы нажимаем Ctrl и другие клавиши. Тогда пишите так.
Примечание: Это ограничено только системными клавишами-модификаторами.После написания следующего, вы все еще можете нажимать клавиши ctrl+c, ctrl+v или ctrl+normal для срабатывания, но вы не можете нажимать ctrl+shift+normal для срабатывания.<button type="text" @click.ctrl.exact="shout(4)">ok</button>Затем следующий может быть запущен одновременным нажатием клавиши ввода + обычная клавиша, но не нажатием клавиши модификатора системы + ввода. Я думаю, ты уже понимаешь 8~<input type="text" @keydown.enter.exact="shout('我被触发了')">
модификатор v-bind
.sync (новое в версии 2.3.0+)
В некоторых случаях нам может понадобиться «двусторонняя привязка, односторонняя модификация» для реквизита. К сожалению, настоящая двусторонняя привязка создает проблемы сопровождения, поскольку дочерние компоненты не могут напрямую изменять родительский компонент, а очевидный источник изменений как в родительском, так и в дочернем компонентах отсутствует. Раньше была обычная практика
//父亲组件
<comp :myMessage="bar" @update:myMessage="func"></comp>
//js
func(e){
this.bar = e;
}
//子组件js
func2(){
this.$emit('update:myMessage',params);
}
Теперь этот модификатор .sync упрощает вышеуказанные шаги.
//父组件
<comp :myMessage.sync="bar"></comp>
//子组件
this.$emit('update:myMessage',params);
Это действительно намного удобнее, но есть и многоПункты к сведению
1. При использовании синхронизации имя события, передаваемое подкомпонентом, должно быть update:value, где значение должно быть точно таким же, как имя, объявленное в реквизитах в подкомпоненте (например, myMessage в приведенном выше примере, my-message не может использоваться) 2. Обратите внимание, что v-bind с модификатором .sync нельзя использовать с выражениями (например, v-bind:title.sync=”doc.title + ‘!’” недействителен). Вместо этого вы можете указать только имя свойства, которое хотите связать, аналогично v-model. 3. Использование v-bind.sync для буквального объекта, например, v-bind.sync="{ title: doc.title }", не будет работать, потому что при разборе такого сложного выражения иногда возникает много крайние случаи для рассмотрения.
.prop
Свойство: Свойство объекта узла, хранящееся в памяти, к которому можно получить доступ и установить.
Атрибут: Один из атрибутов объекта узла (свойства), значением является объект.
точка-точкаdocument.getElementById('xx').attributes 或者 document.getElementById('xx').getAttributes('xx') 读取，通过 document.getElementById('xx').setAttribute('xx',value)Дополнения и модификации.
Все атрибуты, определенные в тегах, включая HTML-атрибуты и пользовательские атрибуты, существуют в виде пар ключ-значение в объекте атрибутов.
На самом деле слова «атрибут» и «свойство» при переводе являются атрибутами, но «Расширенное программирование на JavaScript» переводит их в функции и атрибуты, чтобы различать их.
//这里的id,value,style都属于property
//index属于attribute
//id、title等既是属性，也是特性。修改属性，其对应的特性会发生改变；修改特性，属性也会改变
<input id="uid" title="title1" value="1" :index="index">
//input.index === undefined
//input.attributes.index === this.index
Из приведенного выше видно, что если v-bind используется напрямую, то по умолчанию он будет привязан к атрибуту узла dom. Чтобы хранить переменные с помощью настраиваемых атрибутов, избегайте раскрытия данных и предотвращения загрязнения структуры HTML.
<input id="uid" title="title1" value="1" :index.prop="index">
//input.index === this.index
//input.attributes.index === undefined
.camel Свойства отображения CamelCase
Благодаря функциям HTML он нечувствителен к регистру.<svg :viewBox="viewBox"></svg>на самом деле будет отображаться как<svg viewbox="viewBox"></svg>Это приведет к сбою рендеринга, потому что тег SVG распознает только viewBox, а не то, что такое viewbox.
Если мы используем модификатор .camel, он будет отображаться как camelCase.
Кроме того, если вы используете строковые шаблоны, эти ограничения не применяются.
new Vue({
template: '<svg :viewBox="viewBox"></svg>'
})
Спасибо оригинальному автору за то, что поделился Справочная статья: Ли Далейсегмент fault.com/ah/119000001…