Vue.js 整理笔记

　　之前咱们用Jquery进行dom的操做，虽然熟悉后开发效率很高，可是若是多个控件的相互操做多的状况下，仍是会乱。相比之下，Vue的使用更加清晰，经过虚拟dom将数据绑定，并且组件化和路由的帮助下，让整个网页符合SPA（Single Page Application）的潮流趋势。若是你懂的Angular.js，那么Vue.js就是囊中之物。

<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div>

new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })

{{}}是一个标识符，将message将Javascript中Vue中数据的message绑定，它的初始值为Hello Vue.js!。固然，全部的操做要在id为app的做用域之中。

数据输入方面则是将input的数据模型经过v-model进行绑定。这样，当你在文本框输入文字时，对应的<p>的内容也会随之改变，效果参考。这些功能若是用Jquery实现则是很是繁琐。我一定会对不少id进行设置。

除此之外，还能够像angular那样进行循环渲染。经过v-for把数组数据进行循环显示，效果参考。

<div id="app"> <ul> <li v-for="todo in todos"> {{ todo.text }} </li> </ul> </div>

new Vue({ el: '#app', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue.js' }, { text: 'Build Something Awesome' } ] } })

固然method也能够进行绑定，经过v-on:click把Vue中的method绑定。

参考

• vue文档
• vue-loader

学习之路 <尤雨溪>

1. 扎实的 JavaScript / HTML / CSS 基本功。这是前置条件。

2. 通读官方教程 (guide) 的基础篇。不要用任何构建工具，就只用最简单的 <script>，把教程里的例子模仿一遍，理解用法。不推荐上来就直接用 vue-cli 构建项目，尤为是若是没有 Node/Webpack 基础。

3. 照着官网上的示例，本身想一些相似的例子，模仿着实现来练手，加深理解。

4. 阅读官方教程进阶篇的前半部分，到『自定义指令 (Custom Directive) 』为止。着重理解 Vue 的响应式机制和组件生命周期。『渲染函数（Render Function)』若是理解吃力能够先跳过。

5. 阅读教程里关于路由和状态管理的章节，而后根据须要学习 vue-router 和 vuex。一样的，先不要管构建工具，以跟着文档里的例子理解用法为主。
6. 走完基础文档后，若是你对于基于 Node 的前端工程化不熟悉，就须要补课了。下面这些严格来讲并非 Vue 自己的内容，也不涵盖全部的前端工程化知识，但对于大型的 Vue 工程是前置条件，也是合格的『前端工程师』应当具有的知识。

前端生态/工程化

1. 了解 JavaScript 背后的规范，ECMAScript 的历史和目前的规范制定方式。学习 ES2015/16 的新特性，理解 ES2015 modules，适当关注还未成为标准的提案。

2. 学习命令行的使用。建议用 Mac。

3. 学习 Node.js 基础。建议使用 nvm 这样的工具来管理机器上的 Node 版本，而且将 npm 的 registry 注册表配置为淘宝的镜像源。至少要了解 npm 的经常使用命令，npm scripts 如何使用，语义化版本号规则，CommonJS 模块规范（了解它和 ES2015 Modules 的异同），Node 包的解析规则，以及 Node 的经常使用 API。应当作到能够本身写一些基本的命令行程序。注意最新版本的 Node (6+) 已经支持绝大部分 ES2015 的特性，能够借此巩固 ES2015。

4. 了解如何使用 / 配置 Babel 来将 ES2015 编译到 ES5 用于浏览器环境。

5. 学习 Webpack。Webpack 是一个极其强大同时也复杂的工具，做为起步，理解它的『一切皆模块』的思想，并基本了解其经常使用配置选项和 loader 的概念/使用方法便可，好比如何搭配 Webpack 使用 Babel。学习 Webpack 的一个挑战在于其自己文档的混乱，建议多搜索搜索，应该仍是有质量不错的第三方教程的。英文好的建议阅读 Webpack 2.0 的文档，比起 1.0 有极大的改善，但须要注意和 1.0 的不兼容之处。

Vue 进阶

1. 有了 Node 和 Webpack 的基础，能够经过 vue-cli 来搭建基于 Webpack ，而且支持单文件组件的项目了。建议用 webpack-simple 这个模板开始，并阅读官方教程进阶篇剩余的内容以及 vue-loader 的文档，了解一些进阶配置。有兴趣的能够本身亲手从零开始搭一个项目加深理解。

2. 根据 例子 尝试在 Webpack 模板基础上整合 vue-router 和 vuex
3. 深刻理解 Virtual DOM 和『渲染函数 (Render Functions)』这一章节（可选择性使用 JSX)，理解模板和渲染函数之间的对应关系，了解其使用方法和适用场景。

4. （可选）根据需求，了解服务端渲染的使用（须要配合 Node 服务器开发的知识）。其实更重要的是理解它所解决的问题并搞清楚你是否须要它。
5. 阅读开源的 Vue 应用、组件、插件源码，本身尝试编写开源的 Vue 组件、插件。

6. 参考 贡献指南 阅读 Vue 的源码，理解内部实现细节。（须要了解 Flow）

7. 参与 Vue GitHub issue 的定位 -> 贡献 PR -> 加入核心团队 -> 升任 CTO -> 迎娶白富美.