回首Vue3之指令篇（二）｜8月更文挑戰

這是我參與8月更文挑戰的第2天，活動詳情查看：8月更文挑戰

對於v-html指令，咱們是不陌生的，若是你讀過回首Vue3之指令篇（一）｜8月更文挑戰，能夠類比作些相似的操做；若是沒有，那就讓咱們接着往下看吧。

如何使用

v-html指令是用來更新元素的 innerHTML。注意：內容按普通 HTML 插入 - 不會做爲 Vue 模板進行編譯。就是把你寫的html代碼插入到當前指令所在的元素內。

直接使用v-html指令，以下：

//數據
{
    html:"<span>hello world</span>"
}

//使用
<h1 v-html="html"></h1>


//編譯後的結果
<h1>
    <span>hello world</span>
</h1>
複製代碼

v-html相對於v-text在項目開發中無疑少了不少或者說不多使用（因人而異，但通常開發使用v-html的場景是比較少的），那麼什麼場景下咱們纔會使用呢？歡迎你們評論，說出你使用的場景，如下是我認爲能夠用到的場景。

1. 特殊需求，後端給的數據是html字符串並須要咱們去渲染
2. 使用table時，有時咱們須要某一項給不用的顏色或者樣式顯示，這時候咱們能夠插入一個內聯樣式標籤
3. 一個標籤下，須要展現多種標籤，可使用v-html指令
4. ......(等你評論)

自定義指令

Vue3中如何自定義一個指令？

上一篇文章咱們模擬了一個v-text指令，今天咱們來模擬一下v-html指令，咱們姑且就稱它爲v-chtml吧。

<div id="app">
    <h1 v-chtml="html"></h1>
</div>

<script src="../dist/vue.global.js"></script>
<script> const { createApp, ref } = Vue const app = createApp({ setup() { const html=ref("<span style='color:red'>hello world</span>") return { html } } }) // 自定義v-chtml改變當前元素的內容 app.directive('chtml',{ mounted(el,{value}){ el.innerHTML=value; } }) app.mount("#app") </script>
複製代碼

若是你讀過回首Vue3之指令篇（一）｜8月更文挑戰這篇文章，就能夠看出，自定義v-chtml與v-ctext指令基本相同，只有細微的差別。

innerHTML

從上述代碼中el.innerHTML=value能夠看出，咱們在替換el的內容時用的是innerHTML。指定的值被解析爲 HTML 或 XML（基於文檔類型），從而生成一個DocumentFragment對象，表示新元素的新 DOM 節點集。

總結

1. 官方提示：在網站上動態渲染任意 HTML 是很是危險的，由於容易致使 XSS 攻擊。只在可信內容上使用 v-html，永不用在用戶提交的內容上。

2. v-html與v-text有不少的類似性，咱們能夠類比學習，他們所作的本質都是改變當前元素的內容。