在我們對比vue與react的時候，會發(fā)現(xiàn)一個很明顯的特點(diǎn)，react的寫法很自由，用js來搞定一切，而vue的模版語法提供了一套相對固定的模式來書寫頁面，vue的優(yōu)勢在于這些特性幫助我們簡化了代碼，但同時帶來的問題是需要去記住這些vue的語法，這篇文章主要提供是vue常用指令匯總，方便以后查找。

1. v-bind
功能：綁定變量，可縮寫成：

<div :id="text"></div>

代碼說明：將text變量綁定到id屬性

2. v-text

功能：綁定標(biāo)簽內(nèi)顯示內(nèi)容

<div v-text="text">{{text}}</div>

代碼說明：指定了標(biāo)簽內(nèi)的文字內(nèi)容，相當(dāng)于innerText

3. v-html

功能：以html形式渲染變量內(nèi)容

<div v-html="html"></div>

代碼說明：將html變量以html的形式添加到標(biāo)簽內(nèi)，相當(dāng)于innerHTMl

4 v-show

功能：隱藏節(jié)點(diǎn)的顯示

<div v-show="flase"></div>

代碼說明：相當(dāng)于display：none，雖然不進(jìn)行節(jié)點(diǎn)渲染，但是dom對象一直存在，適用于頻繁切換的場景

5 v-if

功能：隱藏節(jié)點(diǎn)的顯示

<div v-if="true"></div>

代碼說明：相當(dāng)于appendChild，removeChild，直接將dom對象添加或者刪除，適用于不頻繁切換的場景，與v-if配合使用的有，v-else，v-if-else

6 v-for

功能：循環(huán)產(chǎn)生同一個組件

<ul> <li v-for="item in items" :key="item">{{item.name}}</li> </ul>

代碼說明：items是一個數(shù)組或者對象，將其中每一項(xiàng)都渲染出一個li，值得注意的是每一個li都需要一個獨(dú)一無二的key，這樣才能保證每次重新渲染的時候，只會更改key產(chǎn)生變化的節(jié)點(diǎn)，減少了開銷，而且不能使用數(shù)組的index作為key，因?yàn)閿?shù)組每一項(xiàng)對應(yīng)的index會產(chǎn)生變化。

7 v-on

功能：為節(jié)點(diǎn)綁定事件，可簡寫成@

<div @click="open"></div>

代碼說明：為div綁定了點(diǎn)擊事件，點(diǎn)擊事件觸發(fā)open這個函數(shù)

8 v-model

功能：為input提供雙向綁定功能

<inpurt type="text" v-model="value"/>

代碼說明：直接將value與input進(jìn)行雙向綁定，input的輸入會修改value的值，要注意

v-model與單選框和多選框的配合使用

<inpurt type="text" v-model.number="value"/>

代碼說明：.number修飾符將輸入變成數(shù)值型，.trim則是幫助去除首尾空格

<inpurt type="text" v-model.lazy="value"/>

代碼說明：.lazy修飾符將v-model的綁定事件從input變成onchange事件

9 v-pre

10 v-cloak

11

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的vue input file onchange_vue常用指令汇总的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。