在这个章节中，简单的看下Vue3的基础语法，有了这些基础后，对写vue3单页也就没有什么问题了。
模板语法
在写html时，我们希望在某个节点绑定一个动态值时，是使用dom操作执行的，如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="zh-button"></div><div class="zh-button"></div><div class="zh-button"></div><script>window.onload = function() {const buttons = document.querySelectorAll('.zh-button');for (let button of buttons) {const spanDom = document.createElement('span');spanDom.innerHTML = '点击次数：'const timeDom = document.createElement('span');timeDom.innerHTML = '0';const buttonDom = document.createElement('button');buttonDom.textContent = '按钮';buttonDom.onclick = function() {const timeDom = button.querySelectorAll('span')[1];timeDom.innerHTML = ++timeDom.innerHTML;}button.appendChild(spanDom);button.appendChild(timeDom);button.appendChild(buttonDom);}}</script>
</body>
</html>
例如这里在点击按钮，利用修改innerHTML的方式，修改展示内容：
buttonDom.onclick = function() {const timeDom = button.querySelectorAll('span')[1];timeDom.innerHTML = ++timeDom.innerHTML;
}
那么如何在vue3中是如何实现的呢？
插值指令与Mustache语法
v-html、v-text、Mustache语法
<template><div class="box"><div class="mustache">使用mustache语法: {{ value }}</div><div class="html" v-html="'使用v-html:' + value"></div><div class="text" v-text="'使用v-text:' + value"></div><button @click="() => value = (new Date()).getTime()">改变文本</button></div>
</template><script setup>
import { ref } from 'vue';const value = ref('text');</script><style scoped></style>
响应式
这里正好也说下响应式的使用，使用ref就好了，至于reactive尽量就不要用了，这样子也不用区分是否需要使用.value了。
绑定属性
既然能动态绑定值，那么自然也能属性。
<div class="bind-id" :id="value" ></div>
语法呢，很简单，在属性前加上:就可以了，值使用变量填充。
类与样式
那么既然都能动态绑定属性值了，改如何写类与样式呢？这里vue3提供了不少的使用方式。
- class
- 绑定对象
- 绑定数组
- 直接在组件上使用
- style
- 绑定对象
- 绑定数组
- 直接在组件上使用
- 自动前缀
<template><div class="box"><h1>class使用</h1><div class="class">直接使用</div><div :class="{ active: true, disabled: false }">绑定对象</div><div :class="['active', 'disabled']">使用数组</div><h1>styel使用</h1><div style="color: red;">直接使用</div><div :style="{ color: 'red', backgroundColor: '#909090' }">绑定对象</div><div :style="[{color: 'red'}, { backgroundColor: 'blue' }]">使用数组</div></div>
</template><script setup>
</script><style scoped>
.active { color: red; }
.disabled { background-color: #909090;}
</style>常用的条件渲染指令
常用的条件渲染指令有v-if、v-show、v-for
v-if、v-show控制元素是否显示，v-for控制列表展示，示例如下：
<h1>条件渲染</h1><div class="vif" v-if="false">vif</div><div class="vshow" v-show="true">vshow</div><div class="vfor" v-for="(item, index) in [0,1,2]" :key="index">{{ item }}</div>
绑定事件
官网的图是这样子的：
v-on可以简写成@
拿点击事件举例，示例如下：
<h1>事件示例</h1><div @click="() => { console.log('hello world') }">点击两下</div>
计算属性和监听器就不放在这个模块说了，感觉放在生命周期一起比较好，下面再整体的来看看vue3的组件的基础构成，主要分为三个部分template,script,style,template主要负责提供渲染模板，script负责提供数据、交互方法等，style提供样式。vue3里面也提供了很多语法糖，让写vue3组件不像写原生那么复杂，没事的时候看看官网API，这些基础语法应该很快就能掌握。
