【腾讯IMWeb前端训练营】 Vuejs todoList demo
这是第一次跟着老师学Vuejs,以前看官方文档很多不懂，现在做了一个小例子：
效果图如下：
代码如下：
HTML：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>每天进步清单</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <div class="page-top"> 10 <div class="page-content"> 11 <h2>任务计划列表</h2> 12 </div> 13 </div> 14 <div class="main"> 15 <h3 class="big-title">添加任务:</h3> 16 <input 17 placeholder="例如：吃饭睡觉打豆豆; 提示：+回车即可添加任务" 18 class="task-input" 19 type="text" 20 v-model="todo" 21 v-on:keyup.13="addTodo" 22 /> 23 <ul class="task-count" v-show="list.length"> 24 <li>{{noCheckeLength}}个任务未完成</li> 25 <li class="action"> 26 <a href="#all" :class="{active:visibility === 'all'}">所有任务</a> 27 <a href="#unfinished" :class="{active:visibility === 'unfinished'}">未完成的任务</a> 28 <a href="#finished" :class="{active:visibility === 'finished'}">完成的任务</a> 29 </li> 30 </ul> 31 <h3 class="big-title clearfloat">任务列表</h3> 32 <div class="tasks"> 33 <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span> 34 <ul class="todo-list"> 35 <li class="todo" :class="{completed: item.isChecked,editing: item === edtorTodos}" v-for="item in filteredList"> 36 <div class="view"> 37 <input class="toggle" type="checkbox" v-model="item.isChecked" /> 38 <label @dblclick="edtorTodo(item)">{{ item.title }}</label> 39 <!-- <button class="destroy" @click="deleteTodo(item)"></button> --> 40 <div class="destroy" @click="deleteTodo(item)"></div> 41 </div> 42 <input 43 v-foucs="edtorTodos === item" 44 class="edit" 45 type="text" 46 v-model = "item.title" 47 @blur="edtorTodoed(item)" 48 @keyup.13="edtorTodoed(item)" 49 @keyup.esc="cancelTodo(item)" 50 /> 51 </li> 52 </ul> 53 </div> 54 </div> 55 56 <script type="text/javascript" src="js/vue.js"></script> 57 <script type="text/javascript" src="js/main.js"></script> 58 </body> 59 </html>
JS如下：
1 /* 2 *author:黄文锋; Email:915581960@qq.com; 3 *create time: 2017/4/19 4 */ 5 6 //存取localStorage中的数据 7 8 var store = { 9 save(key,value){ 10 localStorage.setItem(key,JSON.stringify(value)); 11 }, 12 fetch(key){ 13 return JSON.parse(localStorage.getItem(key)) || []; 14 } 15 } 16 17 18 19 //取出所有的值 20 var list = store.fetch("mydata"); 21 22 //过滤的时候有三种情况 all finished unfinished 23 24 var filter = { 25 all:function(list){ 26 return list; 27 }, 28 finished:function(list){ 29 return list.filter(function(item){ 30 return item.isChecked; 31 }) 32 }, 33 unfinished:function(){ 34 return list.filter(function(item){ 35 return !item.isChecked; 36 }) 37 } 38 } 39 40 var vm = new Vue({ 41 el:".main", 42 data:{ 43 list:list, 44 todo:"", 45 edtorTodos:'', //记录正在编辑的数据 46 beforeTitle:'', //记录正在编辑的数据的title 47 visibility: "all" //通过这个属性值的变化对数据进行筛选 48 }, 49 watch:{ 50 list:{ 51 handler:function(){ 52 store.save("mydata",this.list); 53 }, 54 deep:true 55 } 56 }, 57 computed:{ 58 noCheckeLength:function(){ 59 return this.list.filter(function(item){ 60 return !item.isChecked 61 }).length 62 }, 63 filteredList:function(){ 64 //找到了过滤函数，就返回过滤后的数据；如果没有返回所有数据 65 return filter[this.visibility] ? filter[this.visibility](list) : list; 66 67 } 68 }, 69 methods:{ 70 addTodo(){ //添加任务 71 this.list.push({ 72 title:this.todo, 73 isChecked:false 74 }); 75 this.todo = ''; 76 77 }, 78 deleteTodo(todo){ //删除任务 79 var index = this.list.indexOf(todo); 80 this.list.splice(index,1); 81 82 }, 83 edtorTodo(todo){ //编辑任务 84 console.log(todo); 85 //编辑任务的时候，记录一下编辑这条任务的title，方便在取消编辑的时候重新给之前的title 86 this.beforeTitle = todo.title; 87 88 this.edtorTodos = todo; 89 90 91 92 }, 93 edtorTodoed(todo){ //编辑任务成功 94 this.edtorTodos = ''; 95 }, 96 cancelTodo(todo){ //取消编辑任务 97 98 todo.title = this.beforeTitle; 99 100 this.beforeTitle = ''; 101 102 //让div显示出来，input隐藏 103 this.edtorTodos = ''; 104 } 105 }, 106 directives:{ 107 "foucs":{ 108 update(el,binding){ 109 if(binding.value){ 110 el.focus(); 111 } 112 } 113 } 114 } 115 }); 116 117 function watchHashChange(){ 118 var hash = window.location.hash.slice(1); 119 120 vm.visibility = hash; 121 122 } 123 124 watchHashChange(); 125 126 window.addEventListener("hashchange",watchHashChange);
很粗糙的例子，后续还会继续完善......
