Vue 3的模板语法基础可以分为模板插值、指令、事件绑定和计算属性四个部分。

模板插值

模板插值用于在模板中插入数据。在Vue 3中，使用双花括号将JavaScript表达式包裹起来，即可将其插入到模板中。例如：

<div>
{{ message }}
</div>

在上面的示例中，message是Vue实例中的一个数据属性，使用双花括号将其插入到模板中。

指令

指令用于在模板中添加动态行为。在Vue 3中，指令以v-开头，后面跟着指令名称。例如：

<button v-on:click="handleClick">Click me</button>

在上面的示例中，v-on是一个指令，用于绑定事件。click是指令的参数，表示要监听的事件类型。handleClick是Vue实例中的一个方法，当按钮被点击时会被调用。

事件绑定

事件绑定用于在模板中绑定事件处理程序。在Vue 3中，可以使用v-on指令或简写的@符号来绑定事件处理程序。例如：

<button v-on:click="handleClick">Click me</button>
<button @click="handleClick">Click me</button>

在上面的示例中，click是要绑定的事件类型，handleClick是Vue实例中的一个方法，当按钮被点击时会被调用。

计算属性

计算属性用于在模板中计算衍生属性。在Vue 3中，可以使用computed选项来定义计算属性。例如：

<template>
  <div>
    {{ fullName }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}
</script>

在上面的示例中，定义了一个计算属性fullName，它将firstName和lastName拼接起来返回。在模板中使用fullName，而不是firstName和lastName的组合，可以使模板更加简洁和可读。