Vue.js中修飾符的示例分析-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)Vue.js中修飾符的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

專注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)勃利免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了超過(guò)千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

一、v-model的修飾符

v-model 是用于在表單表單元素上創(chuàng)建雙向數(shù)據(jù)綁定的指令。在 <input> 和 <textarea> 上，默認(rèn)通過(guò)監(jiān)聽(tīng)元素的 input 事件來(lái)更新綁定的屬性值。

為了能明顯的看到綁定屬性值的變化，需要在Chrome瀏覽器中安裝Vue Devtools擴(kuò)展程序。當(dāng)查看Vue開(kāi)發(fā)的頁(yè)面時(shí)，按F12就可以在開(kāi)發(fā)者工具里看到Vue頁(yè)簽。這里需要注意，只有在引用Vue的開(kāi)發(fā)版本文件，即vue.js文件時(shí)，Vue Devtools工具才能正常使用。

.lazy

首先在vm對(duì)象中增加需要綁定的屬性

 var vm = new Vue({
   el: "#app",
   data: {
     input_lazy: ""
   }
 });

在頁(yè)面中的 input 的元素上添加指令

 <div class="row">
   <h3>v-model.lazy</h3>
   <input type="text" v-model.lazy="input_lazy" />
 </div>

打開(kāi)頁(yè)面，開(kāi)啟Vue Devtools，在文本框中輸入字符，查看屬性值變化

當(dāng)在文本框輸入內(nèi)容，并且光標(biāo)焦點(diǎn)沒(méi)有離開(kāi)文本框時(shí)，屬性值沒(méi)有實(shí)時(shí)發(fā)生變化

而當(dāng)焦點(diǎn)離開(kāi)文本框時(shí)，屬性值發(fā)生了變化并與文本框內(nèi)容保持一致。從這個(gè)例子可以看出.lazy修飾符延遲了同步更新屬性值的時(shí)機(jī)。即將原本綁定在input事件的同步邏輯轉(zhuǎn)變?yōu)榻壎ㄔ?code>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">
   <h3>v-model.number</h3>
   <input type="text" v-model.number="input_number" />
   <hr />
 </div>

打開(kāi)頁(yè)面，在文本框內(nèi)輸入內(nèi)容，查看綁定屬性值的變化

當(dāng)開(kāi)始輸入數(shù)字時(shí)，屬性值將實(shí)時(shí)更新成Number類型的數(shù)值。數(shù)字后輸入其他非數(shù)字的字符，屬性值將不再變化。

而當(dāng)開(kāi)始輸入非數(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">
   <h3>v-model.trim</h3>
   <input type="text" v-model.trim="input_trim" />
   <hr />
 </div>

打開(kāi)頁(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">
   <h3>v-on.stop</h3>
   <div @click="div_click">
     <button type="button" @click.stop="stop_click">StopPropagation</button>
   </div>
   <hr />
 </div>

打開(kāi)頁(yè)面，并點(diǎn)擊按鈕，查看控制臺(tái)打印結(jié)果

按照事件冒泡原理，點(diǎn)擊按鈕時(shí)，從當(dāng)前觸發(fā)的元素開(kāi)始，沿著它的父元素一直到根元素，都會(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">
   <h3>v-on.prevent</h3>
   <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">
   <h3>v-on.self</h3>
   <div @click.self="div_click" >
     <button type="button" @click="stop_click">Button</button>
   </div>
   <hr />
 </div>

打開(kāi)頁(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">
   <h3>v-on.once</h3>
   <button type="button" @click.once="once_click">Button</button>
   <hr />
 </div>

打開(kāi)頁(yè)面，多次點(diǎn)擊按鈕。只有在第一次點(diǎn)擊時(shí)，事件才會(huì)觸發(fā)。

鍵值修飾符

該修飾符可以用來(lái)監(jiān)聽(tīng)鍵盤事件

在vm對(duì)象中添加一個(gè)測(cè)試方法

 var vm = new Vue({
   el: "#app",
   methods: {
     enter_click: function () {
       console.log("enter click...");
     }
   }
 });

頁(yè)面增加一個(gè) input 元素，監(jiān)聽(tīng)鍵盤事件

 <div class="row">
   <h3>鍵值修飾符</h3>
   <input type="text" @keyup.="enter_click" />
   <hr />
 </div>

打開(kāi)頁(yè)面，在文本框輸入內(nèi)容，并按回車，查看控制臺(tái)打印結(jié)果

通過(guò) keyup.keyCode 的方式來(lái)監(jiān)聽(tīng)鍵盤特定按鍵的事件。也可以通過(guò)按鍵名稱來(lái)監(jiān)聽(tīng)

 <input type="text" @keyup.enter="enter_click"/>

也可以自定義按鍵名稱

 // 自定義按鍵名稱
 Vue.config.keyCodes.ent = 13;
 
 // 頁(yè)面引用
 <input type="text" @keyup.ent="enter_click"/>

感謝各位的閱讀！關(guān)于“Vue.js中修飾符的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站bm7419.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

標(biāo)題名稱：Vue.js中修飾符的示例分析-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://bm7419.com/article42/dihiec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、品牌網(wǎng)站制作、網(wǎng)站導(dǎo)航、建站公司、微信公眾號(hào)、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)