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>