本篇博客将介绍如何使用Vue.js构建一个简单的待办事项应用。通过这个实战应用，你将学习到Vue.js的基本概念和用法，包括组件、指令、数据绑定等。让我们开始吧！
准备工作
在开始之前，确保你已经安装了Node.js和Vue.js。如果没有，请前往官网下载安装。
创建项目
首先，我们需要创建一个新的Vue项目。打开终端，进入你想要保存项目的文件夹，运行以下命令：
vue create vue-todo-list
然后，按照提示选择你想要的特性和插件。等待命令执行完毕后，进入项目文件夹：
cd vue-todo-list
编写代码
创建组件
我们将创建两个组件，分别是TodoList和TodoItem。打开src/components文件夹，创建TodoList.vue和TodoItem.vue文件。
在TodoList.vue中，编写以下代码：
<template>
<div>
<h2>Todo List</h2>
<div>
<input v-model="newTodo" placeholder="Enter a new todo item" />
<button @click="addTodo">Add</button>
</div>
<ul>
<TodoItem
v-for="(todo, index) in todos"
:key="index"
:todo="todo"
@delete="deleteTodo(index)"
></TodoItem>
</ul>
</div>
</template>
<script>
import TodoItem from './TodoItem.vue';
export default {
name: 'TodoList',
components: {
TodoItem,
},
data() {
return {
todos: [],
newTodo: '',
};
},
methods: {
addTodo() {
if (this.newTodo !== '') {
this.todos.push(this.newTodo);
this.newTodo = '';
}
},
deleteTodo(index) {
this.todos.splice(index, 1);
},
},
};
</script>
在TodoItem.vue中，编写以下代码：
<template>
<li>
<span>{{ todo }}</span>
<button @click="$emit('delete')">Delete</button>
</li>
</template>
<script>
export default {
name: 'TodoItem',
props: {
todo: String,
},
};
</script>
使用组件
现在我们需要在根组件中使用这些组件。打开src/App.vue文件，替换代码为以下内容：
<template>
<div id="app">
<TodoList />
</div>
</template>
<script>
import TodoList from './components/TodoList.vue';
export default {
name: 'App',
components: {
TodoList,
},
};
</script>
运行应用
现在，我们已经完成了代码的编写。在终端中运行以下命令启动应用：
npm run serve
打开浏览器，访问http://localhost:8080查看效果。
总结
通过这个实战应用，我们学习了如何使用Vue.js构建一个简单的待办事项应用。我们了解了Vue.js的基本概念和用法，包括组件、指令、数据绑定等。希望这篇博客能帮助你更好地掌握Vue.js的使用。如果你有任何问题或建议，欢迎留言讨论。谢谢阅读！
本文来自极简博客，作者：冬日暖阳，转载请注明原文链接：Vue.js实战：构建一个简单的待办事项应用（Vue.js实战应用）
