var storage-KEY = 'todo'
//有内容展示存储的 可能都要事先获取本地以前用户的内容
// 这个对象里面存放 对本地存储的 所有操作方法
var todoStorage = {
fetch: function(){
// todos 可看看在本地的内容 没有的默认形式为【】
// JSON.parse( ) 获取到的都是字符串 所以当获取属性对应值时 转换成 对象
var todos = JSON.parse(localStorage.getItem(storage-KEY) || '[]')
todos.forEach(function(todo, index){
todo.id = index
})
return todos //调用fetch() 返回todos
},
save: function(todos){ //传入从参数
localStorage.setItem(storage-KEY, JSON.stringify(todos))
// setItem(key, value) value 得转换成字符串
}
}
var filters = {
all: function(todos){ //这个地方写入 todos 可以传入参数用
return todos //return 有时候就是 我要在另一个地方执行这个函数 获取todos 取用另一个变量去接受他 使用或者干什么
},
// 未完成的 一直return 直到可以吧最后的结果return出来
active: function(todos){
return todos.filter(function(todo){
return !todo.completed
})
},
completed: function(todos){
return todos.filter(function(todo){
return todo.completed
})
}
}
var app = new App({
data: {
todos: todoStorage.fetch(),
visibility: 'all'
},
//为什么要用watch 有什么用途
watch: { //监听todos 随时保存最新的todos
todos: {
handler: function(todos){
todoStorage.save(todos)
},
deep: true
}
},
computed: {
filteredTodos: function(){ //有封装一个函数 因为三个函数有些相像 所有 只把不固定变量给提出来 剩下的为相同部分
return filters[this.visibility](this.todos)
},
remaining: function(){ //显示没有完成的todo的个数
return filters.active(this.todos).length
},
allDone: { //全选 全选 为没有选中的也被全部选中
get: function(){
return this.remianing === 0 //返回boolean 因为v-model ="需要true 或 false"
},
set: function(value){ //全选直接改变一些状态的值
this.todos.forEach(function(todo){
todo.completed = value
})
}
}
},
filters: {//显示 数后面的 副词的形式
pluralize: function(n){
return n===1? 'item': 'items'
}
},
methods: {
addTodo: function(){
//点击enter 后 内容添加到列表
//判断存在 并去掉空格
var value = this.newTodo && this.newTodo.trim()
if(!value){
return
}
this.todos.push({
id: todoStorage.uid++,
title: value,
completed: false
})
this.newTodo = '' //别忘了得还原 还得用它
},
removeTodo: function(todo){ //删除todo固定操作
this.todos.splice(this.todos.indexOf(todo), 1)
},
editTodo: function(){
},
doneEdit: function(){
}
}
})
// hash变化监听
function onHashChange(){
// 获取url知道当前的hash
var visibility = window.location.hash.replace(/#\/?/, '')
// repalce()方法 获取hahs ?????
if(filters[visibility]){
app.visibility = visibility //根据hahs 确定当前visibility是谁
}else{
window.location.hash = ''
app.visibility = 'all'
}
}
//hashchange 是一个事件名
window.addEventListener('hashchange', onHashChange )
app.$mount('.todoapp')
网友评论