vue6大指令和渲染器的用法

更新時(shí)間:2021-12-21 來源:黑馬程序員瀏覽量:

1.指令的概念：

指令(Directives)是 vue 為開發(fā)者提供的模板語法，用于輔助開發(fā)者渲染頁面的基本結(jié)構(gòu)。vue 中的指令按照不同的用途可以分為如下 6 大類：

① 內(nèi)容渲染指令

② 屬性綁定指令

③ 事件綁定指令

④ 雙向綁定指令

⑤ 條件渲染指令

⑥ 列表渲染指令

注意：指令是 vue 開發(fā)中最基礎(chǔ)、最常用、最簡單的知識(shí)點(diǎn)。

1.1內(nèi)容渲染指令

內(nèi)容渲染指令用來輔助開發(fā)者渲染 DOM 元素的文本內(nèi)容。常用的內(nèi)容渲染指令有如下 3 個(gè)：

? v-text

? {{ }}

? v-html

v-text

用法示例：

<！--把 username對(duì)應(yīng)的值，渲染到第一個(gè)p標(biāo)簽中-->
<p v-text="username"></p>

<!---把 gender 對(duì)應(yīng)的值，渲染到第二個(gè)p 標(biāo)簽中-->
<！--注意：第二個(gè)p標(biāo)簽中，默認(rèn)的文本“性別”會(huì)被gender的值覆蓋掉-->
<p v-text="gender">性別</p>o

注意：v-text 指令會(huì)覆蓋元素內(nèi)默認(rèn)的值

{{ }} 語法

vue 提供的 {{ }} 語法，專門用來解決 v-text 會(huì)覆蓋默認(rèn)文本內(nèi)容的問題。這種 {{ }} 語法的專業(yè)名稱是插值表達(dá)

式(英文名為：Mustache)。

<！--使用{{}}插值表達(dá)式，將對(duì)應(yīng)的值渲染到元素的內(nèi)容節(jié)點(diǎn)中，
<！--同時(shí)保留元素自身的默認(rèn)值-->
<p>姓名：{{username}}</p>
<p>性別：{{gender}}</p>

注意：相對(duì)于 v-text 指令來說，插值表達(dá)式在開發(fā)中更常用一些!因?yàn)樗粫?huì)覆蓋元素中默認(rèn)的文本內(nèi)容

v-html

v-text 指令和插值表達(dá)式只能渲染純文本內(nèi)容。如果要把包含 HTML 標(biāo)簽的字符串渲染為頁面的 HTML 元素，則需要用到 v-html 這個(gè)指令：

<！--假設(shè)data中定義了名為discription的數(shù)據(jù)，數(shù)據(jù)的值為包含HTML標(biāo)簽的字符串：
<！--'<h5 style="color:red;">我在黑馬程序員學(xué)習(xí) vue.js 課程。</h5>'-->

<p v-html="discription"></p>

最終渲染的結(jié)果為：

v-html渲染結(jié)果

1.2 屬性綁定指令

如果需要為元素的屬性動(dòng)態(tài)綁定屬性值，則需要用到 v-bind 屬性綁定指令。用法示例如下：

<！--假設(shè)有如下的data數(shù)據(jù)：
data: {
    inputValue:'請輸入內(nèi)容'，
    imgsrc:'https://cn.vuejs.org/images/logo.png'
}
-->

<!--使用v-bind 指令，為 input的placeholder動(dòng)態(tài)綁定屬性值-->
<input type="text" v-bind:placeholder="inputValue" />
<br />
<！--使用v-bind指令，為img的src動(dòng)態(tài)綁定屬性值-->
<img v-bind:src="imgSrc" alt="" />

屬性綁定指令的簡寫形式：

由于 v-bind 指令在開發(fā)中使用頻率非常高，因此，vue 官方為其提供了簡寫形式(簡寫為英文的 : )。

<！--假設(shè)有如下的data數(shù)據(jù)：
data: {
    inputValue:'請輸入內(nèi)容'，
    imgsrc:'https://cn.vuejs.org/images/logo.png'
}
-->

<!--使用v-bind 指令，為 input的placeholder動(dòng)態(tài)綁定屬性值-->
<input type="text" v-bind:placeholder="inputValue" />
<br />
<！--使用v-bind指令，為img的src動(dòng)態(tài)綁定屬性值-->
<img v-bind:src="imgSrc" alt="" />

使用 Javascript 表達(dá)式

在 vue 提供的模板渲染語法中，除了支持綁定簡單的數(shù)據(jù)值之外，還支持 Javascript 表達(dá)式的運(yùn)算，例如：

{{ number +1 }}

{{ ok?'YES':'NO'}}

{{ message.split('').reverse().join('"') }}

<div v-bind:id="'list-'+ id"></div>

1.3 事件綁定指令

vue 提供了 v-on 事件綁定指令，用來輔助程序員為 DOM 元素綁定事件監(jiān)聽。語法格式如下

<h3>count的值為：{{count}}</h3>
<！--語法格式為v-on：事件名稱=“事件處理函數(shù)的名稱”-->
<button V-on:click="addCount">+1</button>

注意：原生 DOM 對(duì)象有 onclick、oninput、onkeyup 等原生事件，替換為 vue 的事件綁定形式后，分別為：v-on:click、v-on:input、v-on:keyup

通過 v-on 綁定的事件處理函數(shù)，需要在 methods 節(jié)點(diǎn)中進(jìn)行聲明：

const vm = new Vue({
            el: '#app',
            data: { count: 0 },
           
            methods: {         // v-on綁定的事件處理函數(shù)，需要聲明在 methods 節(jié)點(diǎn)中
                addCount（） { //事件處理函數(shù)的名字
                    // this 表示當(dāng)前 new 出來的 vm 實(shí)例對(duì)象，
                    //通過 this 可以訪問到 data 中的數(shù)據(jù)
                    this.count += 1
                    
                },

   })

事件綁定的簡寫形式

由于 v-on 指令在開發(fā)中使用頻率非常高，因此，vue 官方為其提供了簡寫形式(簡寫為英文的 @ )。

<div id="app">
    <h3>count的值為：{{count}}</h3>

    <！-- 完整寫法 -->
    <button v-on:click="addCount">+1</button>

    <！--簡寫形式，把v-on：簡寫為@符號(hào)-->
    <！--如果事件處理函數(shù)中的代碼足夠簡單，只有一行代碼，則可以簡寫到行內(nèi)-->
    <button @click="count += 1">+1</button>
</div>

事件對(duì)象 event

在原生的 DOM 事件綁定中，可以在事件處理函數(shù)的形參處，接收事件對(duì)象 event。同理，在 v-on 指令(簡寫為 @ )所綁定的事件處理函數(shù)中，同樣可以接收到事件對(duì)象 event，示例代碼如下

<h3>count的值為：{{count}}</h3>
<button v-on:click="addCount">+1</button>
// ----------------------分割線----------------------
methods:{
    addCount(e){//接收事件參數(shù)對(duì)象event,簡寫為e
        const nowBgColor = e.target.style.backgroundColor
        e.target.style.backgroundColor = nowBgColor==='red'?" : 'red'
        this.count += 1
    }
}

綁定事件并傳參

在使用 v-on 指令綁定事件時(shí)，可以使用 ( ) 進(jìn)行傳參，示例代碼如下：

<h3>count的值為：{{count}}</h3>
<button @click="addNewCount(2)">+2</button>
// ----------------------分割線----------------------
methods:{
    //在形參處用 step接收傳遞過來的參數(shù)值
    addNewCount(step) {
        this.count += step
        }
}

事件修飾符

在事件處理函數(shù)中調(diào)用 preventDefault() 或 stopPropagation() 是非常常見的需求。因此，vue 提供了事件修飾符的概念，來輔助程序員更方便的對(duì)事件的觸發(fā)進(jìn)行控制。常用的 5 個(gè)事件修飾符如下：

事件修飾符說明
1640067476103_事件修飾符說明.png

語法格式如下：

<！-- 觸發(fā)c1ick點(diǎn)擊事件時(shí)，阻止a鏈接的默認(rèn)跳轉(zhuǎn)行為 -->
<a href="https://www.baidu.com"@click.prevent="onLinkClick">百度首頁</a>

按鍵修飾符

在監(jiān)聽鍵盤事件時(shí)，我們經(jīng)常需要判斷詳細(xì)的按鍵。此時(shí)，可以為鍵盤相關(guān)的事件添加按鍵修飾符，例如：

<！--只有在'key>是‘Enter>時(shí)調(diào)用'vm.submit（）-->
<input @keyup.enter="submit">

  <！--只有在‘key’是‘Esc’時(shí)調(diào)用 ‘vm.clearInput（）’-->
<input @keyup.esc="clearInput">

1.4雙向綁定指令

vue 提供了 v-model 雙向數(shù)據(jù)綁定指令，用來輔助開發(fā)者在不操作 DOM 的前提下，快速獲取表單的數(shù)據(jù)。

<p>用戶名是：{{username}}</p>
<input type="text" v-model="username" />

<p>選中的省份是：{{province}}</p>
<select V-model="province">
    <option value="">請選擇</option>
    <option value="1">北京</option>
    <option value="2">河北</option>
    <option value="3">黑龍江</option>
</select>

注意：v-model 指令只能配合表單元素一起使用

v-model 指令的修飾符

為了方便對(duì)用戶輸入的內(nèi)容進(jìn)行處理，vue 為 v-model 指令提供了 3 個(gè)修飾符，分別是

1640067486183_3個(gè)修飾符.png

1.5條件渲染指令

條件渲染指令用來輔助開發(fā)者按需控制 DOM 的顯示與隱藏。條件渲染指令有如下兩個(gè)，分別是：

? v-if

? v-show

v-if 和 v-show 的區(qū)別

實(shí)現(xiàn)原理不同：

? v-if 指令會(huì)動(dòng)態(tài)地創(chuàng)建或移除 DOM 元素，從而控制元素在頁面上的顯示與隱藏;

? v-show 指令會(huì)動(dòng)態(tài)為元素添加或移除 style=“display: none;” 樣式，從而控制元素的顯示與隱藏;

性能消耗不同：

v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。 ? 如果需要非常頻繁地切換，則使用 v-show 較好

? 如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好

v-else

v-if 可以單獨(dú)使用，或配合 v-else 指令一起使用：

<div v-if="Math.random() > 0.5">
  隨機(jī)數(shù)大于0.5
</diV>
<div v-else>
  隨機(jī)數(shù)小于或等于0.5
</div>

v-else-if

v-else-if 指令，顧名思義，充當(dāng) v-if 的“else-if 塊”，可以連續(xù)使用：

<div v-if="type==='A'">優(yōu)秀</div>
<div v-else-if="type ==='B'">良好</div>
<div v-else-if="type==='C'">一般</div>
<div v-else>差</div>

1.6 列表渲染指令

vue 提供了 v-for 指令，用來輔助開發(fā)者基于一個(gè)數(shù)組來循環(huán)渲染相似的 UI 結(jié)構(gòu)。 v-for 指令需要使用 item in items 的特殊語法，其中：

? items 是待循環(huán)的數(shù)組

? item 是當(dāng)前的循環(huán)項(xiàng)

data: {
1ist：[ //列表數(shù)據(jù)
  { id: 1, name: 'zs' },
  { id: 2, name:'ls' }
]
}
// ---------------分割線---------------
<ul>
<li v-for="item in list">姓名是：{{item.name}}</li>
</ul>

v-for 中的索引

v-for 指令還支持一個(gè)可選的第二個(gè)參數(shù)，即當(dāng)前項(xiàng)的索引。語法格式為 (item, index) in items，示例代碼如下：

data: {
1ist：[ //列表數(shù)據(jù)
  { id: 1, name: 'zs' },
  { id: 2, name:'ls' }
]
}
// ---------------分割線---------------
<ul>
<li v-for="(item,index)in list">索引是：{{index}},姓名是：{{item.name}}</li>
</ul>

注意：v-for 指令中的 item 項(xiàng)和 index 索引都是形參，可以根據(jù)需要進(jìn)行重命名。例如 (user, i) in userlist

使用 key 維護(hù)列表的狀態(tài)

當(dāng)列表的數(shù)據(jù)變化時(shí)，默認(rèn)情況下，vue 會(huì)盡可能的復(fù)用已存在的 DOM 元素，從而提升渲染的性能。但這種默認(rèn)的性能優(yōu)化策略，會(huì)導(dǎo)致有狀態(tài)的列表無法被正確更新。為了給 vue 一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而在保證有狀態(tài)的列表被正確更新的前提下，提升渲染的性能。此時(shí)，需要為每項(xiàng)提供一個(gè)唯一的 key 屬性

<！--用戶列表區(qū)域-->
<ul>
<！--加 key 屬性的好處：-->
<！--1.正確維護(hù)列表的狀態(tài)-->
<！--2.復(fù)用現(xiàn)有的DOM元素，提升渲染的性能-->
<li v-for="user in userlist" :key="user.id">
<input type="checkbox" />
姓名：{{user.name}}
</li>
</ul>

key 的注意事項(xiàng)

① key 的值只能是字符串或數(shù)字類型

② key 的值必須具有唯一性(即：key 的值不能重復(fù))

③ 建議把數(shù)據(jù)項(xiàng) id 屬性的值作為 key 的值(因?yàn)?id 屬性的值具有唯一性)

④ 使用 index 的值當(dāng)作 key 的值沒有任何意義(因?yàn)?index 的值不具有唯一性)

⑤ 建議使用 v-for 指令時(shí)一定要指定 key 的值(既提升性能、又防止列表狀態(tài)紊亂)

2.過濾器

過濾器(Filters)常用于文本的格式化。例如：

hello -> Hello

過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道符”進(jìn)行調(diào)用，示例代碼如下

<！--在雙花括號(hào)中通過“管道符”調(diào)用capitalize過濾器，對(duì)message的值進(jìn)行格式化-->
<p>{{ message | capitalize }}</p>

<!--在 v-bind 中通過“管道符”調(diào)用 formatId 過濾器，對(duì) rawId 的值進(jìn)行格式化-->
<div v-bind:id="rawId | formatId"></div>

過濾器可以用在兩個(gè)地方：插值表達(dá)式和 v-bind 屬性綁定

2.1 定義過濾器

在創(chuàng)建 vue 實(shí)例期間，可以在 filters 節(jié)點(diǎn)中定義過濾器，示例代碼如下：

const vm = new Vue({
    el: '#app',
    data: {
        message: 'hello vue.js',
        info: 'title info'
    }.
    filterg: {
        //在 filters 節(jié)點(diǎn)下定義“過濾器”
        capitalize(str) { //把首字母轉(zhuǎn)為大寫的過濾器
            return str.charAt(0).toUpperCase() + str.slice(1)
        }
    }
})

過濾器(Filters)是 vue 為開發(fā)者提供的功能，常用于文本的格式化。過濾器可以用在兩個(gè)地方：插值表達(dá)式和 v-bind 屬性綁定。

過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道符”進(jìn)行調(diào)用，示例代碼如下：

<！--在雙花括號(hào)中通過“管道符“調(diào)用capitalize過濾器，對(duì)message的值進(jìn)行格式化-->
<p>{{ message | capitalize }}</p>

<!-- 在 v-bind 中通過“管道符"調(diào)用 formatId 過濾器，對(duì)rawId的值進(jìn)行格式化 -->
<div v-bind:id="rawId | formatId"></div>

2.2 私有過濾器和全局過濾器

在 filters 節(jié)點(diǎn)下定義的過濾器，稱為“私有過濾器”，因?yàn)樗荒茉诋?dāng)前 vm 實(shí)例所控制的 el 區(qū)域內(nèi)使用。如果希望在多個(gè) vue 實(shí)例之間共享過濾器，則可以按照如下的格式定義全局過濾器

//全局過濾器-獨(dú)立于每個(gè)vm實(shí)例之外
// Vue.filter（）方法接收兩個(gè)參數(shù)：
//   第1個(gè)參數(shù)，是全局過濾器的”名字“
/    第2個(gè)參數(shù)，是全局過濾器的“處理函數(shù)“”
Vue.filter('capitalize', (str) => {
  return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
}）

2.3 連續(xù)調(diào)用多個(gè)過濾器

過濾器可以串聯(lián)地進(jìn)行調(diào)用，例如：

<！--把 message 的值，交給 filterA 進(jìn)行處理-->
<！--把filterA處理的結(jié)果，再交給filterB 進(jìn)行處理-->
<！--最終把filterB處理的結(jié)果，作為最終的值渲染到頁面上-->
{{ message | filterA | filterB }}

示例代碼如下：

<！--串聯(lián)調(diào)用多個(gè)過濾器-->
<p>{{text | capitalize | maxLength}}</p>
//全局過濾器-首字母大寫
Vue.filter('capitalize', (str) => {
return str.charAt(0).tolpperCase() + str.slice(1) + '~~'
)
//全局過濾器-控制文本的最大長度
Vue.filter('maxLength', (str) => {
if (str.length <= 10) return str
return str.slice(0, 11) +
}）
<！--串聯(lián)調(diào)用多個(gè)過濾器-->
<p>{{text | capitalize | maxLength}}</p>

//全局過濾器-首字母大寫
Vue.filter('capitalize', (str) => {
  return str.charAt(0).tolpperCase() + str.slice(1) + '~~'
})

//全局過濾器-控制文本的最大長度
Vue.filter('maxLength', (str) => {
  if (str.length <= 10) return str
  return str.slice(0, 11) +'...'
})

2.4 過濾器傳參

過濾器的本質(zhì)是 JavaScript 函數(shù)，因此可以接收參數(shù)，格式如下：

<！-- arg1 和 arg2 是傳遞給 filterA 的參數(shù)-->
<p>{{ message | filterA(arg1, arg2) }}</p>

// 過濾器處理函數(shù)的形參列表中：
//   第一個(gè)參數(shù)：永遠(yuǎn)都是”管道符“前面待處理的值
//   從第二個(gè)參數(shù)開始，才是調(diào)用過濾器時(shí)傳遞過來的arg1和arg2參數(shù)
Vue.filter('filterA', (msg, arg1, arg2) => {
  //過濾器的代碼邏輯...
})

示例代碼如下：

<！--調(diào)用 maxLength 過濾器時(shí)傳參-->
<p>{{text | capitalize | maxLength(5)}}</p>

//全局過濾器-首字母大寫
Vue.filter('capitalize', (str) => {
return str.charAt(0).toupperCase() + str.slice(1) + '~~'
})

//全局過濾器-控制文本的最大長度
Vue.filQr('maxLength', (str, len = 10) => {
if (str.length <= len) return str
return str.slice(0, len) + '.…'
})