vue3学习

vue3生命周期理解

/**
 * beforeCreated:初始化一个空的Vue实例对象，methods方式和data数据还未初始化
 * created:()=>{},不能在选项 property 或回调上使用箭头函数，无法识别
 */
created(() => { }) //数据初始化完成，methods方式和data数据最早在created中使用
/**
 * beforeMount:代码中的指令在内存中编辑成模板，此时还未将该模板挂载到页面上，页面数据样式还是旧的
 * mounted:内存中编译好的模板挂载到浏览器的页面上,整个初始化完成;插件的使用，最早只能在mounted中进行;此时组件进入运行阶段
 */
onMounted(() => { })
/**
 * 组件运行阶段的生命周期函数只有两种：beforeUpdate,update
 * beforeUpdate:date中数据为最新数据，但页面上显示数据还是旧的，页面和数据没有同步进行
 * virtual DOM re-render and patch(虚拟DOM重新渲染和修补):完成数据从data(Model层)->view(视图层)的更新
 *          1、依据data最新数据在内存中重新渲染一份最新的DOM树
 *          2、当最新的内存DOM树被更新后，会把最新的DOM树重新渲染到浏览器页面中
 * update:执行时，页面和data数据实现同步，为最新数据
 */
onUpdated(() => { })
/**
 * beforeDestroy:运行时从运行阶段进入销毁阶段，此时data,methods所有方式,指令...等皆可使用，还未到真正销毁的过程
 * destroyed:组件已经被完全销毁，此时data,methods所有方式,指令...等不可使用
 */
destroyed(() => { })

模板语法——v-html指令

在vue3中，v-html 是一个特殊的指令，用于将元素的 innerHTML 属性设置为包含 Vue 模板语法的字符串。这意味着可以使用 v-html 来渲染 HTML 字符串。
例如：假设有一个变量 textHtml，其中包含一些 HTML 标记，可使用 v-html 指令将这个 HTML 内容渲染到vue元素中。

<template>
    <div v-html="textHtml"></div>
</template>
<script setup>
	let textHtml = '<h1 style="color:red;">这是html的内容</h1>'
</script>

结果：

注意：v-html指令不会解析Vue的模板语法（如{{}}、v-for等），它只是简单地将字符串内容作为HTML插入到元素中。
此外，使用v-html指令要小心，要确保插入的HTML内容是你完全信任的。插入不受信任的HTML可能会导致跨站脚本攻击（XSS）（绝不要将用户提供的内容作为插值）。
在大多数情况下，使用 Vue 的标准模板语法（如 {{ }}、v-for、v-if 等）来渲染内容通常是更安全、更易于维护的方法。v-html 指令主要用于那些需要直接插入原始 HTML 的特殊情况。

模板语法——缩写

指令的缩写是为了简化模板语法和提高可读性，常见指令缩写有：

• v-bind指令的缩写是 :(冒号)
  它用于动态地绑定一个或多个属性，或一个组件的 prop。

<!-- 使用完整的v-bind指令 -->
<img v-bind:src="imageSrc">

<!-- 使用缩写 -->
<img :src="imageSrc">

• v-on指令的缩写是@
  它用于监听 DOM 事件，并在触发时执行一些 JavaScript 代码。

<!-- 使用完整的 v-on 指令 -->  
<button v-on:click="handleClick">点击我</button>  
 
<!-- 使用缩写 -->  
<button @click="handleClick">点击我</button>