Vue.js 官方示例初探（ES6 改写）

如果觉得有帮助，欢迎 star哈~

https://github.com/jiangjiu/blog-md/issues/11

感谢作者 @尤小右 大大边写的超级带感的 Vue.js 前端框架，赠送的几个小例子都很有代表性，代码逻辑清晰简明，不禁想抄上一抄嗯。

官方的示例都是 ES5直接编写运行，并没有使用ES6以及构建工具，考虑到以后开发大一些的项目以及官方出品的 vue-cli脚手架，决定这次学习之旅采用两者结合写写官方的示例。

初探步骤：

1. 观摩示例的 result

2. 思考组件模板和逻辑实现思路

3. 遇到问题先搜一下 api 和官方教程（好像看过一遍还是记不住什么。。。结合实践重要嗯）

4. 还是不会就看例子的代码吧（不出意外的话都会走到这步哈哈）

5. 整理一下代码和总结

markdown Editor

一个极简的 markdown 编辑器，用了 marked 这个工具。

• 新建一个 Marked 组件就 ok。看起来很简单，textarea 标签作为输入编辑器，另一个 div 标签通过 marked 这个 markdown工具 转码。

• npm i marked --save 来安装好 marked，import 后通过定义过滤器实现。

• textarea 设置了 debounce指令。debounce 设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如在输入提示中 Ajax 请求），它较为有用。

github commits

编写一个小组件，异步获取 github 的两条 branch的数据。

• created:生命周期的钩子，在实例创建后同步调用。此时实例已经结束解析选项，意味着已经建立了数据绑定，计算属性，方法，watcher/事件回调。但是还没有开始 DOM 编译，$el 还不存在。

• watch：一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。在实例化时为每个键调用 $watch() 。

• 遇到的问题：eslint 总是提示 new XMLHttpRequest() 错误，not defined，并不知道为啥会这样，看到了很多代码也并没出错啊，暂时在 eslint 的配置文件把 no-undef 设为0忽略它了，如果有知道的童鞋可以指点一二。

Validation+Firebase

firebase 实时后端云简单搂了一眼，号称无后端数据存储加实时通信还是很带感的，不过自己写的时候总是报错，只好自己在本地 mock 一下了。以后写可以使用 wilddog，国内的

• 计算属性：由于模板中只可以用表达式，相对复杂的逻辑并不适合放在模板中，所以计算属性就派上用场了，简单易用。计算属性默认只是 getter 函数，不过也可以自定义 getter 和 setter函数。

• transition 过渡：这个过渡系统听勾股大大说很值得学习，所以暂时放下以后看源码先。

• mock 数据对象以后比较蛋疼，会把 newUser这个对象直接 push 进 userRef 中，导致以后对 newUser 的操作都会被双向绑定显示到列表中。。。所以只好深拷贝一下数据 push 进去，这个留坑以后填。

• !!:双叹号强制类型转换为布尔值。

树状视图

这个例子实现了树状视图，主要演示如何递归调用组件。

• 递归组件：组件在自身的模板内可以递归调用自己，但是要有 name 选项才可以，在这上面花了好长时间又去查了教程才发现。。。官方示例代码用 Vue.component()注册了全局组件，会把 id 自动注册为name 属性，所以没有手动写 name 属性。我在 cli 里写的时候一直没注意，导致递归总是不显示嗯。

• Vue.set:全局 API，设置对象的属性。如果对象是响应的，将触发视图更新。这个方法主要用于解决不能检测到属性添加的限制。

• open = !open:这是用来 toggle 布尔值，又学了一招~

• @click和@dblclick分别代表单击和双击事件绑定。后一个还真是没注意过。

• 动态 props：可以绑定 props，这样父组件数据变化后，也会传递给子组件。