重學VUE——vue 常用指令有哪些？

一、什麼是指令？

在 vue 中，指令以 v- 開頭，是一種特殊的自定義行間屬性。指令屬性的預期值是一個表達式，指令的職責就是：表達式的值改變時，相應地将某些行為應用到DOM上。隻有v-for是一個類外，後邊跟的不是表達式。

一個指令能夠接收一個參數，在指令名稱之後以冒号表示。例如：

<a v-bind:href="url">vue官網</a>      

添加指令後，url 會被當作變量來解析。

二、常用指令

2.1、v-model 雙向綁定資料

v-model 指令可以用在 input、textarea、select元素上建立雙向資料綁定。他會根據控件類型自動選取正确的方法來更新元素。

使用文法：<input type="text" v-model="msg"/>

<!-- 修改input中的值，标簽p元素内容随之改變 -->
<input v-model="content"/><p>{{ content }}</p>

data () {
 return {
  content: '我是雙向資料綁定，可以有預設值',
 }
}      

2.2、v-for 清單渲染

作用：借助 v-for 把一個資料渲染成一個清單。

使用文法：<li v-for="item in list"></li>

其中 list 是源資料數組，item是被疊代的數組元素的别名。

<!-- 使用執行個體 -->
<ul>
 <li v-for="item in list" :key="item.id">{{item.girl}}</li>
</ul>

data(){
 return{
  list:[
   { id:'1' , girl:'花花'},
   { id:'2' , girl:'草草'}
  ]
 }
})      

2.3、v-bind 動态綁定屬性

作用：用來動态綁定屬性，屬性值有變動的時候及時對頁面資料或樣式等保持最新狀态。

使用文法：

<div v-bind:attribute = " 變量 "></div>

<!-- 更改 url 圖檔位址，網頁内圖檔也會實時更新 -->
<img v-bind:src="url" alt="">

data () {
 return {
  url:'http://picture.ik123.com/uploads/allimg/161223/4-161223163338.jpg'
 }
}      

2.4、v-on 綁定事件

作用：給元素綁定事件監聽，觸發事件後，執行 methods 裡面對應函數。可以縮寫為@。

<div v-on:click="fun"></div> 
//或 
<div @click="fun"></div>

<!-- 點選按鈕，調試器會列印出vue -->
<button @click="print">點選,列印vue</button>

methods:{
 print(){
  console.log('vue')
 }
}      

注意：上述 v-on 使用的時候沒有傳參，是以方法後的小括号可以省略。

v-on 傳參時，必須添加括号，使用如下。

<!-- 點選按鈕，調試器會列印出vue -->
<button v-for="item in list" @click="print(item)">點選{{item}}</button>

data () {
 return {
  list:[ 'one', 'two', 'three' ]
 }
},
methods:{
 print(item){
  console.log('點選',item)
 }
}      

這是一個周遊的按鈕組，點選的時候，列印目前元素内容。

2.5、v-if / v-else-if / v-else

作用：根據邏輯判斷，控制元素的顯示和隐藏。

使用文法：<div v-if=" boolean|表達式 " ></div>

注意：v-if / v-else-if / v-else 使用文法都是相同的，但是v-else-if 和 v-else 必須與v-if連用，不能單獨使用。

<!-- 修改show的值，元素内容也會改變 -->
<div >
 <span v-if="show">真</span>
 <span v-else>假</span>
</div>

data () {
 return {
  show:true,
 }
}      

2.6、v-show / v-hide

作用：控制元素的顯示和隐藏。

<div v-show=" boolean|表達式 " ></div> //表達式為真的時候顯示
<div v-hide=" boolean|表達式 " ></div> //表達式為真的時候隐藏
<div >
 <span v-show="show">真</span>
 <span v-hide="show">假</span>
</div>

data () {
 return {
  show:true,
 }
}      

2.7、v-html 解析html标簽

2.8、v-once 進入頁面時 隻渲染一次 不再進行渲染

2.9、v-cloak 防止閃爍

2.10、v-pre 把标簽内部的元素原位輸出

2.11、v-text 解析文本

三、v-if 與 v-show 的差別

相同點：都是控制元素的隐藏顯示的。

差別：

• v-if 是條件渲染，滿足條件時，節點元素都會被渲染出來，包括事件綁定等，如果不滿足條件，節點就不會被渲染出來，包括事件等。但 v-show 是借助 display:none 隐藏節點的顯示，它的内容還有事件等始終都存在。
• v-if 來回切換時，浏覽器需要不停地渲染，損耗性能，是以成本很高。但是 v-show 隻是隐藏顯示，是以成本較低。
• v-show 在頁面初始化的時候，需要全部渲染，相對 v-if 成本要高。
• 根據 v-if 的特性，适合用于加快初始化的渲染速度。而 v-show 适合用于頻繁切換的場景。