【腾讯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);

很粗糙的例子，后续还会继续完善......

 

posted @ 2017-04-20 10:55  vinpho  阅读(389)  评论(0)  编辑  收藏  举报