Résumé détaillé des modificateurs de vue (avec exemples)

Cet article vous apporte un résumé détaillé des modificateurs de vue (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Afin de faciliter l'écriture de code pour tout le monde, vue.js vous propose de nombreux modificateurs pratiques, tels que l'annulation du bouillonnement, le blocage des événements par défaut, etc. que nous utilisons souvent ~

Catalogue

Modificateur de formulaire

Modificateur d'événement

Modificateur de bouton de souris

Modificateur de valeur de clé

v- bind modificateur (je ne sais vraiment pas comment ça s'appelle)

Modificateur de formulaire

Quel est le plus couramment utilisé pour remplir des formulaires ? saisir! v-model~ Et nos modificateurs existent pour simplifier ces choses

.lazy

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

De là, nous pouvons voir que pendant que nous sommes encore en train de taper, alors que le curseur est toujours là, la valeur suivante est déjà sortie, ce qui peut être considéré comme étant en temps très réel.
Mais parfois, nous souhaitons mettre à jour la vue après le départ du curseur après avoir fini de tout saisir.

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

C'est tout ~ Ce n'est que lorsque notre curseur quitte la zone de saisie qu'il mettra à jour la vue, ce qui équivaut à déclencher une mise à jour dans l'événement onchange.

.trim

Dans notre zone de saisie, nous avons souvent besoin de filtrer le contenu saisi par certains frères qui ont accidentellement touché l'espace après avoir saisi le mot de passe.

<input>

Afin de vous permettre d'y voir plus clairement, j'ai changé le style, mais le problème n'est pas grand, je crois que vous pouvez voyez-le clairement Il n'y a pas d'espaces à gauche et à droite de ce grand bonjour, même si vous avez écrasé la barre d'espace dans la zone de saisie.
Il est à noter qu'il ne peut filtrer que les espaces de début et de fin  ! Le premier et le dernier, ceux du milieu ne seront pas filtrés

.numéro

Comme vous pouvez le voir d'après le nom, cela devrait être pour limiter la saisie de nombres ou la conversion des entrées en nombres, mais ce n'est pas le cas. C'est tellement chaud de précipiter la commande.

Si vous entrez le numéro en premier, cela vous limitera ne peut saisir que des chiffres.
Si vous saisissez la chaîne en premier, cela équivaut à ne pas ajouter le modificateur d'événement .number

.stop

en raison du event Avec le mécanisme de bouillonnement, lorsque nous lions un événement click à un élément, l'événement click du parent sera également déclenché.

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

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

Arrêtez le bouillonnement d'un événement en un seul clic, ce qui est extrêmement pratique. Cela équivaut à appeler la méthode event.stopPropagation().

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

.prevent

Le comportement par défaut pour empêcher un événement, par exemple, empêcher la soumission d'un formulaire lorsque l'on clique sur le bouton de soumission. Équivalent à l’appel de la méthode event.preventDefault().

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

Remarque : plusieurs modificateurs peuvent être utilisés en même temps, mais l'ordre peut varier.
L'utilisation de v-on:click.prevent.self empêchera tous les clics, tandis que v-on:click.self.prevent empêchera uniquement les clics sur l'élément lui-même.
C'est-à-dire que est jugé de gauche à droite~

.self

Uniquement lorsque l'événement est déclenché à partir de l'élément lui-même pour auquel l'événement est lié. Le rappel est déclenché. Comme indiqué ci-dessous, nous savions simplement grâce à .stop que l'élément enfant remonterait jusqu'à l'élément parent et déclencherait l'événement click de l'élément parent. Lorsque nous ajoutons ce .self, lorsque nous cliquons sur le bouton, l'événement click crie du. L'élément parent ne sera pas déclenché. Ce n'est que lorsque l'on clique sur l'élément parent (fond bleu) qu'il criera ~ D'après la traduction anglaise de self, c'est « self, yourself » Vous pouvez voir l'utilisation de ce modificateur

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

.

.once

L'utilisation de ce modificateur est aussi simple et grossière que son nom. utilisé une fois. Après avoir lié l'événement, il ne peut être utilisé que s'il se déclenche une fois, il ne se déclenchera pas une deuxième fois.

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

.capture

De ce qui précède, nous connaissons le bouillonnement des événements. En fait, le mécanisme complet des événements est : phase de capture - phase cible -. stade bouillonnant.
Par défaut, le déclencheur d'événement démarre à partir de la cible et bouillonne.
Lorsque nous ajoutons ce .capture, nous faisons le contraire, et l'événement se déclenche depuis le niveau supérieur contenant cet élément vers le bas.

   <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>'
})

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!