模板语法
所谓模板，是 Vue 中构建视图的地方。
模板的写法基本上和 HTML 是一模一样的，上手无难度。
不过这个之所以被称之为模板，就是因为这个和之前的模板引擎类似，提供了一些不同于纯 HTML 的特性。
文本插值
可以在模板里面使用一对大括号（双大括号、猫须语法），括号内部就可以绑定动态的数据。
<template>
<div>{{ name }}</div>
</template>
<script setup>
const name = 'Steve'
</script>
<style lang="scss" scoped></style>
原始 HTML
有些时候，变量的值对应的是一段 HTML 代码，但是普通的文本插值只会将这段 HTML 代码原封不动的输出
例如：
<template>
<div>{{ htmlCode }}</div>
</template>
<script setup>
const htmlCode = '<span style="color:red">this is a test</span>'
</script>
<style lang="scss" scoped></style>
如果想要让上面的 HTML 字符串以 HTML 的形式渲染出来，那么需要指令。
指令是带有 v- 前缀的特殊属性。Vue 提供了一部分内置指令，开发者还可以自定义指令。
Vue 中所有内置的指令：https://cn.vuejs.org/api/built-in-directives.html
这里我们需要用到 v-html 的指令，例如：
<template>
<div v-html="htmlCode"></div>
</template>
<script setup>
const htmlCode = '<span style="color:red">this is a test</span>'
</script>
<style lang="scss" scoped></style>
绑定属性
Vue 中的核心思想，就是将模板中所有的东西都通过数据来控制，除了普通文本以外，属性应该由数据来控制，这就是所谓的属性绑定。
例如：
<template>
<div v-bind:id="id">hello</div>
</template>
<script setup>
const id = 'my-id'
</script>
<style lang="scss" scoped></style>
属性的动态绑定用得非常的多，因此有一种简写形式，直接用一个冒号（ : ）表示该属性是动态绑定的
<template>
<div :id="id">hello</div>
</template>
<script setup>
const id = 'my-id'
</script>
<style lang="scss" scoped></style>
另外还有一种简写形式，这种形式 Vue3.4 以上版本才能用，如果动态绑定的属性和数据同名，那么可以直接简写：
<template>
<div :id>hello</div>
</template>
<script setup>
const id = 'my-id'
</script>
<style lang="scss" scoped></style>
在 HTML 中，有一类属性是比较特殊的，就是布尔类型属性，例如 disabled，针对这一类布尔属性，绑定的数据不同，会有不同的表现
- 如果所绑定的数据是真值或者空字符串，该布尔值属性会存在
- 如果所绑定的数据是假值（null 和 undefined），该布尔值属性会被忽略
有些时候，如果想要绑定多个属性，那么这个时候可以直接绑定成一个对象：
<template>
<div v-bind="attrObj">hello</div>
</template>
<script setup>
const attrObj = {
id: 'container',
class: 'wrapper'
}
</script>
<style lang="scss" scoped></style>
使用 JS 表达式
目前为止，模板可以绑定数据，但是目前数据是什么，模板中就渲染什么。
但是实际上模板中是可以对要渲染的数据进行一定处理的，通过 JavaScript 表达式来进行处理。
<template>
<div>{{ number + 1 }}</div>
<div>{{ ok ? '晴天' : '雨天' }}</div>
<div>{{ message.split('').reverse().join('') }}</div>
<div :id="`list-${id}`">{{ id + 100 }}</div>
</template>
<script setup>
const number = 1
const ok = true
const message = 'hello'
const id = 1
</script>
<style lang="scss" scoped></style>
这里有一个关键点，就是你要区分什么是表达式，什么是语句
<!-- 这是一个语句，而非表达式 -->
{{ var a = 1 }}
<!-- 条件控制也不支持，请使用三元表达式 -->
{{ if (ok) { return message } }}
有一个简单的判断方法：看是否能够写在 return 后面。如果能够写在 return 后面，那么就是表达式，如果不能那么就是语句。
例如函数调用，其实就是一个表达式
return test();
{{ test() }}
模板沙盒化
模板中可以使用表达式，这些表达式都是沙盒化的，沙盒的意义主要在于安全，这里在模板中能够访问到全局对象，但是由于沙盒的存在，对能够访问到的全局对象进行了限制，只能访问 部分的全局对象
<template>
<div>{{ Math.random() }}</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
但是如果是不在上述列表中的，则无法访问到：
<template>
<div>{{ Math.random() }}</div>
<div>{{ Test.a }}</div>
</template>
<script setup>
window.Test = {
a: 1
}
</script>
<style lang="scss" scoped></style>
在上面的例子中，我们尝试给 window 挂载一个新的全局对象，然后在模板中进行访问，但是会报错：Cannot read properties of undefined (reading ‘a’)
如果真的有此需求，需要在 window 上挂载一个全局对象供模板访问，可以使用 app.config.globalProperties，例如：
// main.js
// import './assets/main.css'
import { createApp } from "vue";
// 引入了根组件
import App from "./App.vue";
// 挂载根组件
const app = createApp(App);
// 在这里新增全局对象属性
app.config.globalProperties.Test = {
a: "Hello, Global Object!",
};
app.mount("#app");