文章的原材料来自于vue的官方示例:https://cn.vuejs.org/v2/examples/todomvc.html,我们在学习过程中,试着对其中的一些知识点进行记录:
一、浏览器数据存储,为了方便,此处将数据存储到客户端的缓存中,使用localStorage,他的主要api有
localStorage.getItem(key)和localStorage.setItem(key,value)
二、对于localStorage中的数据采取json数组形式保存,因此在保存value和获取时候需要先做json和string的转化,ECMA5提供了两个转化方法:
将指定格式数据转为json:JSON.parse(string);将json转为string:JSON.stringify(json)
var TODO_KEY="vue-todo"; var todoStorage={ fetch:function(){ var todos=JSON.parse(localStorage.getItem(TODO_KEY)||'[]') todos.forEach(function(todo,index){ todo.id=index; }); todoStorage.uid=todos.length; return todos; }, save:function(todos){ localStorage.setItem(TODO_KEY,JSON.stringify(todos)); } }
三、使用hashchange监听浏览器地址栏变化
在单页应用同页跳转的情况下,添加监听window.addEventListener('hashchange',onHashChange)来获取地址栏的变化,然后可以使用window.location.hash来监听到地址栏的后缀变化,如果xxx.html#/all,此处值为"#/all",获取地址栏的值变化,此处主要根据地址栏的visibility过滤不同的内容
function onHashChange(){ var visibility=window.location.hash.replace(/#\/?/,''); if(filters[visibility]){ app.visibility=visibility; }else{ window.location.hash=''; app.visibility='all'; } } window.addEventListener('hashchange', onHashChange) onHashChange()
三、json或者数组的过滤
如果要根据todos中的completed的状态过滤掉对应的子项,需要使用filter,如过滤掉非completed的项,是如下写法
function(todos){ return todos.filter(function(todo){ return !todo.completed; });
四、json或者数组中的某一项,修改
如果要将todos的子项中的内容进行修改,需要使用forEach操作,如将所有completed修改为true,如下写法:
this.todos.forEach(function(todo){ todo.completed=true; });
五、自定义vue标签
<input class="edit" type="text" v-model="todo.title" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)">
在此input标签中,我们希望如果是正在编辑的todo时候,自动被选中,此处自定义了一个v-todo-focus标签,此标签的格式如下
directives: { 'todo-focus': function (el, value) { if (value) { el.focus() } } }
指令定义,官方提供了五个钩子函数来供我们使用,分别代表了一个组件的各个生命周期
bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次, 指令与元素解绑时调用。
在这里其他几个都好理解,关于模板更新(update)这里,本人的理解是:该指令所在的模板有变化而需要重新渲染的时候,比如当一个输入框的model发生了变化就会触发指令。当然此处说的比较模糊,具体的还有待研究。
六、v-cloak标签
vuejs做的界面加载过程中会闪现vue的变量,如{{msg}},在标签加上v-cloak,在css定义可以解决此问题
[v-cloak] { display: none; }
<section class="main" v-show="todos.length" v-cloak>
这段 CSS 的含义是,包含 v-cloak (cloak n. 披风,斗篷;vt. 遮盖,掩盖) 属性的 html 标签在页面初始化时会被隐藏。
在 vuejs instance ready 之后,v-cloak 属性会被自动去除,也就是对应的标签会变为可见。问题来了,怎么才算是 ready 呢?这就需要了解 vuejs instance 的生命周期了
七、使用watch完成localStorage的写入操作
watch: { todos: { handler: function (todos) { todoStorage.save(todos) }, deep: true } },
在todo-list的应用中,整个操作过程中的增删改查操作很多,系统使用todos来保存每次操作后的结果,然后使用watch监控todos的变化,完成缓存的更新,注:deep表示深复制,即元素发生变化,也会导致他的变化
八、计算属性和观察属性
在todo-list有一个全选按钮,如果选中的时候,所有任务被标记为完成,如果任务全部完成,此标记也会被标记选中
1、以下是我的实现,对allDon进行watch,如果发生了改变,则修改所有任务状态,
allDone:function(){ this.allDone!=this.allDone; var selDone=this.allDone; this.todos.forEach(function(todo){ todo.completed=selDone; }); }
同时在computed计算remaining的时候,根据remaining修改allDone
remaining:function(){ var remaining=filters.active(this.todos).length; this.allDone=remaining===0?true:false; return remaining; }
2、以下是官方实现,使用computed的get和set操作allDone,减少了元素定义,也更为清晰
allDone: { get: function () { return this.remaining === 0 }, set: function (value) { this.todos.forEach(function (todo) { todo.completed = value }); }
九、数组的操作-使用push和slice进行添加数组元素和删除数组元素,略
十、使用filters进行格式化,此处其实可以使用computed进行实现
filters: { pluralize: function (n) { return n === 1 ? 'item' : 'items' } },
十一、在做var app=new Vue()的时候,我们可以不用指定元素,等其他初始化完成后,最后一步再使用mount进行绑定
// mount app.$mount('.todoapp')
十二、对于todo的编辑和展示切换
对于某一条todo,我们要求双击进行切换到编辑模式,回车切换到展示模式,我们的处理是:对于此todo,两种模式在页面上共存,通过method方法,改变对应的class,达到切换的目的。
<li v-for="todo in filteredTodos" class="todo" :key="todo.id" :class="{ completed: todo.completed, editing: todo == editedTodo }"> <div class="view"> <input class="toggle" type="checkbox" v-model="todo.completed"> <label @dblclick="editTodo(todo)">{{ todo.title }}</label> <button class="destroy" @click="removeTodo(todo)"></button> </div> <input class="edit" type="text" v-model="todo.title" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)"> </li>
代码可以看到,显示todo的地方有一个div用于显示,一个input用于编辑,根据editedTodo来确定是否给li绑定editing的class,如果绑定后,class如下,显示edit,隐藏view
.todo-list li.editing .edit { display: block; width: 506px; padding: 12px 16px; margin: 0 0 0 43px; } .todo-list li.editing .view { display: none; }