【IMWeb训练营作业】用Vue做任务列表To do list
来源:互联网 发布:淘宝代购only是正品吗 编辑:程序博客网 时间:2024/05/20 16:43
效果:
以下是html代码:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ToDoList</title><link rel="stylesheet" type="text/css" href="index.css"><script src = "vue.js"></script></head><body><div class="page-top"><div class="page-content"><h2>任务计划列表</h2></div></div><div class="main"><h3 class="big-title">添加任务:</h3><input type="text" placehoder="例如:吃饭睡觉打豆豆;提示:+回车即可添加任务" class="task-input"v-model="todo" //根据表单控件的不同去监控不同的value值 v-on:keyup.enter="addTodo"/><ul class="task-content" v-show="list.length"><li>{{noCheckedItem}}个任务未完成</li><li class="action"><a class="active" href="#all">所有任务</a><a href="#unfinished">未完成的任务</a><a href="#finished">完成的任务</a></li></ul><h3 class="big-title">任务列表:</h3><div class="tasks"><span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span><ul class="todo-list"><li class="todo" v-bind:class="{completed: item.isChecked,editing:item === edtorTodos}" v-for="item in filteredList"><!-- 渲染列表 --><!-- 由item in list改为filteredList --><div class="view"><input type="checkbox" class="toggle" v-model="item.isChecked"><label @dblclick = "edtorTodo(item)">{{item.title}}</label><button class="destroy" @click="deleteTodo(item)"></button></div><inputv-foucs="item === edtorTodos"type="text" class="edit" v-model="item.title"@blur="edtorTodoed(item)"@keyup.enter = "edtorTodoed(item)"@keyup.esc = "cancelTodo(item)"/></li></ul></div></div><script src="app.js"></script></body></html>
body { margin:0; background-color: #fafafa; font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;}h2{ margin:0; font-size: 12px;}a { color: #000; text-decoration: none;}input { outline: 0;}button { margin: 0; padding: 0; border: 0; background: none; font-size: 100%; vertical-align: baseline; font-family: inherit; font-weight: inherit; color: inherit; outline: 0;}ul { padding:0; margin:0; list-style: none;}.page-top { width: 100%; height: 40px; background-color: #db4c3f;}.page-content { width: 50%; margin: 0px auto;}.page-content h2{ line-height: 40px; font-size: 18px; color: #fff;}.main { width: 50%; margin: 0px auto; box-sizing:border-box;}.task-input { width: 99%; height:30px; outline: 0; border: 1px solid #ccc;}.task-count{ display: flex; margin:10px 0;}.task-count li { padding-left: 10px; flex: 1; color: #dd4b39;}.task-count li:nth-child(1){ padding: 5px 0 0 10px;}.action { text-align: center; display: flex;}.action a { margin: 0px 10px; flex: 1; padding: 5px 0; color: #777;}.action a:nth-child(3){ margin-right: 0;}.active { border: 1px solid rgba(175, 47, 47, 0.2);}.tasks { background-color: #fff;}.no-task-tip { padding:10px 0 10px 10px; display: block; border-bottom: 1px solid #ededed; color:#777;}.big-title { color: #222;}.todo-list { margin: 0; padding: 0; list-style: none;}.todo-list li { position: relative; font-size: 16px; border-bottom: 1px solid #ededed;}.todo-list li:hover { background-color: #fafafa;}.todo-list li.editing { border-bottom: none; padding: 0;}.todo-list li.editing .edit { display: block; width: 506px; padding: 13px 17px 12px 17px; margin: 0 0 0 43px;}.todo-list li.editing .view { display: none;}.todo-list li .toggle { text-align: center; width: 40px; /* auto, since non-WebKit browsers doesn't support input styling */ height: auto; position: absolute; top: 5px; bottom: 0; margin: auto 0; border: none; /* Mobile Safari */ -webkit-appearance: none; appearance: none;}.toggle { text-align: center; width: 40px; /* auto, since non-WebKit browsers doesn't support input styling */ height: auto; position: absolute; top: 5px; bottom: 0; margin: auto 0; border: none; /* Mobile Safari */ -webkit-appearance: none; appearance: none;} .toggle:after { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="40" fill="none" stroke="#ededed" stroke-width="3"/></svg>');}.toggle:checked:after { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="40" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');}.todo-list li label { white-space: pre-line; word-break: break-all; padding: 15px 60px 15px 15px; margin-left: 45px; display: block; line-height: 1.2; transition: color 0.4s;}.todo-list li.completed label { color: #d9d9d9; text-decoration: line-through;}/*.tip-toggle { padding-left: 0; position: relative;}.tip-toggle .toggle { top: -2px;}.tip-toggle span { margin-left: 45px;}*/.todo-list li .destroy { display: none; position: absolute; top: 0; right: 10px; bottom: 0; width: 40px; height: 40px; margin: auto 0; font-size: 30px; color: #cc9a9a; margin-bottom: 11px; transition: color 0.2s ease-out;}.todo-list li .destroy:hover { color: #af5b5e;}.todo-list li .destroy:after { content: '×';}.todo-list li:hover .destroy { display: block;}.todo-list li .edit { display: none;}.todo-list li.editing:last-child { margin-bottom: -1px;}
以下是Vue代码:
//存取localStorage中的数据(通过封装一个方法)var store = {save(key,value){localStorage.setItem(key,JSON.stringify(value));},fetch(key){return JSON.parse(localStorage.getItem(key)) || [];}}//数据//去除所有的值var list = store.fetch("todolist-class");//从缓存中调用数据/*var list = [{title:"吃饭打豆豆",isChecked:false //状态为false,为不选中 任务未完成},{title:"妙味课堂",isChecked:true //状态为true,为选中 任务完成}];*///vmvar vm = new Vue({el:".main",data:{list:list,todo:'',edtorTodos:'',//记录正在编辑的数据beforeTitle:'',//记录正在编辑的数据的titlevisibility:"all"//通过这个属性值的变化,结合hash对数据进行筛选,默认值是all},watch:{/*list:function(){//监控list这个属性,当这个属性对应的值发生变化就会执行函数store.save("todolist-class",this.list);//浅监控,监控不到list里面各个对象中属性的变化}*/list:{//这里list是个对象handler:function(){store.save("todolist-class",this.list);},deep:true //深度监控}},computed:{noCheckedItem:function(){return this.list.filter(function(item){return item.isChecked === false;}).length;},filteredList:function(){//根据vm的visibility属性来过滤数据//按三种情况过滤:all,finished,unfinishedvar filter = {all:function(){return list;},finished:function(){return list.filter(function(item){return item.isChecked;})},unfinished:function(){return list.filter(function(item){return !item.isChecked;})}}//end filter//考虑到手工改动url栏里hash值的情况,这里加入了判断:找到了过滤函数,就返回过滤后的数据,否则返回所有的数据return filter[this.visibility] ? filter[this.visibility](list) : list;//这里写上(list)才能返回根据数据筛选的值}},methods:{addTodo(){//添加任务/*{title:}*/this.list.push({//往数组里添加任务,格式是个对象title:this.todo,//事件处理函数中的this指向的是,当前这个根实例,即new VueisChecked:false}); this.todo = '';},deleteTodo(todo){//删除任务var index = this.list.indexOf(todo);this.list.splice(index,1);},edtorTodo(todo){//编辑任务//编辑任务的时候,记录一下编辑这条任务的title,方便在取消编辑的时候还能用到原来的title,写在数据中:beforeTitlethis.beforeTitle = todo.title;this.edtorTodos = todo;},edtorTodoed(todo){//编辑完成后失去焦点this.edtorTodos = '';},cancelTodo(todo){//取消编辑todo.title = this.beforeTitle;this.edtorTodoed(todo);this.beforeTitle = '';//之前记录的值已经没用了,重新设为空}},//end methodsdirectives:{//自定义指令"foucs":{update(el,binding){//钩子函数//console.log(el);//console.log(binding);if(binding.value){el.focus();}}}//end focus}//end directives});function watchHashChange(){var hash = window.location.hash.slice(1);//去掉#号vm.visibility = hash;//拿到去了#的hash值后改变实例的visibility属性值}watchHashChange();//一开始调用一下window.addEventListener("hashchange",watchHashChange);//hash改变时调用一下
0 0
- 【IMWeb训练营作业】用Vue做任务列表To do list
- 【IMWeb训练营作业】用Vue做任务列表To do list
- 【IMWeb训练营作业】To do list
- IMWeb训练营作业------任务计划列表
- 【IMWeb训练营作业】第一次Vue作业-todo list
- IMweb训练营作业—-Todo List(vue)
- [IMWeb训练营作业]vue实现简单的todo list
- 【IMWeb训练营作业】 使用 Vue 实现一个 TODO List
- Vue.js 第一发【 todo list (IMWeb训练营作业)】
- 【IMWeb训练营作业】Vue做的TODOlist
- 【IMWeb训练营作业】vuejs简单任务列表实现
- 【IMWeb训练营作业】用Vue做简单的自定义select
- 【IMWeb训练营作业】【Vue】TodoList
- 【IMWeb训练营作业01 vue todos】
- IMWeb训练营作业-----Vue+Bootstrap留言板
- 【IMWeb训练营作业】vue demo Todolist
- 【IMWeb训练营作业】--Vue-TODOList
- 【IMWeb训练营作业】Vue.js便签
- HDOJ 4135 Co-prime(容斥原理)
- Unity 录音
- 通用的分页思路
- 有关线程并发的学习(一)
- uva 208 -Firetruck(dfs)
- 【IMWeb训练营作业】用Vue做任务列表To do list
- java的标准输入/输出流
- nyoj716 River Crossing (动态规划)(第六届河南省程序设计大赛)
- Mybatis <if test> 判断数字时的问题
- JAVA学习笔记之形式参数,权限访问和内部类问题
- oracle连接,查询用户,创建用户,授权用户,切换用户
- 【Java学习20170419】JavaScript之DOM技术
- Parity game(代权并查集(区间))
- (POJ 2186)Popular Cows 强连通分量 + 缩点图