腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

分享幾個(gè)可以助你提高效率的Vue指令

更新時(shí)間：2022年05月23日 12:02:58 作者：幾何心涼

vue是一款漸進(jìn)式JavaScript框架,漸進(jìn)式是指由淺到深,由簡(jiǎn)單到復(fù)雜的使用vue框架,下面這篇文章主要給大家分享介紹了幾個(gè)可以助你提高效率的Vue指令,需要的朋友可以參考下

前言

很多使用Vue的同學(xué)往往最容易忽略的指令，由于在這里考慮到很多初學(xué)甚至還沒(méi)有開(kāi)始接觸Vue的同學(xué)呢，在介紹v-clos之前呢就先以大家都熟知的v-model編寫(xiě)小dem

v-model

相信大家對(duì)v-model并不陌生，簡(jiǎn)單來(lái)講他就是用于在表單控件以及組建上創(chuàng)建的雙向數(shù)據(jù)綁定

首先我們搭建一個(gè)Vue的小環(huán)境，在一個(gè)html頁(yè)面中引入Vue.js

下面為大家?guī)?lái)一個(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>

很簡(jiǎn)單的例子運(yùn)行結(jié)果也無(wú)容置疑哈！

下面我們更加直白的看到雙向關(guān)系

1.我們通過(guò)在控制臺(tái)中去改變model中的數(shù)據(jù)

我們可以發(fā)現(xiàn)我們改變model中的message的值，View中的值就跟著改變了

2.我們通過(guò)在文本框改變View中的值查看model中的變化

我們發(fā)現(xiàn)當(dāng)我們通過(guò)文本框去改變View中的值的時(shí)候，其實(shí)我們的Model中的值也隨之改變了。

總結(jié)

通過(guò)上面實(shí)例你是不是對(duì)Vue的雙向綁定有了更近一步的了解呢，因?yàn)槲覀冎荒芡ㄟ^(guò)表單元素來(lái)對(duì)View的數(shù)據(jù)進(jìn)行改變，當(dāng)然我們其他的表單元素也是可以的我們就不一一列舉了；

v-model修飾符

1..lazy

我們?cè)谏厦娴膭?dòng)圖中可以看到通過(guò)v-model綁定的文本框只要是文本框的值發(fā)生變化了就會(huì)更新到Model的數(shù)據(jù)中，很多時(shí)候我們可能連貫實(shí)現(xiàn)某種功能但是會(huì)影響我們的性能，所以我們用到了.lazy修飾符

他會(huì)在我們文本框失去焦點(diǎn)的時(shí)候再幫我們將文本框的值同步給Model

<body>
  <div id="app">
   <h3>我是測(cè)試——{{message}}</h3>
<input type="text" v-model.lazy="message">
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: '',
    },
  })
</script>

來(lái)看一下效果

2..number

我們還是拿文本框舉例，很多時(shí)候我們需要一些值讓用戶填寫(xiě)而這個(gè)值可能希望他是數(shù)字我們用于計(jì)算，這個(gè)時(shí)候很多同學(xué)想到很多辦法，轉(zhuǎn)換呀、輸入后去判斷等等等，但其實(shí)v-model中有一個(gè)修飾符就可以幫助我們完成這個(gè)需求

我們還是通過(guò)一個(gè)小栗子來(lái)看一下，首先我們希望兩個(gè)文本框各輸入一個(gè)數(shù)值我們進(jìn)行求和

可以看一下結(jié)果

我們可以看到并不是我們想要的結(jié)果，他是作為拼接而不是求和，那么我們添加上.number修飾符來(lái)試試看

<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>

再來(lái)看看結(jié)果

3..trim

這個(gè)大家應(yīng)該不陌生相對(duì)用的比較多，就是去除空格的，但是他只會(huì)去除文本框兩端的空格，中間的不會(huì)去除哦

<body>
  <div id="app">
   <h3>我是測(cè)試——{{message}}</h3>
<input type="text" v-model.trim="message">
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: '',

    },
  })
</script>

看下效果

小常識(shí)：

其實(shí)這里綁定在文本框上的v-model只不過(guò)是語(yǔ)法糖而已，使用 value 屬性和 input 事件完成了雙向的綁定，文本框的值變化了我們就觸發(fā)input事件改變我們綁定的值，而同時(shí)我們文本框的value值也在與message掛鉤

v-cloak

這個(gè)v-cloak究竟是做什么的，首先我們來(lái)看下面代碼

<body>
  <div id="app">
   <h3>我是測(cè)試——{{message}}</h3>
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: '你好幾何心涼',
    },
  })
</script>

然后我們發(fā)現(xiàn)在頁(yè)面渲染的時(shí)候，會(huì)出現(xiàn)以下瞬間

一閃而過(guò)立馬

這種在我們實(shí)際開(kāi)發(fā)過(guò)程中尤其是在我們網(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)上述的問(wèn)題了

附：v-bind和v-model的區(qū)別

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上，這樣就既可以通過(guò)更新Model來(lái)實(shí)現(xiàn)View的自動(dòng)更新，也可以通過(guò)更新View來(lái)實(shí)現(xiàn)Model數(shù)據(jù)的更新。所以，當(dāng)我們用JavaScript代碼更新Model時(shí)，View就會(huì)自動(dòng)更新，反之，如果用戶更新了View，Model的數(shù)據(jù)也自動(dòng)被更新了。