Detaillierte Zusammenfassung der Vue-Modifikatoren (mit Beispielen)

Dieser Artikel bietet Ihnen eine detaillierte Zusammenfassung der Vue-Modifikatoren (mit Beispielen). Freunde in Not können darauf verweisen.

Um es allen einfacher zu machen, Code zu schreiben, stellt Ihnen vue.js viele praktische Modifikatoren zur Verfügung, z. B. das Abbrechen von Blasen, das Blockieren von Standardereignissen usw., die wir häufig verwenden~

Katalog

Formularmodifikator

Ereignismodifikator

Maustastenmodifikator

Schlüsselwertmodifikator

v- bind Modifikator (ich weiß wirklich nicht, wie er heißt)

Formularmodifikator

Was wird am häufigsten zum Ausfüllen von Formularen verwendet? Eingang! V-Modell~ Und unsere Modifikatoren existieren, um diese Dinge zu vereinfachen

.lazy

<div>
   <input>
   <p>{{value}}</p>
</div>

Von hier aus Während wir noch tippen und der Cursor noch da ist, können wir sehen, dass der folgende Wert bereits ausgegeben wurde, was als sehr in Echtzeit bezeichnet werden kann.
Aber manchmal möchten wir die Ansicht aktualisieren, nachdem der Cursor gegangen ist, nachdem wir alles eingegeben haben.

<div>
   <input>
   <p>{{value}}</p>
</div>

Das ist es~ Erst wenn unser Cursor das Eingabefeld verlässt, aktualisiert er die Ansicht, was dem Auslösen einer Aktualisierung im onchange-Ereignis entspricht.

.trim

In unserem Eingabefeld müssen wir häufig den Inhalt filtern, der von einigen Brüdern eingegeben wurde, die nach der Eingabe des Passworts versehentlich das Leerzeichen gedrückt haben.

<input>

Damit Sie es klarer sehen können, habe ich den Stil geändert, aber ich glaube, das Problem ist nicht groß so groß Es gibt keine Leerzeichen auf der linken und rechten Seite von „Hallo“, obwohl Sie die Leertaste im Eingabefeld gedrückt haben.
Es ist zu beachten, dass nur die führenden und nachgestellten Leerzeichen gefiltert werden können ! Das erste und das letzte, die in der Mitte, werden nicht gefiltert

.number

Wie Sie am Namen erkennen können, sollte es dazu dienen, die Eingabe von zu begrenzen Zahlen oder die Umwandlung von Eingaben in Zahlen, aber das ist nicht der Fall. Es ist so heiß, die Bestellung zu beschleunigen.

Wenn Sie zuerst die Zahl eingeben, werden Sie eingeschränkt kann nur Zahlen eingeben.
Wenn Sie die Zeichenfolge zuerst eingeben, ist dies gleichbedeutend damit, dass Sie den .number

-Ereignismodifikator

.stop

nicht hinzufügen event Wenn wir mit dem Bubbling-Mechanismus ein Klickereignis an ein Element binden, wird auch das Klickereignis des übergeordneten Elements ausgelöst.

<div>
  <button>ok</button>
</div>

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

Stoppen Sie das Sprudeln von Ereignissen mit einem Klick, was sehr praktisch ist. Dies entspricht dem Aufruf der Methode event.stopPropagation().

<div>
  <button>ok</button>
</div>
//只输出1

.prevent

Standardverhalten zum Verhindern von Ereignissen, beispielsweise das Verhindern der Übermittlung eines Formulars, wenn auf die Schaltfläche „Senden“ geklickt wird. Entspricht dem Aufruf der Methode event.preventDefault().

<!-- 提交事件不再重载页面 -->

Hinweis: Es können mehrere -Modifikatoren gleichzeitig verwendet werden, die Reihenfolge kann jedoch variieren.
Die Verwendung von v-on:click.prevent.self verhindert alle Klicks, während v-on:click.self.prevent nur Klicks auf das Element selbst verhindert.
Das heißt, wird von links nach rechts beurteilt~

.self

Nur ​​wenn das Ereignis vom Element selbst ausgelöst wird an das das Ereignis gebunden ist. Der Rückruf wird ausgelöst. Wie unten gezeigt, wussten wir nur von .stop, dass das untergeordnete Element zum übergeordneten Element sprudelt und das Klickereignis des übergeordneten Elements auslöst. Wenn wir diese .self hinzufügen, wird beim Klicken auf die Schaltfläche das Klickereignis des übergeordneten Elements ausgelöst Das Element wird nur dann ausgelöst, wenn auf das übergeordnete Element geklickt wird (blauer Hintergrund). Aus der englischen Übersetzung von „self“ (selbst, sich selbst) geht hervor, dass dieser Modifikator

<div>
  <button>ok</button>
</div>

verwendet wird

.once

Die Verwendung dieses Modifikators ist so einfach und grob wie der Name. Er kann nur einmal verwendet werden. Nach der Bindung kann das Ereignis nur einmal ausgelöst werden, ein zweites Mal wird es nicht ausgelöst.

//键盘按坏都只能shout一次
<button>ok</button>

.capture

Aus dem oben Gesagten kennen wir das Sprudeln von Ereignissen. Tatsächlich ist der vollständige Ereignismechanismus: Erfassungsstufe-Ziel-Stufe-Blase-Stufe.
Standardmäßig beginnt der Ereignisauslöser beim Ziel und sprudelt nach oben.
Wenn wir dieses .capture hinzufügen, machen wir das Gegenteil und das Ereignis wird von der obersten Ebene, die dieses Element enthält, nach unten ausgelöst.

   <div>
      obj1
      <div>
        obj2
        <div>
          obj3
          <div>
            obj4
          </div>
        </div>
      </div>
    </div>
    // 1 2 4 3

从上面这个例子我们点击obj4的时候，就可以清楚地看出区别，obj1，obj2在捕获阶段就触发了事件，因此是先1后2，后面的obj3，obj4是默认的冒泡阶段触发，因此是先4然后冒泡到3~

.passive

当我们在监听元素滚动事件的时候，会一直触发onscroll事件，在pc端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符

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

.native

我们经常会写很多的小组件，有些小组件可能会绑定一些事件，但是，像下面这样绑定事件是不会触发的

<my-component></my-component>

必须使用.native来修饰这个click事件（即<my-component></my-component>），可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，
注意：使用.native修饰符来操作普通HTML标签是会令事件失效的

鼠标按钮修饰符

刚刚我们讲到这个click事件，我们一般是会用左键触发，有时候我们需要更改右键菜单啥的，就需要用到右键点击或者中间键点击，这个时候就要用到鼠标按钮修饰符

.left   左键点击

.right  右键点击

.middle 中键点击

<button>ok</button>

键值修饰符

其实这个也算是事件修饰符的一种，因为它都是用来修饰键盘事件的。
比如onkeyup，onkeydown啊

.keyCode

如果不用keyCode修饰符，那我们每次按下键盘都会触发shout，当我们想指定按下某一个键才触发这个shout的时候，这个修饰符就有用了，具体键码查看键码对应表

<input>

为了方便我们使用，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>

那该如何呢？我们需要将系统修饰键和其他键码链接起来使用，比如

<input>

这样当我们同时按下ctrl+c时，就会触发keyup事件。
另，如果是鼠标事件，那就可以单独使用系统修饰符。

      <button>ok</button>
      <button>ok</button>
      <button>ok</button>

大概是什么意思呢，就是你不能单手指使用系统修饰键的修饰符（最少两个手指，可以多个）。你可以一个手指按住系统修饰键一个手指按住另外一个键来实现键盘事件。也可以用一个手指按住系统修饰键，另一只手按住鼠标来实现鼠标事件。

.exact (2.5新增)

我们上面说了这个系统修饰键，当我们像这样绑定了click键按下的事件，惊奇的是，我们同时按下几个系统修饰键，比如ctrl shift点击，也能触发，可能有些场景我们只需要或者只能按一个系统修饰键来触发（像制作一些快捷键的时候），而当我们按下ctrl和其他键的时候则无法触发。那就这样写。
注意：这个只是限制系统修饰键的，像下面这样书写以后你还是可以按下ctrl + c，ctrl+v或者ctrl+普通键 来触发，但是不能按下ctrl + shift +普通键来触发。

<button>ok</button>

然后下面这个你可以同时按下enter+普通键来触发，但是不能按下系统修饰键+enter来触发。相信你已经能听懂了8~

<input>

v-bind修饰符

.sync(2.3.0+ 新增)

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。我们通常的做法是

//父亲组件
<comp></comp>
//js
func(e){
 this.bar = e;
}

//子组件js
func2(){
  this.$emit('update:myMessage',params);
}

现在这个.sync修饰符就是简化了上面的步骤

//父组件
<comp></comp> 
//子组件
this.$emit('update:myMessage',params);

这样确实会方便很多，但是也有很多需要注意的点

1. 使用sync的时候，子组件传递的事件名必须为update:value，其中value必须与子组件中props中声明的名称完全一致(如上例中的myMessage，不能使用my-message)

2. 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。

3. 将 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 对象里以键值对的方式存在。

其实attribute和property两个单词，翻译出来都是属性，但是《javascript高级程序设计》将它们翻译为特性和属性，以示区分

//这里的id,value,style都属于property
//index属于attribute
//id、title等既是属性，也是特性。修改属性，其对应的特性会发生改变；修改特性，属性也会改变
<input>
//input.index === undefined
//input.attributes.index === this.index

从上面我们可以看到如果直接使用v-bind绑定，则默认会绑定到dom节点的attribute。
为了

通过自定义属性存储变量，避免暴露数据

防止污染 HTML 结构

我们可以使用这个修饰符，如下

<input>
//input.index === this.index
//input.attributes.index === undefined

.camel

由于HTML 特性是不区分大小写的。

<svg></svg>

实际上会渲染为

<svg></svg>

这将导致渲染失败，因为 SVG 标签只认 viewBox，却不知道 viewbox 是什么。
如果我们使用.camel修饰符，那它就会被渲染为驼峰名。
另，如果你使用字符串模版，则没有这些限制。

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

Das obige ist der detaillierte Inhalt vonDetaillierte Zusammenfassung der Vue-Modifikatoren (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!