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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
jquery获取radio值实例
Oct 16 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 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
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
浅析Node.js查找字符串功能
2014/09/03 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
Django Rest framework权限的详细用法
2019/07/25 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
如何基于python操作excel并获取内容
2019/12/24 Python
python已协程方式处理任务实现过程
2019/12/27 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
python元组拆包实现方法
2021/02/28 Python
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
团日活动总结报告
2014/06/25 职场文书
2014年防汛工作总结
2014/12/08 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
让子弹飞观后感
2015/06/11 职场文书
毕业欢送会致辞
2015/07/29 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server