1、v-bind 主要用于属性绑定
:class="{completed: item.isChecked}",它会将{}里面的内容解析为js表达式
2、vue提供了一组方法，对数组进行操作时，会触发视图更新，eg:push、pop、shift、unshift、splice、sort、reverse
这几个方法是在原生的基础上 ，vue再进行重新封装的方法。
3、自定义指令
vue可以设置自己的指令，钩子函数：updete被绑定元素所在的模板更新时调用，钩子函数中的参数，el:指令所绑定的元素，可以用来直接操作DOM；binding一个对象；value：为binding对象中，expression:"edtorTodos === item"的值决定，若expression为true，value即为true；
4、filter
computed:{
//要学会用filter
noCheckeLength:function(){
return this.list.filter(function(item){
return !item.isChecked
}).length
},
filteredList:function(){
//找到了过滤函数，就返回过滤后的数据；如果没有返回所有数据
return filter[this.visibility] ? filter[this.visibility](list) : list;
}
},
5、watch的深度监控，监控list这个属性，当这个属性对应的值发生变化就会执行函数，当设置deep这个属性时，无论是list这个对象变化了，还是里面的一个属性值变化了，都会触发监控事件。
watch:{
// list:function(){ //监控list这个属性，当这个属性对应的值发生变化就会执行函数
// store.save("miaov-new-class",this.list);
// },
list:{
handler:function(){
store.save("miaov-new-class",this.list);
},
deep:true
}
},
6、根据hash值实现数据的过滤，可以通过计算属性computed实现
//过滤的时候有三种情况 all finished unfinished
var filter = {
all:function(list){
return list;
},
finished:function(list){
return list.filter(function(item){
return item.isChecked;
})
},
unfinished:function(list){
return list.filter(function(item){
return !item.isChecked;
})
}
}
computed:{
filteredList:function(){
//找到了过滤函数，就返回过滤后的数据；如果没有返回所有数据
return filter[this.visibility] ? filter[this.visibility](list) : list;
}
},
。。。
//通过hash对数据进行筛选，计算属性也可以进行数据过滤
function watchHashChange(){
var hash = window.location.hash.slice(1);
//这里要用vm，不能用this
vm.visibility = hash;
}
watchHashChange();
window.addEventListener("hashchange",watchHashChange);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" 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 placeholder="例如：吃饭睡觉打豆豆； 提示：+回车即可添加任务" class="task-input" type="text" v-model="todo" @keyup.13="addTodo(123,$event)" /> <ul class="task-count" v-show="list.length"> <li>{{noCheckeLength}}个任务未完成</li> <li class="action"> <a 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" :class="{completed: item.isChecked,editing: item === edtorTodos}" v-for="item in filteredList" > <div class="view"> <input class="toggle" type="checkbox" v-model='item.isChecked'/> <label @dblclick="edtorTodo(item)">{{item.title}}</label> <button class="destroy" @click="deleteTodo(item)"></button> </div> <input v-foucs="edtorTodos === item" :class="edtorTodos === item" class="edit" type="text" v-model = "item.title" @blur="edtorTodoed(item)" @keyup.13="edtorTodoed(item)" @keyup.esc="cancelTodo(item)" /> </li> </ul> </div> </div> </div> <script src="./app2.js"></script> </body> </html>
index.css
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; }
app2.js
//存取localStorage中的数据 var store = { save(key,value){ localStorage.setItem(key,JSON.stringify(value)); }, fetch(key){ return JSON.parse(localStorage.getItem(key)) || []; } } /*var list = [ { title:"吃饭打豆豆1", isChecked:true // 状态为false，为不选中 任务未完成 }, { title:"吃饭打豆豆2", isChecked:false // 状态为false，为不选中 任务未完成 } ];*/ //取出所有的值 var list = store.fetch("miaov-new-class"); //过滤的时候有三种情况 all finished unfinished var filter = { all:function(list){ return list; }, finished:function(list){ return list.filter(function(item){ return item.isChecked; }) }, unfinished:function(list){ return list.filter(function(item){ return !item.isChecked; }) } } var vm = new Vue({ el:'.main', data:{ list:list, edtorTodos:'',//记录正在编辑的数据 beforeTitle:'', //记录正在编辑的数据的title todo:'', visibility: "all" //通过这个属性值的变化对数据进行筛选 }, watch:{ // list:function(){ //监控list这个属性，当这个属性对应的值发生变化就会执行函数 // store.save("miaov-new-class",this.list); // }, list:{ handler:function(){ store.save("miaov-new-class",this.list); }, deep:true } }, computed:{ //要学会用filter noCheckeLength:function(){ return this.list.filter(function(item){ return !item.isChecked }).length }, filteredList:function(){ //找到了过滤函数，就返回过滤后的数据；如果没有返回所有数据 return filter[this.visibility] ? filter[this.visibility](list) : list; } }, methods:{ // addTodo:function(){ // }, //es6简写模式，事件处理函数中的this指向当前的实例， //事件处理函数中存在事件对象ev,若函数中不传参数，默认第一个参数为事件对象； //若传入参数，则需要在页面上写入第二个参数$event，才是事件对象。 addTodo(a,ev){ console.log(ev); this.list.push({ title:this.todo, isChecked:false, }) }, deleteTodo(todo){ //删除任务 console.log(todo); var index = this.list.indexOf(todo); console.log(index); this.list.splice(index,1); }, //通过数据的类控制显示和隐藏，主要的类名为editing edtorTodo(todo){ //编辑任务 console.log(todo); //编辑任务的时候，记录一下编辑这条任务的title，方便在取消编辑的时候重新给之前的title this.beforeTitle = todo.title; this.edtorTodos = todo; }, edtorTodoed(todo){ //编辑任务成功 this.edtorTodos = ''; }, cancelTodo(todo){ //取消编辑任务 todo.title = this.beforeTitle; this.beforeTitle = ''; //让div显示出来，input隐藏 this.edtorTodos = ''; } }, directives:{ //v-foucs="edtorTodos === item" 当改变了，会触发自定义指令中的钩子函数update "foucs":{ update(el,binding){ if(binding.value){ el.focus(); } } } } }) //通过hash对数据进行筛选，计算属性也可以进行数据过滤 function watchHashChange(){ var hash = window.location.hash.slice(1); //这里要用vm，不能用this vm.visibility = hash; } watchHashChange(); window.addEventListener("hashchange",watchHashChange);