前端開發系列048-基礎篇之Vue的基礎指令
阿新 • • 發佈：2022-12-12
title: '前端開發系列048-基礎篇之Vue的基礎指令'
tags:
categories: []
date: 2017-12-02 01:00:00
本文介紹Vue框架中涉及的基礎指令。
一、基礎指令
簡單總結下Vue中常用的基礎指令。
v-html 設定標籤的innerHTML v-text 設定標籤的innerText v-bind 設定標籤的屬性節點 v-on 給標籤繫結事件,可以使用@語法糖來替代 v-if 條件判斷，根據動態資料來建立或銷燬對應的標籤 v-else 條件判斷，通常更在v-if的後面 v-else-if 條件判斷，跟在v-if的後面 v-model 雙向繫結資料(繫結message到文字輸入框的value值) v-show 是否顯示對應的標籤（設定樣式隱藏） v-for 迴圈渲染的指令，主要用於處理物件或者是陣列資料基礎指令的程式碼示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../Vue/vue.min.js"></script> </head> <body> <div id="app1"> <div> {{msg}}</div> <div v-html="html"></div> </div> <div id="app2"> <div> {{msg}}</div> <div v-text="text"></div> </div><br> <div id="app3"> <div> {{msg}}</div> <a v-bind:href="src_url">點選我跳轉到{{src_url}}頁面</a><br> <a :href="src_url">點選我跳轉到{{ url }}頁面</a> </div><br> <div id="app4"> <div> {{msg}}</div> <input type="text" placeholder="請輸入具體的內容..." v-model:value="message"> <span>文字輸入框中的內容為：{{message}}</span> </div><br> <div id="app5"> <div> {{msg}}</div> <button v-on:click="count1 += 1"> 當前Count的值為 {{ count1 }}</button> <button v-on:click="countClick"> 當前Count的值為 {{ count2 }}</button> <button @click="count3 += 1"> 當前Count的值為 {{ count3 }}</button> </div><br> <div id="app6"> <div>{{msg}}</div> <div>條件渲染演示[001]</div> <div v-if="type == '數學'"><p>數學：幾何 + 代數</p> </div> <div v-else-if="type == '語文'"><p>語文：白話文 + 文言文</p></div> <div v-else><p>其他學科...</p></div> <div>條件渲染演示[002]</div> <template v-if="ok"> <div>哈哈哈</div> <div>啦啦啦</div> <div>嘻嘻嘻</div> <div>吼吼吼</div> </template> <div v-else><div>哎喲 ok的值為false !!!</div> </div> </div><br> <div id="app7"> <div> {{msg}}</div> <div v-show="isShow">show指令和if指令的不同在於它通過樣式來控制標籤是否顯示</div> </div> <script> new Vue({ el:"#app1", data:{ msg:"① v-html指令的使用", html:"<p>我是p標籤</p>" } }); new Vue({ el:"#app2", data:{ msg:"② v-text指令的使用", text:"<p>我是p標籤</p>" } }); new Vue({ el:"#app3", data:{ msg:"③ v-bind指令的使用", src_url:"http://www.wendingding.com" }, computed:{ url:function () { return this.src_url.substr("7"); } } }); new Vue({ el:"#app4", data:{ msg:"④ v-model雙向資料繫結", message:"預設的訊息" } }); new Vue({ el:"#app5", data:{ msg:"⑤ v-on指令繫結事件監聽", count1:0, count2:0, count3:0 }, methods:{ countClick:function () { this.count2 +=1; } } }); new Vue({ el:"#app6", data:{ msg:"⑥ v-if v-else v-else-if指令", type:"哈哈哈", ok:false } }); new Vue({ el:"#app7", data:{ msg:"⑦ v-show指令", isShow:false } }); </script> </body> </html>
這裡貼出上面程式碼的執行情況
<body> <div id="app1"><div> ① v-html指令的使用</div> <div><p>我是p標籤</p></div></div> <div id="app2"><div> ② v-text指令的使用</div> <div><p>我是p標籤</p></div></div><br> <div id="app3"><div> ③ v-bind指令的使用</div> <a href="http://www.wendingding.com">點選我跳轉到http://www.wendingding.com頁面</a> <br> <a href="http://www.wendingding.com">點選我跳轉到www.wendingding.com頁面</a></div><br> <div id="app4"><div> ④ v-model雙向資料繫結</div> <input type="text" placeholder="請輸入具體的內容..."> <span>文字輸入框中的內容為：預設的訊息</span></div><br> <div id="app5"><div> ⑤ v-on指令繫結事件監聽</div> <button> 當前Count的值為 0</button> <button> 當前Count的值為 0</button> <button> 當前Count的值為 0</button></div><br> <div id="app6"><div> ⑥ v-if v-else v-else-if指令</div> <div>條件渲染演示[001]</div> <div><p>其他學科...</p></div> <div>條件渲染演示[002]</div> <div><div>哎喲 ok的值為false !!!</div></div></div><br> <div id="app7"><div> ⑦ v-show指令</div> <div style="display: none;">show指令和if指令的不同在於它通過樣式來控制標籤是否顯示</div></div> </body>
二、列表渲染指令
v-for指令根據一組陣列|物件的選項列表來進行渲染。
v-for 指令需要使用item in items形式的特殊語法，其中items是資料來源(可以是陣列、物件或者是數字)，item是當前正在迭代的資料別名(代表當前的元素或者是value值)。
列表渲染指令執行示例
列表渲染指令程式碼示例
<body>
<div id="app1">
<div>{{msg}}</div>
<ul>
<li v-for="n in 3">{{n}}</li>
</ul>
</div>
<div id="app2">
<div>{{msg}}</div>
<ul>
<li v-for="(item,index) in itemData"> index-{{ index}} - item-{{item}}</li>
</ul>
</div>
<div id="app3">
<div>{{msg}}</div>
<ul>
<li v-for="(value,key,index) in object"> index:{{ index }} - key:{{key}} -value:{{value}}</li>
</ul>
</div>
<div id="app4">
<div>{{msg}}</div>
<ul>
<li v-for="item in itemData" :key="item.id"> ID:{{item.id}} Text:{{item.text}} Other:{{OtherData}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app1",
data:{
msg:"① 使用for指令處理數字"
}
});
new Vue({
el:"#app2",
data:{
msg:"② 使用for指令處理陣列",
itemData:["語文","數學","鋼琴"]
}
});
new Vue({
el:"#app3",
data:{
msg:"③ 使用for指令處理物件",
object:{
age:"33",
name:"阿牛",
demo:"初戀紅豆冰"
}
}
});
new Vue({
el:"#app4",
data:{
msg:"④ 使用for指令處理物件陣列",
itemData:[
{id:1,text:"住進布達拉宮，我是雪域最大的王"},
{id:2,text:"流浪在拉薩街頭，我是世間最美的情郎"},
],
OtherData:"Test-Other 資料"
}
})
</script>
v-for指令的使用注意點
> ✦ 可以用 of 替代 in 作為分隔符。
> ✦ 資料來源可以取整數，它將重複多次模板。
> ✦ 可以利用帶有 v-for 的`template`渲染多個元素
> ✦ 在v-for模組中擁有對父作用域屬性的完全訪問許可權。
> ✦ 迭代陣列的時候，支援一個可選的第二個引數為當前項的索引。
> ✦ 迭代物件的時候，支援一個可選的第二個引數為當前項的鍵名，第三個引數為當前項的索引。
> ✦ 遍歷物件的時候，按照`Object.keys()`[Object的靜態方法用於獲取物件所有的key]的結果處理。
> ✦ 在更新已渲染元素時預設用“就地複用”策略，高策略高效但有適用範圍，可以通過設定key解決。
> ✦ 當在元件中使用 v-for 時，key 現在是必須的[2.2.0 + 版本]。
❖ 陣列的更新檢測
Vue 包含一組觀察陣列的變異方法(push[追加元素]、pop[彈出元素]、shift[刪除第一個元素]、unshift[在陣列前插入N個元素]、splice[新增|替換|刪除元素]、reverse[翻轉元素]、sort[排序])，呼叫它們的時候將會觸發檢視更新。
變異方法：上面這些方法被稱為變異方法的原因是它們在使用的時候會改變原始陣列的資料。
非變異方法：相對的，陣列操作中不會改變原始陣列的方法如(filter[過濾], concat[合併] 和 slice[擷取])被稱為非變異方法，它們大多會返回一個新的陣列。當呼叫非變異方法來處理Vue例項中的資料時，檢視並不會更新。如果需要和檢視同步，可以考慮使用新陣列替換舊陣列(app4.itemData = app4.itemData.slice(2))。
另外，陣列無法監測到 ①利用索引直接設定元素 ② 修改陣列的長度 這兩種情況下的陣列變動。
具體的解決方案
//① 通過索引來設定陣列中的元素並更新檢視
//vm.items[indexOfItem] = newValue
Vue.set(vm.items, indexOfItem, newValue); //方式（1）
vm.items.splice(indexOfItem, 1, newValue); //方式（2）
vm.$set(vm.items, indexOfItem, newValue); //方式（3）
//② 修改陣列長度並更新檢視
//vm.items.length = newLength
vm.items.splice(newLength)
❖ 物件的更新檢測
由於 JavaScript 的限制，Vue 不能檢測物件屬性的新增或刪除操作。也就是說，對於已經建立的例項，Vue 不能動態新增根級別的響應式屬性。
//向巢狀物件新增響應式屬性的方式：兩種方法等價
Vue.set(object, key, value);
Vue.$set(object, key, value)