持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情
MVVM是什么？
MVVM ,全称为：Model-View-ViewModel，是一种基于前端开发的架构模式，它的核心是提供对 View 和 ViewModel 的双向数据绑定，这使得 View 的变化会自动更新到 ViewModel，ViewModel 的变化也会自动同步到View 上显示，即所谓的“数据双向绑定”。
1.View? 表示视图，即 DOM；对应 HTML 部分（代表 UI 组件），它负责将数据模型转化成 UI 展现出来。
2.Model？
表示模型，即数据模型；对应 Vue 组件里的 data，或者说是 vuex 里的数据；也可以在 Model 中定义数据修改和操作的业务逻辑。
3.ViewModel？
即监听模型数据，也就是 data 的的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model模型 和 View视图。
指令篇
v-text和v-html
- v-text
v-text可用于更新元素的文本内容
v-text可设置元素内容，如果数据中有HTML标签会将html标签一并输出 - v-html
v-html可用于更新元素的innerHtml
v-html可设置元素内容，如果数据中有HTML标签会被解析为html元素一并输出
<template>
<div>
<div v-text="textData"></div>
<div v-html="htmlData"></div>
</div>
</template>
<script>
import {ref} from "vue"
export default {
setup() {
const textData = ref("这里展示的只有文字")；
const htmlData = ref("<span style="color:red">这里展示的文字是红色的哦</span>")；
return {
textData,htmlData
}
}
}
</script>
v-show和v-if
- v-show
显示/隐藏元素（通过css属性display:none控制，不删除元素）
适合频繁切换，有更高的初始渲染消耗 - v-if
显示/隐藏元素（卸载）
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
v-if是惰性的，条件第一次变为真时才开始局部编译
<template>
<div>
<div v-show="show">123</div>
<div v-if="show">456</div>
</div>
</template>
<script>
export default {
setup() {
const show = true;
return {
show
}
}
}
</script>
