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 相关文章推荐
Prototype的Class.create函数解析
Sep 22 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 Javascript
OpenLayers3实现地图显示功能
Sep 25 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导入模块文件分享
2015/03/17 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
php生出随机字符串
2017/07/06 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python处理json数据中的中文
2014/03/06 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
介绍一下Make? 为什么使用make
2016/07/31 面试题
亲戚结婚的请假条
2014/02/11 职场文书
反邪教警示教育方案
2014/05/13 职场文书
医院标语大全
2014/06/23 职场文书
团组织推荐意见
2015/06/05 职场文书
工作感想范文
2015/08/07 职场文书
远程教育学习心得体会
2016/01/23 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL
PHP 时间处理类Carbon
2022/05/20 PHP
Python中的 enumerate和zip详情
2022/05/30 Python