這篇文章帶你去聊聊平常常用的 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('update:value', newValue)
等價於
父组件里 <children :value.sync="fatherValue"></children> 子组件里 this.$emit('update:value', 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: 'lin' } } // ...
.trim
使用 .trim
修饰符,会自动过滤用户输入的首尾空白字符
<input v-model.trim="value" /> <p>{{ value }}</p> //... data() { return { value: 'lin' } } // ...
.number
使用 .number
修饰符,会将用户的输入值转为数值类型
<input v-model.number="value" /> <p>{{ value }}</p> //... data() { return { value: 'lin' } } // ...
这一部分平时开发很少用,像这种知识点知道怎么查阅就行,用到的时候再说,vue文档
合理使用 vue 修饰符,能使我们的代码更简洁,提高我们的开发效率。
本文列出的修饰符平时开发中几乎都可以用到,如果你开发过 vue 项目,却没有使用过这些修饰符,要么是你开发的业务不够复杂,要么就是你的代码写得不够简洁,如果正巧你的简历写了熟练使用 vue,那么在面试官眼中就非常减分了。
vue 和 react 有一点很不同的地方,就是 vue 提供了很多语法糖和指令,能够让我们更快捷地去开发,要想熟练使用 vue,就要把这些语法糖和指令用熟。
更多编程相关知识,请访问:编程入门!!
以上是帶你去聊聊平常常用的 Vue 修飾符的詳細內容。更多資訊請關注PHP中文網其他相關文章!