Lassen Sie uns über häufig verwendete Vue-Modifikatoren sprechen

In diesem Artikel werden Sie über häufig verwendete Vue-Modifikatoren sprechen und benutzerdefinierte Komponentenmodifikatoren, Ereignismodifikatoren und Formulareingabebindungsmodifikatoren vorstellen. Ich hoffe, dass er für alle hilfreich ist.

Interviewer: Erzählen Sie mir von den Vue-Modifikatoren

, die Sie normalerweise verwenden. Kandidat: Noch eine Rolle? Wer hat nicht die Zeit, sich diese Dinge zu merken? Weiß ich nicht, wann ich die Dokumentation nachschlagen muss? [Verwandte Empfehlungen: vue.js-Video-Tutorial] Vue修饰符

候选人：又卷？谁平时没事记这些啊，真正要用的时候我不知道去查文档吗？【相关推荐：vue.js视频教程】

面试官：嗯？

候选人：好吧，我说。

面试官：这才对嘛，虽然考这些八股文看起来是没啥意义，但其实我考察的是你对 vue 的熟悉程度，真正用 vue 开发过几个大型项目的人，是不可能答不出 5 个以上的。

候选人：您说的都对。

...

解答及延伸：

在上一篇文章 《自定义组件中如何用v-model？聊聊.sync修饰符的使用场景》 中，我们介绍了 .sync 修饰符。由此引出了这篇文章的问题，说一下你平时用过的 vue 修饰符。

修饰符用得好，那开发效率杠杠滴，即使不是应对面试，我们也应该掌握常用的修饰符。

自定义组件修饰符

.sync

父子组件交互，父组件传递给子组件 prop 值，子组件抛出事件，通知父组件改变这个绑定的值，可以用 .sync 修饰符简写。

父组件里
<children :value="fatherValue" @update:value="val => fatherValue = val"></children>

子组件里
this.$emit(&#39;update:value&#39;, newValue)

等价于

父组件里
<children :value.sync="fatherValue"></children>

子组件里
this.$emit(&#39;update:value&#39;, newValue)

.nativue

.native 修饰符是加在自定义组件的事件上，保证自定义组件的原生事件能执行

执行不了 
<my-button @click="handleClick"></my-button> 

可以执行 
<my-button @click.native="handleClick"></my-button>

如果不写 .native 修饰符，那上面的 @click 就是自定义事件 click，而非原生事件 click，除非在 my-button 组件内部 emit 了自定义事件 click，否则 handleClick 方法不会执行。

事件修饰符

.stop

.stop 修饰符，用于阻止冒泡，同 event.stopPropagation()

<div @click="handleDivClick">
  <button @click.stop="handleBtnClick">click</button>
</div>

一个 div 里面包了一个 button。

button 上的事件不加 .stop 修饰符，点击 button ，先执行 handleBtnClick ，再执行 handleDivClick 。

button 上的事件加了 .stop 修饰符，点击 button ，只执行 handleBtnClick。

了解事件冒泡和捕获，请 点击这里，面试几乎必考。

.capture

.capture 修饰符，用于添加事件监听器时使用事件捕获模式

<div @click.capture="handleDivClick">
  <button @click="handleBtnClick">click</button>
</div>

div 上的事件不加 .capture 修饰符，点击 button ，先执行 handleBtnClick ，再执行 handleDivClick ，其实就是默认使用冒泡模式。

div 上的事件加了 .capture 修饰符，点击 button ，先执行 handleDivClick ，再执行 handleBtnClick 。

.self

.self 修饰符，只当在 event.target 是当前元素自身时触发处理函数

<div @click.self="handleDivClick">
  <button @click="handleBtnClick">click</button>
</div>

div 上的事件不加 .self 修饰符，点击 button ，先执行 handleBtnClick ，再执行 handleDivClick ，其实就是默认使用冒泡模式。

div 上的事件加了 .self 修饰符，点击 button ，只执行 handleBtnClick ，点击 div，才执行 handleDivClick 。

.once

.once

Interviewer: Huh? 🎜🎜Kandidat: Okay, sage ich. 🎜🎜🎜🎜Interview Offiziell: Das ist richtig. Obwohl es bedeutungslos erscheint, diese achtteiligen Aufsätze zu lesen, wird Ihre Vertrautheit mit Vue tatsächlich nicht beantwortet die Frage. 5 oder mehr. 🎜🎜Kandidat: Sie haben Recht. 🎜🎜...🎜🎜🎜Antwort und Erweiterung:🎜🎜Im vorherigen Artikel „ Wie verwende ich das V-Modell in benutzerdefinierten Komponenten? In „Sprechen wir über die Verwendungsszenarien des .sync-Modifikators“ haben wir den .sync-Modifikator vorgestellt. Dies führt zur Frage dieses Artikels. Lassen Sie uns über die Vue-Modifikatoren sprechen, die Sie normalerweise verwenden. 🎜🎜Wenn Modifikatoren gut verwendet werden, wird die Entwicklungseffizienz erheblich verbessert. Auch wenn wir uns nicht mit Interviews befassen, sollten wir auch häufig verwendete Modifikatoren beherrschen. 🎜

Benutzerdefinierter Komponentenmodifikator

🎜🎜.sync🎜🎜Vater und Sohn Bei der Komponenteninteraktion übergibt die übergeordnete Komponente den Prop-Wert an die untergeordnete Komponente und die untergeordnete Komponente löst ein Ereignis aus, um die übergeordnete Komponente zu benachrichtigen, den gebundenen Wert zu ändern. Sie können die Modifikatorabkürzung .sync verwenden. 🎜

<button @click.once="handleBtnClick">button</button>

🎜 entspricht 🎜

阻止a标签的跳转行为
<a href="#" @click.prevent="handleClick">点击跳转</a>

阻止复选框被勾选
<input type="checkbox" @click.prevent />

阻止 form 表单提交刷新页面问题
<el-form :model="form" @submit.native.prevent>
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
</el-form>

🎜🎜.nativue🎜🎜.native Der Modifikator wird dem hinzugefügt Stellen Sie beim Ereignis der definierten Komponente sicher, dass das native Ereignis der benutzerdefinierten Komponente ausgeführt werden kann🎜

<input v-model.lazy="value" />
<p>{{ value }}</p>
//...
data() {
  return {
    value: &#39;lin&#39;
  }
}
// ...

🎜Wenn Sie den Modifikator .native nicht schreiben, wird der obige @click code> ist der benutzerdefinierte Ereignisklick und nicht der 🎜native Ereignisklick , es sei denn, der benutzerdefinierte Ereignisklick ist <code>emit innerhalb des my-button Komponente wird die handleClick-Methode nicht implementiert. 🎜

Ereignismodifikator

🎜🎜.stop🎜🎜 . stop-Modifikator, der verwendet wird, um Blasenbildung zu verhindern, genau wie event.stopPropagation()🎜

<input v-model.trim="value" />
<p>{{ value }}</p>
//...
data() {
  return {
    value: &#39;lin&#39;
  }
}
// ...

🎜🎜🎜Eine Schaltfläche ist in ein Div eingeschlossen. 🎜🎜Das Ereignis auf der Schaltfläche fügt den Modifikator .stop nicht hinzu. Klicken Sie auf die Schaltfläche und führen Sie zuerst handleBtnClick und dann handleDivClick aus. 🎜🎜Das Ereignis auf der Schaltfläche wird mit dem Modifikator .stop hinzugefügt. Wenn auf die Schaltfläche geklickt wird, wird nur handleBtnClick ausgeführt. 🎜🎜Weitere Informationen zum Bubbling und Erfassen von Ereignissen Klicken Sie hier, das Interview ist fast obligatorisch. 🎜🎜.capture🎜🎜.capture Modifikator, wird verwendet, um den Ereigniserfassungsmodus beim Hinzufügen von Ereignis-Listenern zu verwenden🎜

<input v-model.number="value" />
<p>{{ value }}</p>
//...
data() {
  return {
    value: &#39;lin&#39;
  }
}
// ...

🎜Ereignisse auf 🎜🎜div Ohne das hinzuzufügen .capture-Modifikator, klicken Sie auf die Schaltfläche, führen Sie zuerst handleBtnClick und dann handleDivClick aus. Tatsächlich wird standardmäßig der Blasenmodus verwendet. 🎜🎜Das Ereignis auf dem Div wird mit dem Modifikator .capture hinzugefügt. Klicken Sie auf die Schaltfläche und führen Sie zuerst handleDivClick und dann handleBtnClick aus. 🎜🎜🎜.self🎜🎜.self Modifikator, nur wenn event.target das aktuelle Element selbst ist Die Verarbeitungsfunktion wird ausgelöst, wenn 🎜rrreee🎜🎜🎜Das Ereignis auf dem Div fügt den Modifikator .self nicht hinzu. Wenn auf die Schaltfläche geklickt wird, wird zuerst handleBtnClick und dann handleDivClick wird ausgeführt. Dies ist eigentlich der Standard-Bubble-Modus. 🎜🎜Das Ereignis auf dem Div wird mit dem Modifikator <code>.self hinzugefügt. Wenn auf die Schaltfläche geklickt wird, wird nur handleBtnClick ausgeführt handleDivClick wird ausgeführt. 🎜🎜🎜.once🎜🎜.once Modifikator, das Klickereignis wird nur einmal ausgelöst🎜

<button @click.once="handleBtnClick">button</button>

button 上的事件加了 .once 修饰符，点击 button ，只执行一次 handleBtnClick 事件 ，之后再次点击，handleBtnClick 事件不会执行。

.prevent

.prevent 阻止默认事件，同event.preventDefault()

阻止a标签的跳转行为
<a href="#" @click.prevent="handleClick">点击跳转</a>

阻止复选框被勾选
<input type="checkbox" @click.prevent />

阻止 form 表单提交刷新页面问题
<el-form :model="form" @submit.native.prevent>
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
</el-form>

键盘按键修饰符

需要用到的时候再去查 vue文档 吧，太多了，不用记住。

表单输入绑定修饰符

.lazy

v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。添加 .lazy 修饰符，会在 change 事件之后进行同步

<input v-model.lazy="value" />
<p>{{ value }}</p>
//...
data() {
  return {
    value: &#39;lin&#39;
  }
}
// ...

.trim

使用 .trim 修饰符，会自动过滤用户输入的首尾空白字符

<input v-model.trim="value" />
<p>{{ value }}</p>
//...
data() {
  return {
    value: &#39;lin&#39;
  }
}
// ...

.number

使用 .number 修饰符，会将用户的输入值转为数值类型

<input v-model.number="value" />
<p>{{ value }}</p>
//...
data() {
  return {
    value: &#39;lin&#39;
  }
}
// ...

系统修饰符

这一部分平时开发很少用，像这种知识点知道怎么查阅就行，用到的时候再说，vue文档

总结

合理使用 vue 修饰符，能使我们的代码更简洁，提高我们的开发效率。

本文列出的修饰符平时开发中几乎都可以用到，如果你开发过 vue 项目，却没有使用过这些修饰符，要么是你开发的业务不够复杂，要么就是你的代码写得不够简洁，如果正巧你的简历写了熟练使用 vue，那么在面试官眼中就非常减分了。

vue 和 react 有一点很不同的地方，就是 vue 提供了很多语法糖和指令，能够让我们更快捷地去开发，要想熟练使用 vue，就要把这些语法糖和指令用熟。

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt vonLassen Sie uns über häufig verwendete Vue-Modifikatoren sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!