Vue常用指令有哪些

這篇文章將為大家詳細(xì)講解有關(guān)Vue常用指令有哪些，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶體驗(yàn)。

插入文本：

v-text

相當(dāng)于元素的innerText屬性，必須是雙標(biāo)簽

插入HTML：

相當(dāng)于元素的innerHTML屬性

循環(huán)遍歷

v-for的使用，除了item屬性，還有一些其他輔助屬性

 在html中使用v-for指令進(jìn)行渲染
/*
 普通數(shù)組
  data:{
      list:[1,2,3,4,5,6]
   }
  <p v-for="(item,i) in list">--索引值--{{i}}   --每一項(xiàng)--{{item}}</p>
*/


/*
 對(duì)象數(shù)組
 data:{
      list:[1,2,3,4,5,6],
      listObj:[
        {id:1, name:'zs1'},
        {id:2, name:'zs2'},
        {id:3, name:'zs3'},
        {id:4, name:'zs4'},
        {id:5, name:'zs5'},
        {id:6, name:'zs6'},
      ]
}
   <p v-for="(user,i) in listObj">--id--{{user.id}}   --姓名--{{user.name}}</p>
*/

/*
  對(duì)象
  data:{
      user:{
        id:1,
        name:'托尼.賈',
        gender:'男'
      }
 }
 <p v-for="(val,key) in user">--鍵是--{{key}}--值是--{{val}}</p>
*/

/*
 數(shù)字
 <!-- 注意：如果使用v-for迭代數(shù)字的話，前面 count 的值從 1 開(kāi)始-->
<p v-for="count in 10">這是第{{count}}次循環(huán)</p>
*/

條件渲染

v-if：是否插入元素

v-show是否隱藏元素，根據(jù)CSS進(jìn)行元素的渲染

屬性綁定

v-bind：屬性名=“常量 || 變量名”

簡(jiǎn)寫形式：屬性名=“常量 || 變量名”

<p v-bind:屬性名="變量"></p>
//可以簡(jiǎn)寫成
<p :屬性名="變量"></p>

//如果要賦值常量，需要給常量用單引號(hào)包起來(lái)，如
<p :屬性名=" '常量' "></p>

雙向綁定:v-model

所謂的雙向綁定，就是你在視圖層里面改變了值，vue里面對(duì)應(yīng)的值也會(huì)改變。只能給具備value屬性的元素進(jìn)行雙向數(shù)據(jù)綁定。

綁定事件:v-on

v-on:click = “方法名 || 直接改變 vue 內(nèi)部變量”，

簡(jiǎn)寫形式：@click = “方法名 || 直接改變 vue 內(nèi)部變量”

<p v-on:click=" num = 1 "></p>
//可以簡(jiǎn)寫成
<p @click=" num = 1 "></p>

跳過(guò)元素節(jié)點(diǎn)

v-pre：跳過(guò)這個(gè)元素和它的子元素的編譯過(guò)程。可以用來(lái)顯示原始 Mustache 標(biāo)簽。跳過(guò)大量沒(méi)有指令的節(jié)點(diǎn)會(huì)加快編譯。

只渲染一次

v-once：只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過(guò)。這可以用于優(yōu)化更新性能。

關(guān)于“Vue常用指令有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。