vue实现ToDoList简单实例

vue实现ToDoList简单实例

一、需求与准备

1、准备

使用bootstrap实现页面的基础样式（依赖jquery），使用vue实现功能需要

2、功能需求

1）、表单实现输入任务清单后加入到展示项中

2）、点击删除按钮弹出警告框询问是否删除（bootstarp模态框插件）

3)、确定删除时，删除对应项（单项删除，全部删除）

4）、任务列表为空时，显示“数据为空” v-show

二、实例

1、静态页面

demo使用bootstrap来快速搭建页面

1）、表单组件：

.form, form-group, form-control

2)、模态框：

样式类：.modal,modal-content,modal-header,modal-body,modal-footer

触发模态框：data-toggle=”modal”,data-target=”模态框ID”

取消模态框：data-dismiss=”true”

2、功能实现

1）、表单数据：

v-model（数据绑定）,v-on:click=”fun()”（绑定事件）,v-for=”value in dataArr”(遍历),

2）、添加任务

思路：通过v-model绑定数据到vue实例中（timeStamp,taskItem用于暂存数据），点击提交时，在事件响应函数内向任务列表数组内添加提交的数据后，再清空用于存放数据的timeStamp,taskItem。

3）、删除任务

在vue实例中的methods属性上添加事件响应函数，在data中定义targetIndex以存放点击的按钮索引，遍历时，绑定点击事件v-on:click=”targetIndex=$index”,点击时根据targetIndex的值，删除对应索引的数据。

4）、删除全部

绑定删除全部按钮事件，targetIndex=-2，在删除响应除数内通过判断确定是部分删除还是全部删除。

时间

任务

添加

重置

确定要删除么？？？

确定要全部删除么？？

确认

取消

补充：

1）、v-on:click的简写形式：@click

2)、在vue中传入事件对象时：$event

3)、事件冒泡（原生：ev.cancelBubble=true,vue中@click.stop=”函数”）

4)、阻止浏览器默认行为：（原生：ev.preventDefault(),vue中@click.prevent=”函数”）

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。