Vue入門指南-03 vue官方提供的指令 (快速上手vue)

第三章 學習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>
複製代碼

Vue入門指南(快速上手vue)