首頁(yè)技術(shù)文章正文

vue6大指令和渲染器的用法

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

1.指令的概念:

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

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

② 屬性綁定指令

③ 事件綁定指令

④ 雙向綁定指令

⑤ 條件渲染指令

⑥ 列表渲染指令

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

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

內(nèi)容渲染指令用來(lái)輔助開(kā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)的值

{{ }} 語(yǔ)法

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

式(英文名為:Mustache)。

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

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

v-html

v-text 指令和插值表達(dá)式只能渲染純文本內(nèi)容。如果要把包含 HTML 標(biāo)簽的字符串渲染為頁(yè)面的 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:'請(qǐng)輸入內(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="" />

屬性綁定指令的簡(jiǎn)寫形式:

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

<!--假設(shè)有如下的data數(shù)據(jù):
data: {
    inputValue:'請(qǐng)輸入內(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 提供的模板渲染語(yǔ)法中,除了支持綁定簡(jiǎn)單的數(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 事件綁定指令,用來(lái)輔助程序員為 DOM 元素綁定事件監(jiān)聽(tīng)。語(yǔ)法格式如下

<h3>count的值為:{{count}}</h3>
<!--語(yǔ)法格式為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

通過(guò) 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 出來(lái)的 vm 實(shí)例對(duì)象,
                    //通過(guò) this 可以訪問(wèn)到 data 中的數(shù)據(jù)
                    this.count += 1
                    
                },

   })

事件綁定的簡(jiǎn)寫形式

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

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

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

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

事件對(duì)象 event

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

<h3>count的值為:{{count}}</h3>
<button v-on:click="addCount">+1</button>
// ----------------------分割線----------------------
methods:{
    addCount(e){//接收事件參數(shù)對(duì)象event,簡(jiǎn)寫為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接收傳遞過(guò)來(lái)的參數(shù)值
    addNewCount(step) {
        this.count += step
        }
}

事件修飾符

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

事件修飾符 說(shuō)明
1640067476103_事件修飾符說(shuō)明.png

語(yǔ)法格式如下:

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

按鍵修飾符

在監(jiān)聽(tīng)鍵盤事件時(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ù)綁定指令,用來(lái)輔助開(kāi)發(fā)者在不操作 DOM 的前提下,快速獲取表單的數(shù)據(jù)。

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

<p>選中的省份是:{{province}}</p>
<select V-model="province">
    <option value="">請(qǐng)選擇</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條件渲染指令

條件渲染指令用來(lái)輔助開(kāi)發(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 元素,從而控制元素在頁(yè)面上的顯示與隱藏;

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

性能消耗不同:

v-if 有更高的切換開(kāi)銷,而 v-show 有更高的初始渲染開(kāi)銷。 ? 如果需要非常頻繁地切換,則使用 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 指令,用來(lái)輔助開(kāi)發(fā)者基于一個(gè)數(shù)組來(lái)循環(huán)渲染相似的 UI 結(jié)構(gòu)。 v-for 指令需要使用 item in items 的特殊語(yǔ)法,其中:

? 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)的索引。語(yǔ)法格式為 (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)的列表無(wú)法被正確更新。為了給 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 的值沒(méi)有任何意義(因?yàn)?index 的值不具有唯一性)

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

2.過(guò)濾器

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

hello -> Hello

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

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

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

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

2.1 定義過(guò)濾器

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

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

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

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

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

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

2.2 私有過(guò)濾器和全局過(guò)濾器

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

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

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

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

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

示例代碼如下:

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

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

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

2.4 過(guò)濾器傳參

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

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

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

示例代碼如下:

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

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

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

2.5 過(guò)濾器的兼容性

過(guò)濾器僅在 vue 2.x 和 1.x 中受支持,在 vue 3.x 的版本中剔除了過(guò)濾器相關(guān)的功能。

在企業(yè)級(jí)項(xiàng)目開(kāi)發(fā)中:

? 如果使用的是 2.x 版本的 vue,則依然可以使用過(guò)濾器相關(guān)的功能

? 如果項(xiàng)目已經(jīng)升級(jí)到了 3.x 版本的 vue,官方建議使用計(jì)算屬性或方法代替被剔除的過(guò)濾器功能

具體的遷移指南,請(qǐng)參考 vue 3.x 的官方文檔給出的說(shuō)明:

https://v3.vuejs.org/guide/migration/filters.html#migration-strategy

IT培訓(xùn)班






猜你喜歡:

什么是跨域?VUE如何實(shí)現(xiàn)跨域?

Vue中如何監(jiān)控某個(gè)屬性值的變化?

前端實(shí)戰(zhàn)教程:快速掌握Vue.js的基本使用

Vue3中Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)的優(yōu)勢(shì)?

黑馬程序員HTML前端開(kāi)發(fā)培訓(xùn)

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!