一、模板語法

插值表達(dá)式 {{ data }} 可以用于渲染 Vue 中提供的數(shù)據(jù)。

數(shù)字化管理平臺(tái)
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
權(quán)限系統(tǒng)-商城
個(gè)人博客地址

<script setup>
    import {ref} from "vue"
    const message = ref("Hello Vue3!!")
    const num = ref(10)
</script>
<template>
  <div class="message">{{message}} ~ {{num + 10}}</div>
  <div>{{ ok ? 'YES' : 'NO' }}</div>
  <div>{{ message.split('').reverse().join('') }}</div>
</template>
<style lang="scss" scoped>
.message {
  color: red;
  font-weight: bold;
  font-family: "楷體","MicroSoft Yahei";
}
</style>

注：vue中的插值提供了真正的js環(huán)境，因此我們可以直接使用 JS 表達(dá)式

二、基礎(chǔ)指令

2.1 概述

• 指令是什么

  指令就是一個(gè)自定義屬性，Vue中的指令都是以 v- 開頭

• {{}} 插值表達(dá)式渲染頁面閃爍問題

  代碼加載的時(shí)候先加載 HTML 把插值語法當(dāng)做 HTML 內(nèi)容加載到頁面上 當(dāng)加載完 js 后才把插值語法替換掉 所以我們會(huì)看到閃爍問題

• v-cloak 指令解決插值語法的閃爍問題

  原理：先隱藏，替換好值之后再顯示最終的值

  //CSS中提供樣式設(shè)置
  [v-cloak] {
  	display: none;
  }
  
  //在插值表達(dá)式標(biāo)簽中添加v-cloak指令
  <div id="app" v-cloak>{{ title }} === {{ num + 10 }}</div>
  

2.2 基礎(chǔ)指令

• v-text 更新元素的文本內(nèi)容

  v-text 通過設(shè)置元素的 textContent 屬性來工作，因此它將覆蓋元素中所有現(xiàn)有的內(nèi)容。如果想要替換指定的部分內(nèi)容，請使用插值表達(dá)式（mustache interpolations）代替。

  <span v-text="msg"></span>
  <!-- 等同于 -->
  <span>{{msg}}</span>
  

• v-html 更新元素的 innerHTML

  v-html 的內(nèi)容直接作為普通 HTML 插入—— Vue 模板語法是不會(huì)被解析的。如果你發(fā)現(xiàn)自己正打算用 v-html 來編寫模板，不如重新想想怎么使用組件來代替。

  <p>Using text interpolation: {{ rawHtml }}</p>
  <p>Using v-html directive: <span v-html="rawHtml"></span></p>
  

  在你的站點(diǎn)上動(dòng)態(tài)渲染任意的 HTML 是非常危險(xiǎn)的，因?yàn)樗苋菀讓?dǎo)致 XSS 攻擊。請只對(duì)可信內(nèi)容使用 HTML 插值，絕不要將用戶提供的內(nèi)容作為插值。

• v-once 僅渲染元素和組件一次，并跳過之后的更新

  執(zhí)行一次性的插值（當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)繼續(xù)更新）

  應(yīng)用場景：顯示的信息后續(xù)不需要再修改，可以使用 v-once 指令來提高性能

  <!-- 單個(gè)元素 -->
  <span v-once>This will never change: {{msg}}</span>
  <!-- 帶有子元素的元素 -->
  <div v-once>
    <h1>comment</h1>
    <p>{{msg}}</p>
  </div>
  <!-- 組件 -->
  <MyComponent v-once :comment="msg" />
  <!-- `v-for` 指令 -->
  <ul>
    <li v-for="i in list" v-once>{{i}}</li>
  </ul>
  

• v-pre 跳過該元素及其所有子元素的編譯

  元素內(nèi)具有 v-pre，所有 Vue 模板語法都會(huì)被保留并按原樣渲染。最常見的用例就是顯示原始雙大括號(hào)標(biāo)簽及內(nèi)容。

  <span v-pre>{{ this will not be compiled }}</span>
  

- v-memo 期望的綁定值類型（了解）

Vue3.2版本新增指令。期望的綁定值類型：any[]

緩存一個(gè)模板的子樹。在元素和組件上都可以使用。為了實(shí)現(xiàn)緩存，該指令需要傳入一個(gè)固定長度的依賴值數(shù)組進(jìn)行比較。如果數(shù)組里的每個(gè)值都與最后一次的渲染相同，那么整個(gè)子樹的更新將被跳過。

<div v-memo="[valueA, valueB]">
  ...
</div>

當(dāng)組件重新渲染，如果 valueA 和 valueB 都保持不變，這個(gè) `` 及其子項(xiàng)的所有更新都將被跳過。實(shí)際上，甚至虛擬 DOM 的 vnode 創(chuàng)建也將被跳過，因?yàn)榫彺娴淖訕涓北究梢员恢匦率褂谩?/p>

正確指定緩存數(shù)組很重要，否則應(yīng)該生效的更新可能被跳過。v-memo 傳入空依賴數(shù)組 (v-memo="[]") 將與 v-once 效果相同。

**v-memo 僅用于性能至上場景中的微小優(yōu)化，應(yīng)該很少需要。**最常見的情況可能是有助于渲染海量 v-for 列表 (長度超過 1000 的情況)：

<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
  <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
  <p>...more child nodes</p>
</div>

當(dāng)組件的 selected 狀態(tài)改變，默認(rèn)會(huì)重新創(chuàng)建大量的 vnode，盡管絕大部分都跟之前是一模一樣的。v-memo 用在這里本質(zhì)上是在說“只有當(dāng)該項(xiàng)的被選中狀態(tài)改變時(shí)才需要更新”。這使得每個(gè)選中狀態(tài)沒有變的項(xiàng)能完全重用之前的 vnode 并跳過差異比較。注意這里 memo 依賴數(shù)組中并不需要包含 item.id，因?yàn)?Vue 也會(huì)根據(jù) item 的 :key 進(jìn)行判斷。

當(dāng)搭配 v-for 使用 v-memo，確保兩者都綁定在同一個(gè)元素上。v-memo 不能用在 v-for 內(nèi)部。

v-memo 也能被用于在一些默認(rèn)優(yōu)化失敗的邊際情況下，手動(dòng)避免子組件出現(xiàn)不需要的更新。但是一樣的，開發(fā)者需要負(fù)責(zé)指定正確的依賴數(shù)組以免跳過必要的更新。文章來源地址http://www.zghlxwxcb.cn/news/detail-691665.html

<script setup>
	const arr = [1,2,3]
</script>
<template>
	// 這里 v-memo 條件成立的話跳過更新
	<div v-for="item in arr" v-memo="[item == 2]"></div>
</template>

到了這里，關(guān)于【Vue3 知識(shí)第三講】模板語法、Vue3指令的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！