您好,登錄后才能下訂單哦!
這篇文章主要介紹了提高效率的Vue指令有哪些的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇提高效率的Vue指令有哪些文章都會(huì)有所收獲,下面我們一起來看看吧。
相信大家對(duì)v-model并不陌生,簡單來講他就是用于在表單控件以及組建上創(chuàng)建的雙向數(shù)據(jù)綁定
首先我們搭建一個(gè)Vue的小環(huán)境,在一個(gè)html頁面中引入Vue.js
下面為大家?guī)硪粋€(gè)小栗子:
<body> <div id="app"> <input type="text" v-model="message"><br> 這里是文本框輸入的值——{{message}} </div> </body> <script> var app = new Vue({ el: '#app', data: { message: '你好,幾何心涼!', }, }) </script>
很簡單的例子運(yùn)行結(jié)果也無容置疑哈!
下面我們更加直白的看到雙向關(guān)系
1.我們通過在控制臺(tái)中去改變model中的數(shù)據(jù)
我們可以發(fā)現(xiàn)我們改變model中的message的值,View中的值就跟著改變了
2.我們通過在文本框改變View中的值查看model中的變化
我們發(fā)現(xiàn)當(dāng)我們通過文本框去改變View中的值的時(shí)候,其實(shí)我們的Model中的值也隨之改變了。
總結(jié)
通過上面實(shí)例你是不是對(duì)Vue的雙向綁定有了更近一步的了解呢,因?yàn)槲覀冎荒芡ㄟ^表單元素來對(duì)View的數(shù)據(jù)進(jìn)行改變,當(dāng)然我們其他的表單元素也是可以的我們就不一一列舉了;
1..lazy
我們在上面的動(dòng)圖中可以看到通過v-model綁定的文本框只要是文本框的值發(fā)生變化了就會(huì)更新到Model的數(shù)據(jù)中,很多時(shí)候我們可能連貫實(shí)現(xiàn)某種功能但是會(huì)影響我們的性能,所以我們用到了.lazy修飾符
他會(huì)在我們文本框失去焦點(diǎn)的時(shí)候再幫我們將文本框的值同步給Model
<body> <div id="app"> <h4>我是測試——{{message}}</h4> <input type="text" v-model.lazy="message"> </div> </body> <script> var app = new Vue({ el: '#app', data: { message: '', }, }) </script>
來看一下效果
2..number
我們還是拿文本框舉例,很多時(shí)候我們需要一些值讓用戶填寫而這個(gè)值可能希望他是數(shù)字我們用于計(jì)算,這個(gè)時(shí)候很多同學(xué)想到很多辦法,轉(zhuǎn)換呀、輸入后去判斷等等等,但其實(shí)v-model中有一個(gè)修飾符就可以幫助我們完成這個(gè)需求
我們還是通過一個(gè)小栗子來看一下,首先我們希望兩個(gè)文本框各輸入一個(gè)數(shù)值我們進(jìn)行求和
可以看一下結(jié)果
我們可以看到并不是我們想要的結(jié)果,他是作為拼接而不是求和,那么我們添加上.number修飾符來試試看
<body> <div id="app"> <h4>我是求和——{{num1+num2}}</h4> <input type="text" v-model.number="num1"> <input type="text" v-model.number="num2"> </div> </body> <script> var app = new Vue({ el: '#app', data: { message: '', num1: '', num2: '', }, }) </script>
再來看看結(jié)果
3..trim
這個(gè)大家應(yīng)該不陌生相對(duì)用的比較多,就是去除空格的,但是他只會(huì)去除文本框兩端的空格,中間的不會(huì)去除哦
<body> <div id="app"> <h4>我是測試——{{message}}</h4> <input type="text" v-model.trim="message"> </div> </body> <script> var app = new Vue({ el: '#app', data: { message: '', }, }) </script>
看下效果
小常識(shí):
其實(shí)這里綁定在文本框上的v-model只不過是語法糖而已,使用 value 屬性和 input 事件完成了雙向的綁定,文本框的值變化了我們就觸發(fā)input事件改變我們綁定的值,而同時(shí)我們文本框的value值也在與message掛鉤
這個(gè)v-cloak究竟是做什么的,首先我們來看下面代碼
<body> <div id="app"> <h4>我是測試——{{message}}</h4> </div> </body> <script> var app = new Vue({ el: '#app', data: { message: '你好幾何心涼', }, }) </script>
然后我們發(fā)現(xiàn)在頁面渲染的時(shí)候,會(huì)出現(xiàn)以下瞬間
一閃而過立馬
這種在我們實(shí)際開發(fā)過程中尤其是在我們網(wǎng)絡(luò)狀態(tài)不太好或者是后端接口響應(yīng)比較緩慢的時(shí)候出現(xiàn)這種現(xiàn)象,所以就用到我們的v-cloak
其實(shí)他的原理就是 display:none 大家應(yīng)該就明白了,也就是當(dāng)我們data中綁定的變量具備值之前Dom元素是隱藏的,所以就不會(huì)出現(xiàn)上述的問題了
v-bind是一個(gè)單向數(shù)據(jù)綁定,映射關(guān)系:Model->View,我們不需要進(jìn)行額外的DOM操作,只需要進(jìn)行Model的操作就可以實(shí)現(xiàn)視圖的聯(lián)動(dòng)更新。
v-model是一個(gè)雙向數(shù)據(jù)綁定,映射關(guān)系:View接受的數(shù)據(jù),傳給model,model的數(shù)據(jù)再傳給view。把Model綁定到View的同時(shí)也將View綁定到Model上,這樣就既可以通過更新Model來實(shí)現(xiàn)View的自動(dòng)更新,也可以通過更新View來實(shí)現(xiàn)Model數(shù)據(jù)的更新。所以,當(dāng)我們用JavaScript代碼更新Model時(shí),View就會(huì)自動(dòng)更新,反之,如果用戶更新了View,Model的數(shù)據(jù)也自動(dòng)被更新了。
關(guān)于“提高效率的Vue指令有哪些”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“提高效率的Vue指令有哪些”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。