在本篇文章中，我们将一起从零开始构建一个简单的 Todo 应用。这将帮助你更好地理解 Vue 的基本概念和如何使用 Vue 来管理用户界面的交互和数据。
Todo 应用是前端开发中常见的入门项目，它可以帮助我们掌握 Vue 的核心特性，如数据绑定、事件处理、组件化开发等。
一、准备工作
首先，确保你已经安装了 Node.js 和 Vue CLI。如果你还没有安装，可以按照以下步骤进行安装：
-
安装 Vue CLI：
bashnpm install -g @vue/cli
安装完成后，我们可以使用 Vue CLI 创建一个新的项目：
bash
vue create todo-app在创建过程中，选择默认的配置选项，Vue CLI 会为你设置好所有的基础配置。创建完成后，进入项目文件夹并启动开发服务器：
bash
cd todo-app
npm run serve打开浏览器并访问 http://localhost:8080，你会看到 Vue 的默认欢迎页面。
二、构建 Todo 应用
接下来，我们将按照以下步骤逐步构建我们的 Todo 应用。
1. 设计应用结构
我们将构建一个简单的 Todo 应用，包含以下功能：
- 输入框：用于输入新的 Todo 项。
- Todo 列表：显示所有的 Todo 项。
- 删除按钮：删除已完成的 Todo 项。
- 标记已完成：点击 Todo 项来标记它为已完成。
在 Vue 中，我们将通过一个单一的组件来完成这些功能。我们会将整个应用的模板、逻辑和样式都写在一个文件中。
2. 修改 App.vue
首先，打开 src/App.vue 文件，并将它的内容替换为以下代码：
vue
<template>
<div id="app">
<h1>Todo 应用</h1>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入新的任务" />
<ul>
<li v-for="(todo, index) in todos" :key="index" :class="{ completed: todo.completed }">
<span @click="toggleComplete(todo)">{{ todo.text }}</span>
<button @click="removeTodo(index)">删除</button>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
newTodo: '',
todos: [
{ text: '学习 Vue.js', completed: false },
{ text: '做练习题', completed: false },
{ text: '查看项目文档', completed: false }
]
};
},
methods: {
addTodo() {
if (this.newTodo.trim()) {
this.todos.push({ text: this.newTodo.trim(), completed: false });
this.newTodo = '';
}
},
removeTodo(index) {
this.todos.splice(index, 1);
},
toggleComplete(todo) {
todo.completed = !todo.completed;
}
}
};
</script>
<style scoped>
#app {
text-align: center;
}
input {
padding: 10px;
margin-bottom: 20px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
margin: 5px 0;
background-color: #f4f4f4;
cursor: pointer;
}
li.completed {
text-decoration: line-through;
color: #aaa;
}
button {
background-color: red;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}
button:hover {
background-color: darkred;
}
</style>三、代码解析
1. 模板部分
vue
<template>
<div id="app">
<h1>Todo 应用</h1>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入新的任务" />
<ul>
<li v-for="(todo, index) in todos" :key="index" :class="{ completed: todo.completed }">
<span @click="toggleComplete(todo)">{{ todo.text }}</span>
<button @click="removeTodo(index)">删除</button>
</li>
</ul>
</div>
</template>v-model="newTodo"：将输入框的值绑定到newTodo数据属性。@keyup.enter="addTodo"：当用户按下Enter键时，调用addTodo方法添加新的 Todo 项。v-for="(todo, index) in todos"：遍历todos数组，生成每个 Todo 项。:class="{ completed: todo.completed }"：当 Todo 项被标记为已完成时，应用completed类来为其添加删除线样式。@click="toggleComplete(todo)"：点击 Todo 项时切换其完成状态。@click="removeTodo(index)"：点击删除按钮时删除该 Todo 项。
2. 脚本部分
javascript
<script>
export default {
name: 'App',
data() {
return {
newTodo: '',
todos: [
{ text: '学习 Vue.js', completed: false },
{ text: '做练习题', completed: false },
{ text: '查看项目文档', completed: false }
]
};
},
methods: {
addTodo() {
if (this.newTodo.trim()) {
this.todos.push({ text: this.newTodo.trim(), completed: false });
this.newTodo = '';
}
},
removeTodo(index) {
this.todos.splice(index, 1);
},
toggleComplete(todo) {
todo.completed = !todo.completed;
}
}
};
</script>newTodo用于存储输入框的值，todos用于存储所有的 Todo 项。addTodo方法用于添加新的 Todo 项。它会检查输入框是否为空，如果不为空，则将新的 Todo 项添加到todos数组中。removeTodo方法用于删除指定的 Todo 项。toggleComplete方法用于切换 Todo 项的完成状态。
3. 样式部分
css
<style scoped>
#app {
text-align: center;
}
input {
padding: 10px;
margin-bottom: 20px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
margin: 5px 0;
background-color: #f4f4f4;
cursor: pointer;
}
li.completed {
text-decoration: line-through;
color: #aaa;
}
button {
background-color: red;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}
button:hover {
background-color: darkred;
}
</style>scoped样式仅对当前组件生效，不会影响其他组件。- 我们为每个 Todo 项添加了背景颜色，并且已完成的 Todo 项会有删除线效果。
四、总结
通过本篇文章的学习，你应该已经能够从零开始搭建一个简单的 Todo 应用，并掌握了 Vue 的一些核心概念和技巧：
- 使用
v-model双向绑定输入框的值。 - 使用
v-for遍历数组并渲染列表。 - 使用事件处理方法实现交互（添加、删除和标记完成）。
- 使用 Vue 的响应式机制自动更新 UI。
这个简单的 Todo 应用是一个非常好的 Vue 入门项目，能够帮助你理解 Vue 的基本使用方式，并为更复杂的项目打下基础。随着你对 Vue 的深入了解，你将能实现更加丰富和复杂的功能。