一、需求与准备
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，在删除响应除数内通过判断确定是部分删除还是全部删除。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>留言板</title> <script src="https://www.jb51.net/vendor/jquery-1.7.2.js"></script> <script src="https://www.jb51.net/vendor/bootstrap.js"></script> <link href="https://www.jb51.net/vendor/bootstrap.min.css" type="text/css"/> <script src="https://www.jb51.net/vendor/vue/dist/vue.js"></script> </head> <body> <div> <form > <div> <label for="timeStamp">时间</label> <input type="datetime" v-model="timeR"> </div> <div> <label for="todoItem">任务</label> <input type="text" v-model="taskItem"> </div> <div> <button v-on:click="add()" type="button">添加</button> <button type="submit">重置</button> </div> </form> <table> <caption><h3>任务清单</h3></caption> <tr > <th>序号</th> <th>时间</th> <th>任务</th> <th>操作</th> </tr> <tr v-for="value in taskList"> <td>{{$index+1}}</td> <td>{{value.timeStamp}}</td> <td>{{value.task}}</td> <td><button data-toggle="modal" data-target="#alertBox" v-on:click="targetIndex=$index">删除</button></td> </tr> <tr v-show="taskList.length!=0"> <td colspan="4"><button data-toggle="modal" data-target="#alertBox" v-on:click="targetIndex=-2">删除全部</button></td> </tr> <tr v-show="taskList.length==0"> <td colspan="4" >暂无数据......</td> </tr> </table> <div role="dialog"> <div> <div> <div>提醒：</div> <div v-show="targetIndex>0"> 确定要删除么？？？ </div> <div v-show="targetIndex==-2"> 确定要全部删除么？？ </div> <div> <button data-dismiss="modal" v-on:click="deleteFn(targetIndex)">确认</button> <button data-dismiss="modal">取消</button> </div> </div> </div> </div> </div> <script> var vm=new Vue({ 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=”函数”）