首頁技術文章正文

vue6大指令和渲染器的用法

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

1.指令的概念:

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

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

② 屬性綁定指令

③ 事件綁定指令

④ 雙向綁定指令

⑤ 條件渲染指令

⑥ 列表渲染指令

注意:指令是 vue 開發(fā)中最基礎、最常用、最簡單的知識點。

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

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

? v-text

? {{ }}

? v-html

v-text

用法示例:

<!--把 username對應的值,渲染到第一個p標簽中-->
<p v-text="username"></p>

<!---把 gender 對應的值,渲染到第二個p 標簽中-->
<!--注意:第二個p標簽中,默認的文本“性別”會被gender的值覆蓋掉-->
<p v-text="gender">性別</p>o

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

{{ }} 語法

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

式(英文名為:Mustache)。

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

注意:相對于 v-text 指令來說,插值表達式在開發(fā)中更常用一些!因為它不會覆蓋元素中默認的文本內(nèi)容

v-html

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

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

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

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

v-html渲染結(jié)果

1.2 屬性綁定指令

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

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

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

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

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

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

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

使用 Javascript 表達式

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

{{ 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 對象有 onclick、oninput、onkeyup 等原生事件,替換為 vue 的事件綁定形式后,分別為:v-on:click、v-on:input、v-on:keyup

通過 v-on 綁定的事件處理函數(shù),需要在 methods 節(jié)點中進行聲明:

const vm = new Vue({
            el: '#app',
            data: { count: 0 },
           
            methods: {         // v-on綁定的事件處理函數(shù),需要聲明在 methods 節(jié)點中
                addCount() { //事件處理函數(shù)的名字
                    // this 表示當前 new 出來的 vm 實例對象,
                    //通過 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:簡寫為@符號-->
    <!--如果事件處理函數(shù)中的代碼足夠簡單,只有一行代碼,則可以簡寫到行內(nèi)-->
    <button @click="count += 1">+1</button>
</div>

事件對象 event

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

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

綁定事件并傳參

在使用 v-on 指令綁定事件時,可以使用 ( ) 進行傳參,示例代碼如下:

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

事件修飾符

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

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

語法格式如下:

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

按鍵修飾符

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

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

  <!--只有在‘key’是‘Esc’時調(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 指令的修飾符

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

1640067486183_3個修飾符.png

1.5條件渲染指令

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

? v-if

? v-show

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

實現(xiàn)原理不同:

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

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

性能消耗不同:

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

? 如果在運行時條件很少改變,則使用 v-if 較好

v-else

v-if 可以單獨使用,或配合 v-else 指令一起使用:

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

v-else-if

v-else-if 指令,顧名思義,充當 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ā)者基于一個數(shù)組來循環(huán)渲染相似的 UI 結(jié)構(gòu)。 v-for 指令需要使用 item in items 的特殊語法,其中:

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

? item 是當前的循環(huán)項

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 指令還支持一個可選的第二個參數(shù),即當前項的索引。語法格式為 (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 項和 index 索引都是形參,可以根據(jù)需要進行重命名。例如 (user, i) in userlist

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

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

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

key 的注意事項

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

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

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

④ 使用 index 的值當作 key 的值沒有任何意義(因為 index 的值不具有唯一性)

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

2.過濾器

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

hello -> Hello

過濾器應該被添加在 JavaScript 表達式的尾部,由“管道符”進行調(diào)用,示例代碼如下

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

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

過濾器可以用在兩個地方:插值表達式和 v-bind 屬性綁定

2.1 定義過濾器

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

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

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

過濾器應該被添加在 JavaScript 表達式的尾部,由“管道符”進行調(diào)用,示例代碼如下:

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

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

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

在 filters 節(jié)點下定義的過濾器,稱為“私有過濾器”,因為它只能在當前 vm 實例所控制的 el 區(qū)域內(nèi)使用。如果希望在多個 vue 實例之間共享過濾器,則可以按照如下的格式定義全局過濾器

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

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

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

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

示例代碼如下:

<!--串聯(lián)調(diào)用多個過濾器-->
<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)用多個過濾器-->
<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ù)的形參列表中:
//   第一個參數(shù):永遠都是”管道符“前面待處理的值
//   從第二個參數(shù)開始,才是調(diào)用過濾器時傳遞過來的arg1和arg2參數(shù)
Vue.filter('filterA', (msg, arg1, arg2) => {
  //過濾器的代碼邏輯...
})

示例代碼如下:

<!--調(diào)用 maxLength 過濾器時傳參-->
<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) + '.…'
})

2.5 過濾器的兼容性

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

在企業(yè)級項目開發(fā)中:

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

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

具體的遷移指南,請參考 vue 3.x 的官方文檔給出的說明:

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

IT培訓班






猜你喜歡:

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

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

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

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

黑馬程序員HTML前端開發(fā)培訓

分享到:
在線咨詢 我要報名
和我們在線交談!