Vue.js學(xué)習(xí)筆記之修飾符詳解
本篇將簡(jiǎn)單介紹常用的修飾符。
在上一篇中,介紹了 v-model 和 v-on 簡(jiǎn)單用法。除了常規(guī)用法,這些指令也支持特殊方式綁定方法,以修飾符的方式實(shí)現(xiàn)。通常都是在指令后面用小數(shù)點(diǎn)“.”連接修飾符名稱。
一、v-model的修飾符
v-model 是用于在表單表單元素上創(chuàng)建雙向數(shù)據(jù)綁定的指令。在 <input> 和 <textarea> 上,默認(rèn)通過(guò)監(jiān)聽元素的 input 事件來(lái)更新綁定的屬性值。
為了能明顯的看到綁定屬性值的變化,需要在Chrome瀏覽器中安裝Vue Devtools擴(kuò)展程序。當(dāng)查看Vue開發(fā)的頁(yè)面時(shí),按F12就可以在開發(fā)者工具里看到Vue頁(yè)簽。這里需要注意,只有在引用Vue的開發(fā)版本文件,即vue.js文件時(shí),Vue Devtools工具才能正常使用。
.lazy
首先在 vm
對(duì)象中增加需要綁定的屬性
var vm = new Vue({ el: "#app", data: { input_lazy: "" } });
在頁(yè)面中的 input 的元素上添加指令
<div class="row"> <h2>v-model.lazy</h2> <input type="text" v-model.lazy="input_lazy" /> </div>
打開頁(yè)面,開啟Vue Devtools,在文本框中輸入字符,查看屬性值變化
當(dāng)在文本框輸入內(nèi)容,并且光標(biāo)焦點(diǎn)沒(méi)有離開文本框時(shí),屬性值沒(méi)有實(shí)時(shí)發(fā)生變化
而當(dāng)焦點(diǎn)離開文本框時(shí),屬性值發(fā)生了變化并與文本框內(nèi)容保持一致。從這個(gè)例子可以看出 .lazy
修飾符延遲了同步更新屬性值的時(shí)機(jī)。即將原本綁定在 input
事件的同步邏輯轉(zhuǎn)變?yōu)榻壎ㄔ?change
事件上。
.number
該修飾符用來(lái)將輸入內(nèi)容自動(dòng)轉(zhuǎn)換成數(shù)值。
在 vm
對(duì)象里增加一個(gè)屬性,默認(rèn)為空字符串
var vm = new Vue({ el: "#app", data: { input_number: "" } });
在頁(yè)面的 input 元素上添加指令
<div class="row"> <h2>v-model.number</h2> <input type="text" v-model.number="input_number" /> <hr /> </div>
打開頁(yè)面,在文本框內(nèi)輸入內(nèi)容,查看綁定屬性值的變化
當(dāng)開始輸入數(shù)字時(shí),屬性值將實(shí)時(shí)更新成Number類型的數(shù)值。數(shù)字后輸入其他非數(shù)字的字符,屬性值將不再變化。
而當(dāng)開始輸入非數(shù)字的字符串時(shí),因?yàn)閂ue無(wú)法將字符串轉(zhuǎn)換成數(shù)值,所以屬性值將實(shí)時(shí)更新成相同的字符串。即使后面輸入數(shù)字,也將被視作字符串。
.trim
該修飾符用來(lái)自動(dòng)過(guò)濾字符串前后的空字符。
在 vm
對(duì)象中增加一個(gè)屬性,默認(rèn)為空字符串
var vm = new Vue({ el: "#app", data: { input_trim: "" } });
在 input
上添加指令
<div class="row"> <h2>v-model.trim</h2> <input type="text" v-model.trim="input_trim" /> <hr /> </div>
打開頁(yè)面,在文本框輸入內(nèi)容,并在內(nèi)容前后添加多個(gè)空格
Vue會(huì)自動(dòng)過(guò)濾掉前后的多個(gè)空格,最終屬性值是前后沒(méi)有空字符的字符串。
二、v-on的修飾符
綁定的事件修飾符可以改變事件的觸發(fā)方式。
.stop
該修飾符將阻止事件向上冒泡。同理于調(diào)用 event.stopPropagation()
方法
在 vm
對(duì)象里添加兩個(gè)事件
var vm = new Vue({ el: "#app", methods: { div_click: function () { console.log("div click..."); }, stop_click: function () { console.log("stop_click..."); } } });
將上面兩個(gè)方法綁定到一組具有父子關(guān)系的元素上
<div class="row"> <h2>v-on.stop</h2> <div @click="div_click"> <button type="button" @click.stop="stop_click">StopPropagation</button> </div> <hr /> </div>
打開頁(yè)面,并點(diǎn)擊按鈕,查看控制臺(tái)打印結(jié)果
按照事件冒泡原理,點(diǎn)擊按鈕時(shí),從當(dāng)前觸發(fā)的元素開始,沿著它的父元素一直到根元素,都會(huì)依次觸發(fā) click 事件。但是應(yīng)用了 .stop 修飾符后,將只會(huì)觸發(fā)當(dāng)前元素的 click 事件,并阻止事件向上冒泡。
.prevent
該修飾符會(huì)阻止當(dāng)前事件的默認(rèn)行為。同理于調(diào)用 event.preventDefault()
方法
在 vm
對(duì)象里添加一個(gè)測(cè)試方法
var vm = new Vue({ el: "#app", methods: { form_submit: function () { console.log("form submit!"); } } });
頁(yè)面添加一個(gè) form 表單,并綁定表單的提交事件
<div class="row"> <h2>v-on.prevent</h2> <form @submit.prevent="form_submit"> <button type="submit">Submit</button> </form> <hr /> </div>
當(dāng)點(diǎn)擊提交按鈕時(shí),會(huì)觸發(fā)綁定的事件,并且阻止表單提交并刷新當(dāng)前頁(yè)面的默認(rèn)行為。
.self
該指令只當(dāng)事件是從事件綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)
修改上面 .stop
的例子,在父元素 div
上添加樣式
<div class="row"> <h2>v-on.self</h2> <div @click.self="div_click" style="display:inline-block; width: px; background-color:red;"> <button type="button" @click="stop_click">Button</button> </div> <hr /> </div>
打開頁(yè)面
因?yàn)楦冈乇人淖釉匾L(zhǎng),所以右側(cè)會(huì)有一部分紅色的父元素顯示出來(lái)。分別點(diǎn)擊按鈕和紅色區(qū)域,查看控制臺(tái)打印結(jié)果
因?yàn)?div_click 事件被修飾符綁定,只有在直接點(diǎn)擊到父元素 div ,即紅色區(qū)域內(nèi),事件才會(huì)被觸發(fā)。
即使點(diǎn)擊了它的子元素觸發(fā)了子元素的事件,按照事件冒泡原理,父元素的事件應(yīng)當(dāng)被觸發(fā),但是因?yàn)槭录挠|發(fā)源并不是事件綁定的元素本身,所以父元素事件不會(huì)被觸發(fā)。
.one
該修飾符表示綁定的事件只會(huì)被觸發(fā)一次
在 vm
對(duì)象中添加一個(gè)測(cè)試方法
var vm = new Vue({ el: "#app", methods: { once_click: function () { console.log("once click..."); } } });
頁(yè)面添加一個(gè)按鈕,綁定事件
<div class="row"> <h2>v-on.once</h2> <button type="button" @click.once="once_click">Button</button> <hr /> </div>
打開頁(yè)面,多次點(diǎn)擊按鈕。只有在第一次點(diǎn)擊時(shí),事件才會(huì)觸發(fā)。
鍵值修飾符
該修飾符可以用來(lái)監(jiān)聽鍵盤事件
在 vm
對(duì)象中添加一個(gè)測(cè)試方法
var vm = new Vue({ el: "#app", methods: { enter_click: function () { console.log("enter click..."); } } });
頁(yè)面增加一個(gè) input 元素,監(jiān)聽鍵盤事件
<div class="row"> <h2>鍵值修飾符</h2> <input type="text" @keyup.="enter_click" /> <hr /> </div>
打開頁(yè)面,在文本框輸入內(nèi)容,并按回車,查看控制臺(tái)打印結(jié)果
通過(guò) keyup.keyCode 的方式來(lái)監(jiān)聽鍵盤特定按鍵的事件。也可以通過(guò)按鍵名稱來(lái)監(jiān)聽
<input type="text" @keyup.enter="enter_click"/>
也可以自定義按鍵名稱
// 自定義按鍵名稱 Vue.config.keyCodes.ent = 13; // 頁(yè)面引用 <input type="text" @keyup.ent="enter_click"/>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue + element 實(shí)現(xiàn)多選框組并保存已選id集合的示例代碼
這篇文章主要介紹了Vue + element 實(shí)現(xiàn)多選框組并保存已選id集合,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06示例vue 的keep-alive緩存功能的實(shí)現(xiàn)
這篇文章主要介紹了示例vue 的keep-alive緩存功能的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12使用Vant如何實(shí)現(xiàn)數(shù)據(jù)分頁(yè),下拉加載
這篇文章主要介紹了使用Vant實(shí)現(xiàn)數(shù)據(jù)分頁(yè)及下拉加載方式。具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06基于Vue實(shí)現(xiàn)頁(yè)面全屏封裝的詳細(xì)步驟
眾所周知:目前可視化大屏,視頻播放等常見(jiàn)功能都需要用到全屏,本文將使用兩種技術(shù)實(shí)現(xiàn)全屏功能的封裝,讓不同技術(shù)棧的同學(xué)都可以輕松掌握,好了,讓我們來(lái)實(shí)現(xiàn)一個(gè)既兼容性強(qiáng)又易于管理的全屏功能組件吧,需要的朋友可以參考下2024-08-08vue3超出文本展示el tooltip實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue3超出文本展示el tooltip實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02Vue2.0中三種常用傳值方式(父?jìng)髯?、子傳父、非父子組件傳值)
在Vue的框架開發(fā)的項(xiàng)目過(guò)程中,經(jīng)常會(huì)用到組件來(lái)管理不同的功能,有一些公共的組件會(huì)被提取出來(lái)。下面通過(guò)本文給大家介紹Vue開發(fā)中常用的三種傳值方式父?jìng)髯印⒆觽鞲?、非父子組件傳值,需要的朋友參考下吧2018-08-08vue項(xiàng)目中如何使用video.js實(shí)現(xiàn)視頻播放與視頻進(jìn)度條打點(diǎn)
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中如何使用video.js實(shí)現(xiàn)視頻播放與視頻進(jìn)度條打點(diǎn)的相關(guān)資料,video.js是一款基于HTML5的網(wǎng)絡(luò)視頻播放器,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12