本篇文章繼續(xù)帶大家學(xué)習(xí)Vue，整理分享幾個助大家提高效率的Vue指令，希望對大家有所幫助！
(相關(guān)資料圖)
很多使用Vue的同學(xué)往往最容易忽略的指令，由于在這里考慮到很多初學(xué)甚至還沒有開始接觸Vue的同學(xué)呢，在介紹v-clos之前呢就先以大家都熟知的v-model編寫小demo
相信大家對v-model并不陌生，簡單來講他就是用于在表單控件以及組建上創(chuàng)建的雙向數(shù)據(jù)綁定
首先我們搭建一個Vue的小環(huán)境，在一個html頁面中引入Vue.js
下面為大家?guī)硪粋€小栗子：
<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)推薦：vuejs視頻教程、web前端開發(fā)】
下面我們更加直白的看到雙向關(guān)系
1.我們通過在控制臺中去改變model中的數(shù)據(jù)
我們可以發(fā)現(xiàn)我們改變model中的message的值，View中的值就跟著改變了
2.我們通過在文本框改變View中的值查看model中的變化
我們發(fā)現(xiàn)當(dāng)我們通過文本框去改變View中的值的時候，其實(shí)我們的Model中的值也隨之改變了。
總結(jié)通過上面實(shí)例你是不是對Vue的雙向綁定有了更近一步的了解呢，因?yàn)槲覀冎荒芡ㄟ^表單元素來對View的數(shù)據(jù)進(jìn)行改變，當(dāng)然我們其他的表單元素也是可以的我們就不一一列舉了；
1..lazy我們在上面的動圖中可以看到通過v-model綁定的文本框只要是文本框的值發(fā)生變化了就會更新到Model的數(shù)據(jù)中，很多時候我們可能連貫實(shí)現(xiàn)某種功能但是會影響我們的性能，所以我們用到了.lazy修飾符 他會在我們文本框失去焦點(diǎn)的時候再幫我們將文本框的值同步給Model
<body> <div id="app"> <h3>我是測試——{{message}}</h3><input type="text" v-model.lazy="message"> </div></body><script> var app = new Vue({ el: "#app", data: { message: "", }, })</script>來看一下效果
2..number我們還是拿文本框舉例，很多時候我們需要一些值讓用戶填寫而這個值可能希望他是數(shù)字我們用于計算，這個時候很多同學(xué)想到很多辦法，轉(zhuǎn)換呀、輸入后去判斷等等等，但其實(shí)v-model中有一個修飾符就可以幫助我們完成這個需求
我們還是通過一個小栗子來看一下，首先我們希望兩個文本框各輸入一個數(shù)值我們進(jìn)行求和
可以看一下結(jié)果
我們可以看到并不是我們想要的結(jié)果，他是作為拼接而不是求和，那么我們添加上.number修飾符來試試看
<body> <div id="app"> <h3>我是求和——{{num1+num2}}</h3><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這個大家應(yīng)該不陌生相對用的比較多，就是去除空格的，但是他只會去除文本框兩端的空格，中間的不會去除哦
<body> <div id="app"> <h3>我是測試——{{message}}</h3><input type="text" v-model.trim="message"> </div></body><script> var app = new Vue({ el: "#app", data: { message: "", }, })</script>看下效果
小常識：
其實(shí)這里綁定在文本框上的v-model只不過是語法糖而已，使用 value 屬性和 input 事件完成了雙向的綁定，文本框的值變化了我們就觸發(fā)input事件改變我們綁定的值，而同時我們文本框的value值也在與message掛鉤
這個v-cloak究竟是做什么的，首先我們來看下面代碼
<body> <div id="app"> <h3>我是測試——{{message}}</h3> </div></body><script> var app = new Vue({ el: "#app", data: { message: "你好幾何心涼", }, })</script>然后我們發(fā)現(xiàn)在頁面渲染的時候，會出現(xiàn)以下瞬間
一閃而過立馬
這種在我們實(shí)際開發(fā)過程中尤其是在我們網(wǎng)絡(luò)狀態(tài)不太好或者是后端接口響應(yīng)比較緩慢的時候出現(xiàn)這種現(xiàn)象，所以就用到我們的v-cloak
其實(shí)他的原理就是 display:none 大家應(yīng)該就明白了，也就是當(dāng)我們data中綁定的變量具備值之前Dom元素是隱藏的，所以就不會出現(xiàn)上述的問題了
（學(xué)習(xí)視頻分享：vuejs入門教程、編程基礎(chǔ)視頻）
以上就是【整理分享】幾個Vue指令，助你提高效率！的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
關(guān)鍵詞：
營業(yè)執(zhí)照公示信息