Vue 3 的模板语法和指令与 Vue 2 相比，大部分内容仍然是相同的，但是有一些新的改进和优化。以下是对 Vue 3 模板语法和指令的简要概述：

模板语法

Vue 3 的模板语法基于 HTML，允许你使用双大括号

{{ }}来绑定数据，以及使用v-前缀的指令来添加特殊功能。

数据绑定

你可以使用双大括号{{ }}来绑定数据到模板中：

<template><div><p>{{ message }}</p>  </div>
</template><script setup lang="ts">
const message = "hello!"
</script>
<style>
</style>

我们在{{}}中也可以编写一些条件运算：

<template><div><p>{{ message === 1 ? 'hello' : '你好'}}</p>  <p>{{ message + 2 }}</p>  </div>
</template><script setup lang="ts">
const message: number = 1
</script>
<style>
</style>

 指令

1. v-bind：用于绑定属性或动态绑定对象的值到元素上。

<img v-bind:src="imageSrc" />  
<!-- 或者简写为 -->  
<img :src="imageSrc" />

2. v-if、v-else-if：通过js控制元素是否进行渲染从而进行显示或隐藏。

<p v-if="score >= 90">Excellent</p>  
<p v-else-if="score >= 60">Good</p>  
<p v-else>Bad</p>

3. v-show：使用display:none进行显示或隐藏。

<p v-show="showMessage">Hello</p>

4. v-for: 用于循环数组和对象。

<div v-for="(item, index) in items" :key="index">  {{ item }}  
</div>

5. v-model：用于在表单元素和组件中双向绑定数据。

<input v-model="message" placeholder="edit me" />

6. v-on：用于绑定事件监听器。

<button v-on:click="handleClick">Click me</button>  
<!-- 或者简写为 -->  
<button @click="handleClick">Click me</button>

7. v-html：用于渲染包含 HTML 代码的字符串。

<div v-html="rawHtml"></div>

8. v-text：用于渲染纯文本内容。

<span v-text="message"></span>

9. v-slot：用于在父组件中定义插槽，在子组件中使用插槽内容。

<!-- 子组件 MyComponent.vue -->  
<template>  <div>  <slot></slot> <!-- 默认插槽 -->  </div>  
</template>  <!-- 父组件 App.vue -->  
<template>  <MyComponent>  <template v-slot>  <p>这是一些默认插槽的内容。</p>  </template>  </MyComponent>  
</template>

10. v-pre：用于跳过指定元素及其子元素的编译过程。

<span v-pre>{{ This will not be compiled }}</span>

11. v-cloak：用于防止页面闪烁。

<div v-cloak>  {{ message }}  
</div>

12. v-once ：让元素及其子元素只渲染一次。该指令的作用是将元素的内容渲染为静态内容，即使后续数据发生了变化，也不会重新渲染该元素。

<span v-once>This will never change: {{ message }}</span>

13. v-memo：大数据量场景下优化小部分性能（下一章单独讲解此指令的用法）