vue实现ToDoList简单实例

一、ToDoList项目的Vue实践之旅

一、需求分析与准备事项

在开始我们的Vue ToDoList项目之前，首先我们要明确我们的需求和做好相应的准备工作。我们的需求包括以下几点：使用Bootstrap来美化我们的页面，借助jQuery的便利实现页面基础样式；利用Vue实现动态的任务添加、删除等功能。为了达成这些目标，我们需要进行以下准备：熟悉Vue和Bootstrap的基础知识和使用方法，理解如何结合jQuery使用Bootstrap。

二、功能需求详解

我们的ToDoList需要实现以下功能：

1. 用户可以通过表单输入任务，点击提交后，任务会自动添加到展示列表中。

2. 为每个任务提供删除功能，点击删除按钮时，会弹出一个警告框询问用户是否确定删除。这里我们会使用Bootstrap的模态框插件来实现。

3. 用户确定删除时，对应的任务会从列表中移除。我们将会实现单项删除和全部删除两种功能。

4. 当任务列表为空时，我们会显示“数据为空”的提示信息，使用Vue的v-show指令来实现。

三、实例展示

接下来，让我们通过具体的实例来展示如何实现上述功能。

1. 静态页面的搭建

我们使用Bootstrap快速搭建我们的页面。这包括创建一个表单和模态框。表单使用Bootstrap的表单组件类，如.form、form-group、form-control等。模态框则使用Bootstrap的模态框样式类，如.modal、modal-content、modal-header、modal-body、modal-footer等。通过data-toggle和data-target属性触发模态框，使用data-dismiss属性取消模态框。

2. 功能实现

接下来，我们使用Vue来实现我们的功能。我们通过v-model进行数据绑定，v-on:click绑定事件，v-for遍历数据列表。

在添加任务时，我们通过v-model绑定数据到Vue实例中（使用timeStamp和taskItem暂存数据）。当用户点击提交时，我们在事件响应函数中将提交的数据添加到任务列表数组中，然后清空用于存放数据的timeStamp和taskItem。

对于删除任务，我们在Vue实例的methods属性上添加事件响应函数。在data中定义targetIndex以存放点击的按钮索引。在遍历时，我们绑定点击事件v-on:click="targetIndex=$index"。当用户点击时，我们根据targetIndex的值删除对应索引的数据。

对于全部删除功能，我们绑定删除全部按钮事件，设置targetIndex为-2。在删除响应函数中，通过判断targetIndex的值来确定是部分删除还是全部删除。