模版插值语法
介绍插值语法前，先简单介绍下app.vue的文件，分为三个板块
<template>
</template>
<script setup lang="ts">
</script>
<style>
</style>- template:用于存放页面元素
- script：用于存放页面逻辑代码
- style：用于存放样式
什么是模版语法
Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。
在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。
如果你对虚拟 DOM 的概念比较熟悉，并且偏好直接使用 JavaScript，你也可以结合可选的 JSX 支持直接手写渲染函数而不采用模板。但请注意，这将不会享受到和模板同等级别的编译时优化。
文本插值
最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：
如下例子，在网页中打印一个hello：
<div>
{{str}}
</div>
<script setup lang="ts">
const str: String = 'hello'
</script>
<style>
</style>
插值中也能写一些简单的表达式
如：用三元表达式判断真假
还可以进行计算
也可以调用API
Vue的常用指令
v- 开头都是vue 的指令
v-text 用来显示文本
除了直接用模版语法渲染，也可以使用v-text来显示文本
v-html 用来展示富文本
可以通过v-html来渲染成标签
v-if 用来控制元素的显示隐藏（切换真假DOM）
v-if 如果判断为false，则会将当前的标签隐藏。原理是通过注释掉整个节点
v-else-if 表示 v-if 的“else if 块”。可以链式调用
v-else v-if条件收尾语句
v-show 用来控制元素的显示隐藏
同样用于控制标签显示隐藏的还有v-show，它是通过控制css display属性实现隐藏或出现
v-on 简写@ 用来给元素添加事件
v-on则是用来绑定事件的，如我们要为标签绑定一个click事件 v-on也可以简写为@
如果标签的父级也绑定了一个事件，那么在调用的时候会连同父级的一起调用，这是事件冒泡的原因
可以使用.stop来阻止事件冒泡
拓展一个click.prevent方法，表单中的button一旦点击就会提交并自动刷新页面。可以通过prevent方法来阻止刷新
v-bind 简写: 用来绑定元素的属性Attr
v-bind用于绑定当前标签的元素
下面例子中，自定义了一个名为Style的数据类型
也可以通过绑定来指定多个属性值
还可以通过条件判断来决定使用哪个属性
也可以通过传入对象的方式
v-for 用来遍历元素
v-for是vue中的循环，你可以用它来进行遍历
也可以用它来遍历对象
v-model 双向绑定
双向绑定v-model一般用于绑定表单元素
引入ref来实现属性劫持，实现响应式，从而更新视图
