vue3打开HTML

### 如何在 Vue 3 中正确地插入或处理 HTML

#### 使用 `v-html` 指令绑定 HTML 片段
为了安全地更新 DOM 的一部分而不使用模板语法，可以利用 `v-html` 指令来渲染信任的内容。需要注意的是，该指令会替换掉元素中的所有子节点。

<div id="app">
    <p v-html="dynamicHtml"></p>
</div>

<script type="module">
import { createApp, ref } from 'vue';

createApp({
    setup() {
        const dynamicHtml = ref('<strong>这是通过 JavaScript 动态设置的 HTML。</strong>');

        return {
            dynamicHtml,
        };
    },
}).mount('#app');
</script>

此代码片段展示了如何定义一段 HTML 字符串并将其作为变量传递给视图层，在页面加载时显示这段富文本[^1]。

#### 处理用户输入的安全性考量
当考虑将来自用户的任意数据注入到应用中时务必小心谨慎，因为这可能引发 XSS 攻击风险。因此建议仅对可信源的数据采用 `v-html` 方式呈现，并且尽可能避免直接嵌入未经验证过的外部内容。

#### 组件内部操作原生DOM
如果确实有需求直接操控DOM，则可以通过ref特性获取对应的真实DOM节点再做进一步的操作：

<template>
  <div>
    <!-- 定义一个具有ref属性的容器 -->
    <div ref="contentContainer"></div>
    
    <button @click="updateContent">点击修改内容</button>
  </div>
</template>

<script>
export default {
  name: "MyComponent",
  
  mounted(){
      // 初始化阶段可选执行某些逻辑
  },

  methods:{
     updateContent(){
         let container=this.$refs.contentContainer;
         
         // 更新指定区域内的HTML结构
         container.innerHTML="<h2>Hello World!</h2>";
     }
  }
}
</script>

上述例子说明了怎样借助于Vue框架提供的生命周期钩子函数以及自定义的方法去改变特定区域内所展示的信息[^2]。