第一阶段：Vue 基础入门（第 15天）

Vue 基础实战：开发一个简单的待办事项（Todo List）应用

在本教程中，我们将通过开发一个简单的待办事项（Todo List）应用，综合运用 Vue.js 的基础语法。这个应用将帮助你巩固对 Vue 核心概念的理解，包括插值表达式、指令（如 v-bind、v-on、v-model、v-for、v-if）、数据管理和事件处理。以下是逐步实现的指南。

核心知识点讲解

在开发 Todo List 应用时，我们需要掌握以下关键点：

插值表达式：用于在模板中显示数据，例如显示待办事项的文本。
v-bind：绑定 HTML 属性到 Vue 数据，如动态设置样式。
v-on：监听 DOM 事件，如点击按钮添加或删除事项。
v-model：实现表单输入的双向数据绑定，例如输入框内容。
v-for：遍历数组渲染列表，用于显示所有待办事项。
v-if 或 v-show：条件渲染，例如根据完成状态显示不同样式。
数据管理 ：在 Vue 实例中定义数据对象，如 todos 数组存储待办事项。
事件处理：定义方法处理用户交互，如添加、删除或切换完成状态。
样式绑定 ：使用 v-bind:class 或 v-bind:style 动态添加样式，例如为完成的待办事项添加划线效果。

接下来，我们将通过完整代码实现这些功能。

案例代码实现

以下是一个完整的 Vue Todo List 应用代码，包括 HTML 模板、Vue 实例定义和基本样式。确保你已经引入 Vue.js（例如通过 CDN）。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Todo List</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        .todo-list {
            max-width: 500px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-family: Arial, sans-serif;
        }
        .input-group {
            display: flex;
            margin-bottom: 15px;
        }
        .input-group input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .input-group button {
            padding: 10px 15px;
            margin-left: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .todo-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        .todo-item.completed {
            text-decoration: line-through;
            color: #888;
        }
        .todo-item input[type="checkbox"] {
            margin-right: 10px;
        }
        .todo-item button {
            margin-left: auto;
            background-color: #f44336;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app" class="todo-list">
        <h2>我的待办事项</h2>
        <div class="input-group">
            <input type="text" v-model="newTodo" placeholder="输入待办事项..." @keyup.enter="addTodo">
            <button @click="addTodo">添加</button>
        </div>
        <ul>
            <li v-for="(todo, index) in todos" :key="index" class="todo-item" :class="{ completed: todo.completed }">
                <input type="checkbox" v-model="todo.completed">
                <span>{{ todo.text }}</span>
                <button @click="deleteTodo(index)">删除</button>
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                newTodo: '', // 存储输入框内容
                todos: [ // 待办事项数组，每个对象包含文本和完成状态
                    { text: '学习 Vue 基础', completed: false },
                    { text: '完成 Todo List 应用', completed: false }
                ]
            },
            methods: {
                addTodo() {
                    if (this.newTodo.trim() !== '') {
                        this.todos.push({
                            text: this.newTodo.trim(),
                            completed: false
                        });
                        this.newTodo = ''; // 清空输入框
                    }
                },
                deleteTodo(index) {
                    this.todos.splice(index, 1); // 删除指定索引的待办事项
                }
            }
        });
    </script>
</body>
</html>

功能详解：

添加待办事项：
- 使用 v-model="newTodo" 双向绑定输入框内容。
- @click="addTodo" 或 @keyup.enter="addTodo" 监听按钮点击或回车事件，调用 addTodo 方法。
- 方法中，检查输入非空后，将新事项添加到 todos 数组。
标记完成状态：
- v-model="todo.completed" 绑定复选框，实现完成状态的切换。
- 使用 :class="{ completed: todo.completed }" 动态添加样式：当 todo.completed 为 true 时，应用 completed 类（文字划线）。
删除待办事项：
- @click="deleteTodo(index)" 监听删除按钮点击事件。
- deleteTodo 方法使用 splice 从数组中移除指定事项。
列表渲染：
- v-for="(todo, index) in todos" 遍历 todos 数组，渲染每个待办事项。
- :key="index" 提供唯一键以提高性能。

总结要点

通过这个实战项目，我们回顾了 Vue 基础阶段的核心知识点：

知识巩固 ：你学会了如何综合运用插值表达式、指令和数据绑定来构建交互式应用。例如，v-model 简化了表单处理，v-for 高效渲染列表。
问题解决 ：开发中可能遇到问题，如输入验证（确保非空添加）、样式绑定（动态添加划线）。解决方案包括使用 trim() 方法处理空格，以及通过条件类名实现样式切换。
独立开发能力：这个简单应用是学习 Vue 的起点。尝试扩展功能，如添加过滤（只显示未完成事项）或本地存储保存数据，以进一步提升技能。
收获：加深了对 Vue 响应式系统和事件处理的理解，为后续学习复杂应用（如状态管理）打下基础。

如果你在实现过程中遇到问题，建议查阅 Vue 官方文档或调试代码控制台。通过反复练习，你将培养独立开发 Vue 应用的能力。