一、什么是指令？
在 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 適合用于頻繁切換的場景，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/302518.html
標籤：其他