【Vue3 ✨】Vue3 入门之旅 · 第三篇：模板语法与数据绑定

本篇文章将带你深入了解 Vue3 中的 模板语法 和 数据绑定。我们将讲解如何使用 Vue3 提供的指令、绑定语法以及事件处理，帮助你在开发过程中灵活地操作 DOM 和组件数据。

---

目录

1. Vue3 模板语法概述
2. 插值与双向数据绑定
3. Vue3 常用指令
4. 事件处理与修饰符
5. 计算属性与监听器
6. 小结

---

Vue3 模板语法概述

Vue3 的模板语法主要基于 HTML，但它通过指令和绑定语法增强了原生 HTML 的功能。Vue3 模板允许开发者声明性地绑定数据到 DOM 元素上，实现动态更新和响应式行为。

Vue3 提供了一些常用的语法糖，比如插值语法、指令、事件处理等。了解和熟练掌握这些语法，能够让你高效地开发应用。

---

插值与双向数据绑定

1. 插值绑定

在 Vue3 中，插值绑定是最常用的方式之一。你可以通过 {{ }} 语法将 Vue 实例的数据插入到 DOM 中，进行动态展示。

<template><div><h1>{{ message }}</h1></div>
</template><script setup>
import { ref } from 'vue';const message = ref('Hello, Vue3!');
</script>

此时，message 的值将会被动态渲染到页面中。如果 message 发生变化，页面会自动更新。

2. 双向数据绑定：v-model

在 Vue3 中，双向绑定使用 v-model 实现。v-model 绑定一个数据源和 DOM 元素，任何一方的改变都会立即同步到另一方。

<template><input v-model="inputText" /><p>输入的内容是：{{ inputText }}</p>
</template><script setup>
import { ref } from 'vue';const inputText = ref('');
</script>

当用户在输入框中输入内容时，inputText 的值会自动更新，反之，inputText 发生变化时，输入框内容也会更新。

---

Vue3 常用指令

Vue3 提供了多种内置指令，帮助我们动态操作 DOM 元素。以下是一些常见指令的介绍：

1. v-bind

v-bind 用于动态绑定 HTML 属性。你可以将属性值与 Vue 数据源进行绑定，自动更新。

<template><img v-bind:src="imageSrc" />
</template><script setup>
import { ref } from 'vue';const imageSrc = ref('https://example.com/image.jpg');
</script>

2. v-if 和 v-show

v-if 和 v-show 用于条件渲染，控制元素是否显示。

• v-if：基于表达式的值来决定是否渲染 DOM 元素，适合用于大范围的元素切换。
• v-show：无条件渲染元素，但通过 CSS 控制显示与隐藏，适合频繁切换的元素。

<template><div v-if="isVisible">内容可见</div><div v-show="isVisible">内容始终渲染，只是隐藏</div>
</template><script setup>
import { ref } from 'vue';const isVisible = ref(true);
</script>

3. v-for

v-for 用于列表渲染，可以遍历数组或对象，并渲染列表项。

<template><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul>
</template><script setup>
import { ref } from 'vue';const items = ref([{ id: 1, name: 'Vue3' },{ id: 2, name: 'React' },{ id: 3, name: 'Angular' }
]);
</script>

4. v-on

v-on 用于监听 DOM 事件，执行方法或表达式，本质上是 @ 符号的完整写法。你可以在 Vue3 中通过 v-on 来绑定事件。

<template><button v-on:click="increment">点击增加</button>
</template><script setup>
import { ref } from 'vue';const count = ref(0);
const increment = () => count.value++;
</script>

---

事件处理与修饰符

Vue3 还提供了多种 事件修饰符，使得事件处理更加简洁。例如：

• .stop：阻止事件冒泡
• .prevent：阻止事件的默认行为
• .once：事件只触发一次

<template><button @click.stop="handleClick">点击我</button>
</template><script setup>
const handleClick = () => {console.log('按钮被点击，事件已停止冒泡');
};
</script>

---

计算属性与监听器

1. 计算属性：computed

计算属性用于根据其他数据源的变化，自动计算并缓存结果。

<template><p>原始数量：{{ count }}</p><p>翻倍数量：{{ doubleCount }}</p>
</template><script setup>
import { ref, computed } from 'vue';const count = ref(2);
const doubleCount = computed(() => count.value * 2);
</script>

2. 监听器：watch

watch 用于监听数据的变化并执行副作用操作。你可以在数据变化时做一些额外的处理。

<template><p>当前值：{{ count }}</p>
</template><script setup>
import { ref, watch } from 'vue';const count = ref(0);
watch(count, (newVal) => {console.log(`count 值变化为：${newVal}`);
});
</script>

---

小结

在本篇文章中，我们深入学习了 Vue3 模板语法 和 数据绑定 的基本用法。你已经了解了如何使用插值语法、双向数据绑定、常用指令、事件修饰符、计算属性和监听器等工具来实现动态更新和响应式行为。这些知识将帮助你高效地管理和渲染 Vue3 应用中的数据。

在接下来的文章中，我们将进一步探索 Vue3 组件管理与使用，并带你更好地理解如何通过 Vue3 构建可维护的项目。

---

📘 下一篇，我们将介绍 Vue3 组件基础：创建与传递数据，深入学习如何创建和使用 Vue3 组件。