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=”valueindataArr”(遍历),
2)、添加任务
思路:通过v-model绑定数据到vue实例中(timeStamp,taskItem用于暂存数据),点击提交时,在事件响应函数内向任务列表数组内添加提交的数据后,再清空用于存放数据的timeStamp,taskItem。
3)、删除任务
在vue实例中的methods属性上添加事件响应函数,在data中定义targetIndex以存放点击的按钮索引,遍历时,绑定点击事件v-on:click=”targetIndex=$index”,点击时根据targetIndex的值,删除对应索引的数据。
4)、删除全部
绑定删除全部按钮事件,targetIndex=-2,在删除响应除数内通过判断确定是部分删除还是全部删除。
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>留言板</title> <scriptsrc="../vendor/jquery-1.7.2.js"></script> <scriptsrc="../vendor/bootstrap.js"></script> <linkhref="../vendor/bootstrap.min.css"type="text/css"rel="stylesheet"/> <scriptsrc="../vendor/vue/dist/vue.js"></script> </head> <body> <divclass="container"id="box"> <form> <divclass="form-group"> <labelfor="timeStamp">时间</label> <inputtype="datetime"id="timeStamp"v-model="timeR"name="timeStamp"class="form-control"> </div> <divclass="form-group"> <labelfor="todoItem"class="">任务</label> <inputtype="text"id="todoItem"name="todoItem"v-model="taskItem"class="form-control"> </div> <divclass="form-group"> <buttonclass="btnbtn-success"v-on:click="add()"type="button">添加</button> <buttonclass="btnbtn-danger"type="submit">重置</button> </div> </form> <tableclass="tabletable-borderedtext-center"> <caption><h3>任务清单</h3></caption> <tr> <thclass="text-center">序号</th> <thclass="text-center">时间</th> <thclass="text-center">任务</th> <thclass="text-center">操作</th> </tr> <trv-for="valueintaskList"> <td>{{$index+1}}</td> <td>{{value.timeStamp}}</td> <td>{{value.task}}</td> <td><buttonclass="btnbtn-danger"data-toggle="modal"data-target="#alertBox"v-on:click="targetIndex=$index">删除</button></td> </tr> <trv-show="taskList.length!=0"> <tdcolspan="4"class="text-right"><buttonclass="btnbtn-danger"data-toggle="modal"data-target="#alertBox"v-on:click="targetIndex=-2">删除全部</button></td> </tr> <trv-show="taskList.length==0"> <tdcolspan="4"class="text-muted">暂无数据......</td> </tr> </table> <divrole="dialog"class="modal"id="alertBox"> <divclass="modal-dialog"> <divclass="modal-content"> <divclass="modal-header">提醒:</div> <divclass="modal-bodytext-center"v-show="targetIndex>0"> 确定要删除么??? </div> <divclass="modal-bodytext-center"v-show="targetIndex==-2"> 确定要全部删除么?? </div> <divclass="modal-footer"> <buttonclass="btnbtn-danger"data-dismiss="modal"v-on:click="deleteFn(targetIndex)">确认</button> <buttonclass="btnbtn-primary"data-dismiss="modal">取消</button> </div> </div> </div> </div> </div> <script> varvm=newVue({ el:"#box", data:{ timeR:'', taskItem:'', targetIndex:-1, taskList:[ { timeStamp:'2016-12-03', task:'学习学习' }, { timeStamp:'2016-12-03', task:'代码代码代码' } ] }, methods:{ add:function(){ console.log(this.timeR) this.taskList.push({ timeStamp:this.timeR, task:this.taskItem }); this.timeR=""; this.taskItem=""; }, deleteFn:function(index){ if(index>0){ this.taskList.splice(index,1) }else{ this.taskList=[] } } } }) </script> </body> </html>
补充:
1)、v-on:click的简写形式:@click
2)、在vue中传入事件对象时:$event
3)、事件冒泡(原生:ev.cancelBubble=true,vue中@click.stop=”函数”)
4)、阻止浏览器默认行为:(原生:ev.preventDefault(),vue中@click.prevent=”函数”)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。