本文采用vue2.0+vuex+localStorage+sass+webpack，实现一个本地存储的记事本。兼容PC端和移动端。在线预览地址： DEMO 功能说明 * 支持回车添加事件 * 支持事件状态切换 * 添加事件 -> 进入未完成列表 * 未完成 -> 已完成(勾选checkbox) * 未完成 -> 已取消(点击取消按钮) * 已完成 -> 未完成(取消勾选checkbox) * 已取消 -> 未完成(点击恢复按钮) * 支持控制台打印所有事件数据 * 支持筛选事件 * 支持编辑事件 * 支持删除事件 * 支持清空所有事件 * 支持本地化存储 * 支持折叠面板 项目笔记 本项目是使用vue-cli脚手架生成的项目，项目代码可以到我的github上clone下来。clone下来之后可进入文件目录 // 执行 npm install // 安装依赖完成之后再执行 npm run dev

这个项目不是一个框架，没有很多的页面。 此项目本意是为了创造一个可维护性可拓展性的强的后台基础项目，在这个项目的基础上开发后台，可以很快很方便的写自己的逻辑。 项目包含，静态演示，也包含完整的与后台交互演示。 github地址： https://github.com/sailengsi/sls-admin [https://github.com/sailengsi/sls-admin] 此项目重点突出在架构上模式，这个架构模式，可以让我们在开发中，很方便的拓展与维护，并且可以保持结构清晰的状态 建议先看下GITHUB上的文档说明 演示地址： https://vue2.slsadmin.sailengsi.com/#/login [https://vue2.slsadmin.sailengsi.com/#/login] 测试账号： * sls-1/123456 * sls-2/123456 * sls-3/123456

我们有个内部运营系统，是基于keenthemes的一个主题进行开发的，而这个主题就是基于jQuery+bootstrap+jQueryPlugins 进行的定制主题，用于显示各种图表和曲线。所以，这个系统的特点就是，加载了一堆js和css进行堆砌组合，以及内容被一层层的标签和样式包围。长这个样子： 混乱重复的演示 这种写多了确实就是体力活，一般的开发过程也就是复制粘贴，而且为了不出意外的问题，有用的没用的js script和css link都是直接复制的，反正放内部用一般忽略加载的延迟。

VUE.JS笔记——指令 跟ng的指令系统类似，vue也拥有一套指令系统。 所谓 指令 ，其实本质就是在模板中出现的特殊标记，根据这些标记让框架知道需要对这里的 DOM 元素进行什么操作。 简单示例 <pv-text="msg"></p> 这里v是vue的前缀（如果是Q.js就是q前缀= =），text是指令ID，msg是expression。msg作为viewModel，当它的值发生改变时，就触发指令text，重新计算标签的textContent(innerText)。 这里expression可以使用内联方式，在任何依赖的属性变化时都会触发指令更新。 <pv-text="'hello ' + user.name + ', ' + time"></p> 内联表达式中只能访问当前上下文的vue实例的属性和方法 内联表达式只能是单一语句 对于某些指令需要在表达式之前添加参数，比如事件绑定： <spanv-on="click:openComment"></span> 使用逗号分割绑定多重指令

1 MVVM 学习 1.1 实现原理 mvvm类框架的实现原理不复杂，大致如下： * 模板分析得到依赖的属性 * 通过某种变动监测手段监测这些依赖的属性 * 当属性变动的时候，触发相应的directive的处理逻辑即可 实际上，directive的处理逻辑不一定是对view进行操作，比如上报。但是，在mv的思想下，建议对view的操作都集中在directive里实现 从最核心上看，mv思想仅仅是一个观察者模式的具体应用于延展而已 1.2 核心技术点 1.2.1 模板分析 模板分析是比较基础的，凡是和view相关的基本都会涉及模板，这是原始资料，这里的关键点是 模板来源 的问题，实际上，它应该可以是 任何字符串 这里暗示了框架需要一个模板解析器，不管这个解析器复杂还是简单，它都处于一个模式：【输入 --> 模板引擎 --> 输出】 于是，mvvm的模板解析器特点如下： * 输入：任何符合规则的字符串 * 输出：需要监听的data.attr，directive，filter 在设计一个框架的时候，如果想要有更好的可扩展性，则