模板语法 template syntax

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。 在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。

文本插值

使用的是“Mustache”语法 (即双大括号)，用于将组件实例的数据绑定到模板中的文本节点上。 双大括号标签会被替换为相应组件实例中 message 属性的值。同时每次 message 属性更改时它也会同步更新。

<div>
  <p>{{ message }}</p>
</div>
<script setup>
import { ref } from 'vue'
const message = ref('Hello Vue!')
</script>