vue实现ToDoList简单实例


Posted in Javascript onFebruary 07, 2017

一、需求与准备

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="../vendor/jquery-1.7.2.js"></script>
 <script src="../vendor/bootstrap.js"></script>
 <link href="../vendor/bootstrap.min.css" type="text/css" rel="stylesheet"/>
 <script src="../vendor/vue/dist/vue.js"></script>
</head>
<body>
 <div class="container" id="box">
  <form >
   <div class="form-group">
    <label for="timeStamp">时间</label>
    <input type="datetime" id="timeStamp" v-model="timeR" name="timeStamp" class="form-control">
   </div>
   <div class="form-group">
    <label for="todoItem" class="">任务</label>
    <input type="text" id="todoItem" name="todoItem" v-model="taskItem" class="form-control">
   </div>
   <div class="form-group">
    <button class="btn btn-success" v-on:click="add()" type="button">添加</button>
    <button class="btn btn-danger" type="submit">重置</button>
   </div>
  </form>
  <table class="table table-bordered text-center">
   <caption><h3>任务清单</h3></caption>
   <tr >
    <th class="text-center">序号</th>
    <th class="text-center">时间</th>
    <th class="text-center">任务</th>
    <th class="text-center">操作</th>
   </tr>
   <tr v-for="value in taskList">
    <td>{{$index+1}}</td>
    <td>{{value.timeStamp}}</td>
    <td>{{value.task}}</td>
    <td><button class="btn btn-danger" data-toggle="modal" data-target="#alertBox" v-on:click="targetIndex=$index">删除</button></td>
   </tr>
   <tr v-show="taskList.length!=0">
    <td colspan="4" class="text-right"><button class="btn btn-danger" data-toggle="modal" data-target="#alertBox" v-on:click="targetIndex=-2">删除全部</button></td>
   </tr>
   <tr v-show="taskList.length==0">
    <td colspan="4" class="text-muted" >暂无数据......</td>
   </tr>
  </table>
  <div role="dialog" class="modal" id="alertBox">
   <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">提醒:</div>
     <div class="modal-body text-center" v-show="targetIndex>0">
      确定要删除么???
     </div>
     <div class="modal-body text-center" v-show="targetIndex==-2">
      确定要全部删除么??
     </div>
     <div class="modal-footer">
      <button class="btn btn-danger" data-dismiss="modal" v-on:click="deleteFn(targetIndex)">确认</button>
      <button class="btn btn-primary" 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=”函数”)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获取后台Cookies值的小例子
Mar 04 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
JS原型链怎么理解
Jun 27 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
js Canvas绘制圆形时钟教程
Feb 06 #Javascript
JS中静态页面实现微信分享功能
Feb 06 #Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 #Javascript
Javascript之深入浅出prototype
Feb 06 #Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 #Javascript
canvas实现图像布局填充功能
Feb 06 #Javascript
canvas实现图像截取功能
Feb 06 #Javascript
You might like
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
python3多线程知识点总结
2019/09/26 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
大学生职业生涯规划书模板
2014/01/03 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书