日期：2024年7月2日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 <script setup> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

---

---

---

一、前言

在 Vue 的世界里，模板语法是连接数据与视图的桥梁，它让数据驱动界面的概念变得生动而具体。接下来，就让我们一起深入了解 Vue3 的模板语法吧！

二、什么是 Vue3 模板语法？

Vue3 的模板语法是一种声明式的渲染方式，它允许我们将 Vue 实例的数据绑定到 DOM 上。这意味着我们可以通过简洁的模板语法来描述用户界面，而无需手动操作 DOM。

在 Vue3 中，模板通常写在 <template> 标签内。以下是一个简单的示例：

javascript"><template>
  <div>
    <h1>{
   {
    message }}</h1>
  </div>
</template>

在上述代码中， { { message }} 就是一个使用模板语法的表达式，用于显示变量 message 的值。

三、数据绑定

1、文本插值

在 Vue3 中，最基本的模板语法就是文本插值 （Interpolation）。使用双大括号 { { }} 可以将数据绑定到模板的文本中。当数据变化时，绑定的文本也会自动更新。

javascript"><template>
  <div>
    <h1>{
   {
    message }}</h1>
  </div>
</template>

<script setup>
	import {
    ref } from 'vue';
	let message = ref("Hello Commas");
</script>

2、属性绑定

属性绑定用于将数据绑定（Data Binding）到 HTML 元素的属性。在 Vue3 中，我们使用 v-bind 指令 或者简写的 冒号（:）。例如：

javascript"><template>
  <div>
  
  	<-- NO1：完整写法 -->
    < img v-bind:src="imageSrc" alt="图片">
    
	<-- NO2：省略v-bind -->
    < img :src="imageSrc" alt="图片">
    
  <