[教程]Vue3模板语法：轻松上手，实战案例解析

Vue.js 是一款流行的前端JavaScript框架，用于构建用户界面和单页应用。Vue3 是 Vue.js 的第三个主要版本，它带来了许多新特性和改进。模板语法是 Vue3 中用于声明性地描述视图...

Vue.js 是一款流行的前端JavaScript框架，用于构建用户界面和单页应用。Vue3 是 Vue.js 的第三个主要版本，它带来了许多新特性和改进。模板语法是 Vue3 中用于声明性地描述视图的结构和数据的工具。本文将详细介绍 Vue3 的模板语法，并通过实战案例帮助您轻松上手。

模板语法基础

Vue3 的模板语法主要基于 HTML，但它允许你在其中插入 Vue 的指令和插值表达式。以下是一些基础的模板语法：

插值表达式

插值表达式允许你将数据绑定到视图。它使用 {{ }} 来包围表达式。

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

这里，message 是一个响应式数据属性。

指令

指令是一组以 v- 开头的特殊属性，它们用于在模板中插入或操作 DOM。

条件渲染

v-if 指令用于条件性地渲染一块内容。

<div v-if="seen">现在你看到我了</div>

当 seen 的值为 true 时，这行内容会被渲染。

列表渲染

v-for 指令用于基于一个数组渲染一个列表。

<ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

这里，items 是一个包含对象的数组。

表单绑定

v-model 指令用于创建双向数据绑定。

<input v-model="message">

输入框的内容将实时更新 message 的值。

实战案例解析

案例一：用户列表

假设我们需要创建一个用户列表，每个用户都有姓名和年龄。

<div id="app"> <ul> <li v-for="user in users" :key="user.id"> {{ user.name }} - {{ user.age }} </li> </ul>
</div>
<script>
import { createApp } from 'vue';
const app = createApp({ data() { return { users: [ { id: 1, name: '张三', age: 25 }, { id: 2, name: '李四', age: 30 }, { id: 3, name: '王五', age: 28 } ] }; }
});
app.mount('#app');
</script>

案例二：表单验证

创建一个简单的表单，并使用 v-model 和 v-if 进行验证。

<div id="app"> <form @submit.prevent="submitForm"> <input v-model="formData.name" placeholder="请输入姓名"> <span v-if="!formData.name">姓名不能为空</span> <button type="submit">提交</button> </form>
</div>
<script>
import { createApp } from 'vue';
const app = createApp({ data() { return { formData: { name: '' } }; }, methods: { submitForm() { if (this.formData.name) { alert('提交成功！'); } else { alert('请输入姓名！'); } } }
});
app.mount('#app');
</script>

通过以上两个案例，我们可以看到 Vue3 的模板语法是如何帮助我们在前端开发中实现动态和响应式的用户界面。

总结

Vue3 的模板语法使得前端开发更加高效和直观。通过使用插值表达式和指令，我们可以轻松地将数据绑定到视图，并实现复杂的功能。通过本文的实战案例，相信您已经对 Vue3 的模板语法有了更深入的了解。希望这些知识能够帮助您在未来的项目中更好地使用 Vue3。