第三章 學習vue中的指令
vue官方為我們提供了很多它自己原生的指令, 工作專案中會經常用到,這裡我先為大家講解幾個基礎的指令
v-cloak指令
使用v-cloak指令能夠解決差值表示式閃爍的問題
// 需要在樣式中設定以下樣式
<style>
[v-cloak] {
display: none;
}
</style>
// 使用方式: 在我們使用差值表示式的標籤新增該指令
<p v-cloak>{{ msg }}</p>
複製程式碼v-text指令
v-text 是沒有閃爍的問題 但是 v-text 會覆蓋元素中原本的內容，但是差值表示式只會替換自己的這個佔位符，不會把整個元素的內容清空
使用方式:
<p v-text>{{ msg }}</p>
複製程式碼v-html指令
v-html 會解析標籤，以上兩種不會，它也會更改元素中原本的內容
使用方式：
new app({
el: "#app",
data: {
msg: "<h1>我是一個標籤元素</h1>"
}
})
<p v-html="msg"></p>
複製程式碼v-bind指令
- v-bind： 是Vue中，提供的用來繫結屬性的指令,只能實現資料的單向繫結,從M自動繫結到V,無法實現資料的雙向繫結。
- 注意：v-bind： 指令可以被簡寫為 ：要繫結的屬性
- v-bind 中可以寫合法的js表示式
// 使用方式:
<p v-bind:title="msg"></p>
簡寫方式:
<p :title="msg"></p>
// 屬性中寫js表示式
<p v-bind:title="msg+'合法表示式'"></p>
複製程式碼繫結class屬性的用法
- 陣列的寫法
// 直接傳遞一個陣列, 陣列裡面的類名要寫字串, 注意:這裡的class需要使用v-bind做資料繫結
使用方式：
<p :class="['thin', 'italic']"></p>
複製程式碼- 陣列中巢狀物件
// 陣列中推薦使用這種方式
使用方式：
<p :class="['thin', 'italic',{'active':flag}]"></p> // 這裡的flag在data中定義, 是一個布林值
複製程式碼- 陣列中使用三元表示式
// data中定義一個布林值型別的flag,在陣列中用三元表示來顯示這個flag
使用方式：
<p :class="['thin', 'italic', flag ? 'active':'noactive']"></p>
複製程式碼- 直接使用物件
// 在為class使用v-bind繫結物件的時候,物件的屬性是型別,
// 由於物件的屬性可帶可不帶引號,寫法自己決定, 屬性的值是一個識別符號
使用方式:
<p :class="{thin: true, italic: true, active: false}"></p>
複製程式碼繫結style屬性的用法
- 直接在標籤上通過 :style 的形式書寫
// 物件就是無序鍵值對的集合
使用方式：
<p :style="{color:'red', 'font-weight':200}"></p>
複製程式碼- 將樣式定義在data中, 在:style繫結的標籤中引用
// 先將樣式定義在data中的一個變數身上
new app({
el: "#app",
data: {
styleObject: {color:'red', 'font-weight':200}
}
})
// 在標籤上,通過屬性繫結的形式,將樣式物件應用到元素中
<p :style="styleObject"></p>
複製程式碼- 在 :style 中通過陣列, 引用多個 data 上的樣式物件
// 先將樣式定義在data中的一個變數身上
new app({
el: "#app",
data: {
styleObject1: {color:'red', 'font-weight':200},
styleObject2: {color:'red', 'font-weight':200}
}
})
// 在標籤上,通過屬性繫結的形式,將樣式物件應用到元素中
使用方式：
<p :style="[styleObject1, styleObject2]"></p>
複製程式碼v-model指令
Vue中唯一一個實現雙向資料繫結的指令, 注意 : 只能運用到表單元素中
使用方式:
<input v-model="msg"></input> // 修改imput輸入框的值, 下面p標籤繫結的內容會隨之改變
<p>{{ msg }}</p>
複製程式碼v-for指令
-
在使用 v-for 指令的時候要注意加上 key 屬性
-
Vue2.2以後的版本規定,當前元件使用v-for迴圈的時候, 或者在一些特殊情況中, 如果v-for有問題, 必須在使用v-for的同時, 指定唯一的字串/陣列型別 :key值。
-
v-for="(val, key) in list" // in 後面可以放普通陣列, 物件陣列, 物件, 還可以放數字
迭代陣列
// 先在data上定義一個陣列
new app({
el: "#app",
data: {
list: [1, 2, 3, 4]
}
})
使用方式：item是迴圈的每一項,list是迴圈的陣列,index是索引值
<li v-for="(item, index)in list" :key="index">{{index}}~~~{{item}}</li>
複製程式碼迭代物件陣列
new app({
el: "#app",
data: {
list:[{id:1,name:'tank1'}, {id:2,name:'tank2'}, {id:3,name:'tank3'}]
}
})
使用方式：
<li v-for="(item, index)in list" :key="index">
id:{{item.id}} --- 名字:{{item.name}} --- 索引{{index}}
</li>
複製程式碼迭代物件
new app({
el: "#app",
data: {
list: {
name1: "abc1",
name2: "abc2",
name3: "abc3"
}
}
})
使用方式：在遍歷物件身上的鍵值對的時候.除了有val、key, 在第三個位置還有一個索引index, 索引基本用不到
<li v-for="(val, key, index) in list" :key="index">
值是:{{ val }} --- 鍵是: {{key}} --- 索引{{index}}
</li>
複製程式碼迭代數字
如果使用v-for迭代數字,前面的 count 從 1 開始
使用方式：
<li v-for="(count, index) in 10" :key="index">這是第 {{count}} 次迴圈</li>
複製程式碼v-if 和 v-else 和 v-else-if 還有 v-show指令
如果元素涉及到頻繁的切換,最好不要使用 v-if 而推薦使用 v-show
如果元素可能不太頻繁被顯示出來被使用者看,推薦用 v-if 和 v-else
- v-if 和 v-else
// v-if 的特點: 每次都會重新刪除或建立元素
// v-if 有較高的切換效能消耗
// v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，否則它將不會被識別。
使用方式：
new app({
el: "#app",
data: {
flag: true // 定義一個變數為布林值型別
}
})
<p v-if="flag">我在flag為true的時候顯示</p>
<p v-else>我在flag不為true的時候顯示</p>
複製程式碼- v-show
// v-show的特點: 每次不會重新進行DOM的刪除和建立,只是切換了元素的display:none樣式
// v-show有較高的初始渲染消耗
使用方式：
<p v-show="flag">我在flag為true的時候顯示</p>
複製程式碼