模板语法：
1- {{}} (大胡子语法)
- 文本插值 <p> {{ 表达式 | Vue数据 }} </p>
- Vue数据在{{}}内部直接写数据名即可！！！
2- 指令 ： 以 “ v-** ”开头的
- 用在标签属性里 <p v-***></p>
选项
- 在createApp()方法中以`对象形式`传递进去的参数，其中对象的每个指定Key就是选项
data选项
- data选项后面跟着的是：返回值为对象的函数
Vue.createApp({
data(){
return {
数据名： 数据值
}
}
}).mount("#app");
<div id="app"> {{数据名}} </div>
Vue通过数据绑定实现了数据与页面相分离，从而实现了数据驱动视图的效果。即将页面中的数据分离出来，放到组件的<script>标签中，通过程序操作数据，并且当数据改变时，页面会自动发生改变。
数据绑定分为定义数据和输出数据。
1. 定义数据
由于数据和页面是分离的，在实现数据显示之前，需要先在<script>标签中定义组件所需的数据。
定义数据的语法格式如下：
<script>
export default {
setup() {
return {
数据名: 数据值,
……
}
}
}
</script>
为了让代码更简洁，Vue 3提供了setup语法糖（Syntactic Sugar），使用它可以简化上述语法，提高开发效率。
使用setup语法糖来定义数据的语法格式如下：
<script setup>
const 数据名 = 数据值
</script>
2. 输出数据
Vue为开发者提供了Mustache语法（又称为双大括号语法），使用该语法时相当于在模板中放入占位符，其语法格式如下：
{{ 数据名 }}
当页面渲染时，模板中的{{ 数据名 }}会被替换为实际的数据
在Mustache语法中还可以将表达式的值作为输出内容。表达式的值可以是字符串、数字等类型，示例代码如下。
{{ 'Hello Vue.js' }}
{{ number + 1 }}
{{ obj.name }}
{{ ok ? 'YES' : 'NO' }}
{{ '<div>HTML标签</div>' }}
前面学习的方式是通过Vite创建一个新的项目，这个项目中不仅有Vue，而且整合了一系列辅助开发的工具。
其实Vue的使用方式非常灵活，它还提供了另一种使用方式，就是将Vue引入HTML页面中。但这种方式只能使用Vue的核心功能，所以只适合开发一些简单的页面，在实际开发中一般不用这种方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World案例</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
</body>
</html>
在页面中定义一个用于被Vue应用实例控制的DOM区域，使开发者可以将数据填充到该DOM区域中。
<div id="app">
<p>{{ message }}</p>
</div>
在</body>结束标签前编写代码，创建Vue应用实例。
<script>
const vm = Vue.createApp({
setup() {
return {
message: 'Hello World!'
}
}
})
vm.mount('#app')
</script>
如果想要实现页面中数据的更新，则需要进行响应式数据绑定，也就是将数据定义成响应式数据。
Vue为开发者提供了如下函数用于定义响应式数据:
ref()函数
reactive()函数
toRef()函数
toRefs()函数
1. ref()函数
ref()函数用于将数据转换成响应式数据，其参数为数据，返回值为转换后的响应式数据。使用ref()函数定义响应式数据的语法格式如下。
响应式数据 = ref(数据)
如果需要更改响应式数据的值，可以使用如下语法格式进行修改。
响应式数据.value = 新值
演示ref()函数的使用方法
<template>{{ message }}</template>
<script setup>
import { ref } from 'vue'
const message = ref('会当凌绝顶，一览众山小')
setTimeout(() => {
message.value = '锲而不舍，金石可镂'
}, 2000)
</script>
2. reactive()函数
reactive()函数用于创建一个响应式对象或数组，将普通的对象或数组作为参数传给该函数即可。
使用reactive()函数定义响应式数据的语法格式如下。
响应式对象或数组 = reactive(普通的对象或数组)
演示reactive()函数的使用方法
<template>{{ obj.message }}</template>
<script setup>
import { reactive } from 'vue'
const obj = reactive({ message: '不畏浮云遮望眼，自缘身在最高层' })
setTimeout(() => {
obj.message = '欲穷千里目，更上一层楼'
}, 2000)
</script>
3. toRef()函数
toRef()函数用于将响应式对象中的单个属性转换为响应式数据。
使用toRef()函数定义响应式数据的语法格式如下。
响应式数据 = toRef(响应式对象, '属性名')
toRef()函数的第1个参数是响应式对象，第2个参数是待转换的属性名，返回值为转换后的响应式数据。
演示toRef()函数的使用方法
<template>
<div>message的值：{{ message }}</div>
<div>obj.message的值：{{ obj.message }}</div>
</template>
<script setup>
import { reactive, toRef } from 'vue'
const obj = reactive({ message: '黑发不知勤学早，白首方悔读书迟' })
const message = toRef(obj, 'message')
setTimeout(() => {
message.value = '少壮不努力，老大徒伤悲'
}, 2000)
</script>
4. toRefs()函数
toRefs()函数用于将响应式对象中的所有属性转换为响应式数据。
使用toRefs()函数定义响应式数据的语法格式如下。
所有属性组成的对象 = toRefs(响应式对象)
演示toRefs()函数的使用方法
<template>
<div>message的值：{{ message }}</div>
<div>obj.message的值：{{ obj.message }}</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
const obj = reactive({ message: '盛年不重来，一日难再晨' })
let { message } = toRefs(obj)
setTimeout(() => {
message.value = '及时当勉励，岁月不待人'
}, 2000)
</script>
