vue6大指令和渲染器的用法

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

1.指令的概念：

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

① 內容渲染指令

② 屬性綁定指令

③ 事件綁定指令

④ 雙向綁定指令

⑤ 條件渲染指令

⑥ 列表渲染指令

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

1.1內容渲染指令

內容渲染指令用來輔助開發(fā)者渲染 DOM 元素的文本內容。常用的內容渲染指令有如下 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 指令會覆蓋元素內默認的值

{{ }} 語法

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

式(英文名為：Mustache)。

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

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

v-html

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

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

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

最終渲染的結果為：

v-html渲染結果

1.2 屬性綁定指令

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

<！--假設有如下的data數據：
data: {
    inputValue:'請輸入內容'，
    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數據：
data: {
    inputValue:'請輸入內容'，
    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 提供的模板渲染語法中，除了支持綁定簡單的數據值之外，還支持 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：事件名稱=“事件處理函數的名稱”-->
<button V-on:click="addCount">+1</button>

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

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

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

   })

事件綁定的簡寫形式

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

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

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

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

事件對象 event

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

<h3>count的值為：{{count}}</h3>
<button v-on:click="addCount">+1</button>
// ----------------------分割線----------------------
methods:{
    addCount(e){//接收事件參數對象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接收傳遞過來的參數值
    addNewCount(step) {
        this.count += step
        }
}

事件修飾符

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

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

語法格式如下：

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

按鍵修飾符

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

<！--只有在'key>是‘Enter>時調用'vm.submit（）-->
<input @keyup.enter="submit">

  <！--只有在‘key’是‘Esc’時調用 ‘vm.clearInput（）’-->
<input @keyup.esc="clearInput">

1.4雙向綁定指令

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

<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 指令的修飾符

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

1640067486183_3個修飾符.png

1.5條件渲染指令

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

? v-if

? v-show

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

實現原理不同：

? 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">
  隨機數大于0.5
</diV>
<div v-else>
  隨機數小于或等于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ā)者基于一個數組來循環(huán)渲染相似的 UI 結構。 v-for 指令需要使用 item in items 的特殊語法，其中：

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

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

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

v-for 中的索引

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

data: {
1ist：[ //列表數據
  { 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 索引都是形參，可以根據需要進行重命名。例如 (user, i) in userlist

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

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

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

key 的注意事項

① key 的值只能是字符串或數字類型

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

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

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

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

2.過濾器

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

hello -> Hello

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

<！--在雙花括號中通過“管道符”調用capitalize過濾器，對message的值進行格式化-->
<p>{{ message | capitalize }}</p>

<!--在 v-bind 中通過“管道符”調用 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) { //把首字母轉為大寫的過濾器
            return str.charAt(0).toUpperCase() + str.slice(1)
        }
    }
})

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

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

<！--在雙花括號中通過“管道符“調用capitalize過濾器，對message的值進行格式化-->
<p>{{ message | capitalize }}</p>

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

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

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

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

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

過濾器可以串聯地進行調用，例如：

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

示例代碼如下：

<！--串聯調用多個過濾器-->
<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) +
}）
<！--串聯調用多個過濾器-->
<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 過濾器傳參

過濾器的本質是 JavaScript 函數，因此可以接收參數，格式如下：

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

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

示例代碼如下：

<！--調用 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) + '.…'
})