案例来自于vue.js的官方示例：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;}

这段 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、官方实现，使用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，隐藏viewtodo-list li.editing .edit {display: block;width: 506px;padding: 12px 16px;margin: 0 0 0 43px;
}.todo-list li.editing .view {display: none;
}

参考原文：www.cnblogs.com/jyyzzjl/p/6252279.html

转载于:https://www.cnblogs.com/gitnull/p/10255774.html

TodoMVC Example知识点总结相关推荐

vue第2天知识点：v-if和v-show、v-else和v-else-if、v-text和v-html、v-pre和v-once、v-cloak、指令总结、案例-todomvc
vue指令 v-on指令 https://cn.vuejs.org/v2/guide/events.html 作用:绑定事件语法:v-on:click="say" or v-on ...
大前端各阶段知识点，视频，软件，书籍，源码，面试题等汇总
前端是越来越火了,这就更需要我们汇集百家之长于一身,接下来发一波前端的知识点,希望帮助到想学习前端的同学. 源路径点一.2019新版前端与移动开发学习路线图---每阶段可掌握的能力及各阶段覆盖的关键 ...
用vue实现一个todoMVC备忘录
此项目是基于vue官网上的todoMVC示例仿写而成. 基于MVC设计思想,用到了vue2中的双向绑定.侦听器深度监听.计算属性.过滤器.自定义指令,以及基于localStorage的永久化存储和路由 ...
解释型语言与编译型的必须知识点
解释型语言与编译型的必须知识点概念: 计算机不能理解直接理解高级语言,只能理解机器语言,所以必须把高级语言翻译成机器语言,计算机才能执行高级语言编写的程序. 翻译的方式有两种: 编译解释两种翻译 ...
YOLOV4知识点分析（二）
YOLOV4知识点分析(二) 数据增强相关-mixup 论文名称:mixup: BEYOND EMPIRICAL RISK MINIMIZATION 论文地址:https://arxiv.org/ab ...
YOLOV4知识点分析（一）
YOLOV4知识点分析(一) 简介 yolov4论文:YOLOv4: Optimal Speed and Accuracy of Object Detection arxiv:https://arx ...
你需要掌握的有关.NET DateTime类型的知识点和坑位都在这里
引言 DateTime数据类型是一个复杂的问题,复杂到足以让你在编写[将日期从Web服务器返回到浏览器]简单代码时感到困惑. ASP.NET MVC 5和 Web API 2/ASP.NETCo ...
简练软考知识点整理-范围确认易混概念
与确认范围容易混淆的知识点包括,确认范围与核实产品.质量控制.项目收尾,下面进行比较分析. (1)确认范围与核实产品核实产品是针对产品是否完成,在项目(或阶段)结束时由发起人或客户来验证,强调产品是 ...
朴素贝叶斯知识点概括
1. 简述贝叶斯是典型的生成学习方法对于给定的训练数据集,首先,基于特征条件独立假设,学习输入/输出的联合概率分布:然后,基于此模型,对于给定的输入x,根据贝叶斯定理求后验概率最大的输出y 术语说 ...

TodoMVC Example知识点总结