帶你去聊聊平常常用的 Vue 修飾符

這篇文章帶你去聊聊平常常用的 Vue 修飾符，介紹一下自訂元件修飾符、事件修飾符、表單輸入綁定修飾符，希望對大家有幫助！

面試官：說一下你平常用過的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 修飾符，點擊事件只會觸發一次

<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，就要把这些语法糖和指令用熟。

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

以上是帶你去聊聊平常常用的 Vue 修飾符的詳細內容。更多資訊請關注PHP中文網其他相關文章！