[Turn] vue modifier -- пожалуй, самый подробный документ в восточном полушарии (забавно)

Чтобы вам было проще писать код, vue.js предоставляет вам множество удобных модификаторов, таких как отмена всплытия, предотвращение событий по умолчанию и т. д., которые мы часто используем~

содержание

модификатор формы
модификатор события
модификаторы кнопок мыши
модификатор ключ-значение
модификатор v-bind (я правда не знаю, как он называется)

модификатор формы

Заполните форму, что чаще всего используется? Вход! v-model~ и наши модификаторы упрощают эти вещи.

.lazy

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

Отсюда мы можем видеть, что, когда мы все еще печатаем, когда курсор все еще там, появилось следующее значение, которое, можно сказать, происходит в реальном времени. Но иногда нам нужно обновить представление после того, как мы закончили вводить все и курсор ушел.

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

Вот и все~, так что только когда наш курсор покидает поле ввода, он обновляет представление, что эквивалентно запуску обновления в событии onchange.

.trim

В нашем поле ввода нам часто нужно фильтровать содержимое ввода некоторых братьев, которые случайно нажимают пробел после ввода пароля.

<input type="text" v-model.trim="value">

Для того, чтобы вам было понятнее, я изменил стиль, но это не большая проблема, я думаю, вы хорошо видели, что слева и справа от этого большого привета нет пробелов, даже несмотря на то, что вы нажали кнопку пробел в поле ввода.
Обратите внимание, что он может толькоФильтровать начальные и конечные пробелы! Во-первых и последнее, середина не будет фильтроваться

.number

Как вы можете видеть из названия, это должно быть ограничение ввода чисел или преобразование ввода в числа, но это не горячий заказ.

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

модификатор события

.stop

Благодаря механизму всплытия событий, когда мы привязываем событие щелчка к элементу, оно также вызывает событие щелчка родительского элемента.

<div @click="shout(2)">
  <button @click="shout(1)">ok</button>
</div>

//js
shout(e){
  console.log(e)
}
//1
//2

Остановка всплывающих событий одним щелчком мыши слишком удобна. Эквивалентно вызову метода event.stopPropagation().

<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:click.self.prevent предотвратит клики только на самом элементе.
то естьСудя слева направо

.self

Обратный вызов запускается только в том случае, если событие было запущено из самого элемента, к которому оно было привязано. Как показано ниже, только что мы знаем из .stop, что дочерний элемент будет всплывать к родительскому элементу, вызывая запуск события щелчка родительского элемента.Когда мы добавляем этот .self, мы нажимаем кнопку и не запускаем Событие click родительского элемента Shout, Только когда щелкнут родительский элемент (синий фон), он будет кричать~ Из английского перевода this self означает «сам, сам», вы можете увидеть использование этого модификатора

<div class="blue" @click.self="shout(2)">
  <button @click="shout(1)">ok</button>
</div>

.once

Использование этого модификатора такое же простое и грубое, как и название, его можно использовать только один раз, после привязки события он может сработать только один раз, второй раз он не сработает.

//键盘按坏都只能shout一次
<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~

.passive

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

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

.native

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

<My-component @click="shout(3)"></My-component>

Вы должны использовать .native для изменения этого события клика (т.е. ), что можно понимать как роль модификатора в преобразовании vue в обычный тег HTML,
Уведомление:Использование модификатора .native для управления обычными HTML-тегами сделает событие недействительным.

модификатор кнопки мыши

Мы только что говорили об этом событии щелчка. Обычно мы запускаем его левой кнопкой. Иногда нам нужно изменить контекстное меню или что-то в этом роде, и нам нужно использовать правый или средний щелчок. В настоящее время нам нужно использовать модификатор кнопки мыши.

.левый левый щелчок
.правый щелчок
.средний средний щелчок

<button @click.right="shout(1)">ok</button>

модификатор ключ-значение

По сути, это тоже своего рода модификатор событий, потому что он используется для модификации событий клавиатуры. Например, onkeyup, onkeydown

.keyCode

Если модификатор keyCode не используется, то каждый раз, когда мы нажимаем на клавиатуру, будет срабатывать крик. Когда мы хотим указать, что нажимается определенная клавиша, чтобы вызвать крик, этот модификатор полезен. Проверьте код конкретной клавиши.Таблица соответствия кода ключа

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

Для нашего удобства 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

Из вышеизложенного видно, что клавиши делятся на общие и системные клавиши-модификаторы, в чем разница?
Когда мы напишем следующий код, мы обнаружим, что еслиТолькоСобытие 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(Новое в версии 2.5)

Мы сказали об этом системном модификаторе выше, когда мы привязываем событие нажатия клавиши, как это , что удивительно, мы также можем запускать путем одновременного нажатия нескольких системных клавиш-модификаторов, таких как щелчок с нажатой клавишей ctrl и Shift, могут быть некоторые сценарии, когда мытолько нужно или толькоНажмите системную клавишу-модификатор для срабатывания (например, при создании некоторых сочетаний клавиш), но не когда мы нажимаем Ctrl и другие клавиши. Тогда пишите так.
Примечание: этоПросто ограничьте системные клавиши-модификаторыДа, вы все равно можете нажать ctrl после того, как напишете вот так + c, ctrl+v или ctrl+нормальная клавиша для срабатывания, но не нажатие ctrl+shift + обычная клавиша для срабатывания.

<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);

Это действительно намного удобнее, но и нужд много.Уведомлениеточка

При использовании синхронизации имя события, передаваемое подкомпонентом, должно быть update:value, где значение должно быть точно таким же, как имя, объявленное в свойствах в подкомпоненте (например, myMessage в приведенном выше примере, my-message нельзя использовать )
Обратите внимание, что v-bind с модификатором .sync нельзя использовать с выражениями (например, v-bind:title.sync="doc.title + ‘!’” недействителен). Вместо этого вы можете указать только имя свойства, которое хотите связать, аналогично v-model.
Использование v-bind.sync для буквального объекта, например, v-bind.sync=”{ title: doc.title }», не будет работать, потому что при анализе сложного выражения, подобного этому, необходимо учитывать множество пограничных случаев. .

.prop

Чтобы изучить этот модификатор, мы должны сначала понять разницу между двумя вещами.

Property：节点对象在内存中存储的属性，可以访问和设置。
Attribute：节点对象的其中一个属性( property )，值是一个对象。
可以通过点访问法 document.getElementById('xx').attributes 或者 document.getElementById('xx').getAttributes('xx') 读取，通过 document.getElementById('xx').setAttribute('xx',value) 新增和修改。
在标签里定义的所有属性包括 HTML 属性和自定义属性都会在 attributes 对象里以键值对的方式存在。

На самом деле слова «атрибут» и «свойство» при переводе являются атрибутами, но «Расширенное программирование на 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

Благодаря функциям HTML он нечувствителен к регистру.

<svg :viewBox="viewBox"></svg>

на самом деле будет отображаться как

<svg viewbox="viewBox"></svg>

Это приведет к сбою рендеринга, потому что тег SVG распознает только viewBox, а не то, что такое viewbox.
Если мы используем модификатор .camel, он будет отображаться как camelCase.
Кроме того, если вы используете строковые шаблоны, эти ограничения не применяются.

new Vue({
  template: '<svg :viewBox="viewBox"></svg>'
})

наконец

Я не знаю, есть ли какие-либо утечки. Если есть какие-либо утечки, сообщите нам об этом в области комментариев. Если у вас есть какие-либо предложения или комментарии, вы также можете упомянуть их. Спасибо~