回首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有不少的类似性，咱们能够类比学习，他们所作的本质都是改变当前元素的内容。