vue2的todolist入门小项目的详细解析

import 'todomvc-app-css/index.css'
import Vue from 'vue'
//添加localStorage
var STORAGE_KEY = 'todos-vuejs-2.0'
var todoStorage = {
fetch: function () {
var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
todos.forEach(function (todo,index) {
todo.id = index
})
todoStorage.uid = todos.length
return todos
},save: function (todos) {
localStorage.setItem(STORAGE_KEY,JSON.stringify(todos))
}
}
//用过滤器筛选出三种状态
var filters = {
all(todos) {
return todos
},active(todos) {
return todos.filter((todo) => {
return !todo.completed
})
},completed(todos) {
return todos.filter((todo) => {
return todo.completed
})
},}
let app = new Vue({
el: '.todoapp',// ~ <section class="todoapp">
data: {
msg: 'hello world',title: '待做清单',// 渲染标题 ~ {{title}}
newTodo: '',todos: todoStorage.fetch(),// ~ v-show="todos.length" ； ~ {{todos.length>1?'items':'item'}} 渲染 li ~ v-for="(todo,index) in filteredTodos"
editedTodo: '',// 空的编辑对象
hashName: 'all'
},watch: {
todos: {
handler: function (todos) {
todoStorage.save(todos)
},deep: true
}
},computed: {
remain() {
return filters.active(this.todos).length //未完成事项的数量 ~ {{remain}}
},isAll: { // ~ v-model="isAll"
get() {
return this.remain === 0
},set(value) {
this.todos.forEach((todo) => {
todo.completed = value
})
}
},filteredTodos() { //用hashName过滤出当前页面的todos ~ v-for="(todo,index) in filteredTodos"
return filtersthis.hashName
}
},methods: {
addTodo(e) { //输入值为空时，不添加（trim去除前后空格） ~ v-model.trim="newTodo"
if (!this.newTodo) {
return
}
this.todos.push({
id: todoStorage.uid++,content: this.newTodo,completed: false //结合v-model 根据completed状态绑定样式 ~:class="{completed:todo.completed； ~ v-model="todo.completed"
})
this.newTodo = ''
},removeTodo(index) { //绑定x样式，点击删除该todo ~ @click="removeTodo(index)"
this.todos.splice(index,1)
},editTodo(todo) { //编辑 ~ @dblclick="editTodo(todo)"
this.editCache = todo.content //储存编辑前的内容
this.editedTodo = todo // 点击编辑里面的内容而不是只是空文本框~ editing:todo==editedTodo}"
},doneEdit(todo,index) { //失去焦点后 ~ @blur="doneEdit(todo)"；@keyup.enter="doneEdit(todo)"
this.editedTodo = null //不存在编辑了或者说编辑已完成
if (!todo.content) { //如果编辑后没有内容了，删除该todo
this.removeTodo(index)
}
},cancelEdit(todo) { //按esc键取消此次编辑操作 ~ @keyup.esc="cancelEdit(todo)">
this.editedTodo = null
todo.content = this.editCache //当esc取消编辑时，还原编辑前的内容
},clear() { //点击清除已完成的功能 ~ @click="clear"
this.todos = filters.active(this.todos) //获取并渲染未完成的事项 ~
}
},directives: { //自定义属性 ~ v-focus="todo == editedTodo"
focus(el,value) { //文本框双击获取焦点
if (value) {
el.focus()
}
}
}
})
//hash（url地址中#以及之后的字符）
function hashChange() {
// ~ :class="{selected:hashName=='all'}"；:class="{selected:hashName=='active'}"；:class="{selected:hashName=='completed'}"
let hashName = location.hash.replace(/#/?/,'') //正则表达式去除#/？，获取如all，active，completed
if (filters[hashName]) { //如果过滤状态的hashName存在
app.hashName = hashName //给整个app变量里的hashName赋上那个值
} else {
location.hash = '' //取消
app.hashName = 'all' //否则就赋值‘all'，回到全部事项的页面
}
}
window.addEventListener('hashchange',hashChange) //全局监听hash