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代码
Aug 25 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
layui实现三级联动效果
Jul 26 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
吃通javascript正则表达式
Apr 21 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
合作指挥官:孟斯克
2020/03/16 星际争霸
基于php缓存的详解
2013/05/15 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
Python线程创建和终止实例代码
2018/01/20 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
python路径的写法及目录的获取方式
2019/12/26 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
python脚本和网页有何区别
2020/07/02 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
宿舍打麻将检讨书
2014/01/24 职场文书
关于读书的演讲稿
2014/05/07 职场文书
校园安全演讲稿
2014/05/09 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
中学生运动会广播稿
2015/08/19 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏