一个新手司机眼里的 Vue

先说一句题外话，对于 Vue 的探索和应用我只服 ElemeFE

基础

• 软件工程学
• 代码风格
• 基本功
• Vue.js 官方文档
• ES6

Vue 三大特性

数据的双向绑定

经过数据绑定链接 View 和 Model， 让数据的变化自动映射为视图的更新。

数据驱动的组件系统

用嵌套的组件树来描述用户界面，每个组件对应MVVM中的ViewModel。

基于构建工具的单文件组件系统

借助webpack强大的loader API，来定义对不一样文件格式的预处理逻辑，从而将 vue 文件看成 javascript 模块来使用，从而极大提高了代码的可复用性。

开始

俗话说“工欲善其事必先利其器”，再往前递推，工欲利其器必先得其器。在进行一次 vue 项目的开发以前，如何将 vue 引入是咱们面对的第一个问题。
这里我主要介绍两种引入方式。

传统的<script>大法

遥想当年，在和jQuery一块儿玩耍的时候，在每撸一个页面以前，都会先把jq的cdn路径放在处于</body>前的<script>里面，由于这样作才能够和她愉快的玩耍。
虽然说 jq 和 vue 不是一个概念（库 vs 框架），可是基于浏览器解析js的原理，二者能够用相同的方式引入。

npm install

NPM（Node Package Manager）是Node.js自带的一款包管理工具，只须要简单的在键盘上敲下
npm install *package name*
就能够将你须要的包安装至你的项目中，进而借助模块加载器就能够把她们引入到你的文件中。
固然，除了npm以外，还有其余的包管理工具，好比 bower 和 yarn，能够根据我的喜爱进行选择。
不过值得一提的是，yarn 是 Facebook 推出的一款包管理工具，他们的工程师在使用 npm 的时候发现了不少须要改进的地方，为了达到预期的效果，打造了 yarn 这款工具。因此，若是你感兴趣，能够试试 yarn。

评估

对于上面两种方式的选择，你须要权衡一些因素：

• 若是你是尝试在已有的项目中添加一点新鲜的血液做为预研，建议选择<script>标签的形式
• 若是你是在从零开始搭建一个 vue 项目，建议选择用包管理工具的方式

为何须要构建

要回答这个问题，就要追溯到另一个问题：在将代码发布到生产环境以前，咱们还须要作什么？
若是能回答好这个问题，咱们就会知道——到底为何须要构建？
答案能够大体分为如下几种：

• 预处理
• 代码风格检测
• 资源压缩
• 静态资源替换

由于本文侧重点的关系，这里说一下预处理。
这又是另一个问题了——为何须要预处理？
由于无时不刻都在面临着浏览器的兼容问题，好比说ES6，一些语法糖写起来确实很爽，可是并非全部浏览器都认识她；再者，React 的 jsx，Vue 的单文件，浏览器通通不认识，怎么办？只能预处理。
这里推荐 Vue 官方认证的好基友—— Webpack（其实我是gulp粉...）
若是你用的<script>来引入Vue，不用关注这个问题，由于你已经协助浏览器进行了“在线编译”。

组件化

Vue 的 slogan 是：轻量高效的前端组件化方案。
这些年，伴随着 React 对 Web component 的不断实践与推进，组件化的思想被前端er们毫无抵触的接受，相比 React，我的认为 Vue 对组件化的解决方案更加优雅一些——借助构建工具的单文件组件系统。
在一个.vue文件中，有三个主标签：<template>, <script>, <style>，分别对应着当前组件的结构、交互逻辑和样式。
口说无凭，举个栗子
先来看看 React 的 JSX

render(){
    let { item } = this.props;

    let children;
    if ( items.length > 0 ) {
        children = (
            <ul> { items.map( item => <li key={item.id}>{item.name}</li> ) } </ul>
        );
    } else {
        children = <p>No items found.</p>
    }

    return (
        <div className = 'list-container'> { children } </div>
    );
}复制代码

其实看起来也不是多么的不堪，可以利用完整的 JavaScript 功能来构建视图页面，也是一件有意义的事情。
相同的业务逻辑，用 Vue 来写

<template>
    <div class="list-container">
        <ul v-if="items.length">
            <li v-for="item in items">{{ item.name }}</li>
        </ul>
        <p v-else>No items found.</p>
    </div>
</template>复制代码

是否是比 React 的 jsx 语法和内联样式优雅的多呢？
你须要作的就是根据业务逻辑组织好你的 components tree，接着搭配一款模块化方案，就能实现一个基于 Vue 的单文件组件系统啦。
固然，Vue 也一样支持 jsx 语法，你也没必要非得采用单文件的组织形式，一切都取决于你的业务以及你的团队。

Vue Object

每一个 Vue 实例在被建立以前都要通过一系列的初始过程。Vue 在这一周期中提供了一些钩子函数，这就给我么提供了执行自定义逻辑的机会。

Vue 是否有“控制器”的概念？
答： 没有。可是你能够将组件的自定义逻辑分布并实如今这些钩子函数中。 、

附上一张描述 Vue 对象生命周期的官方神图 ↓

一个 Vue 实例的生命周期

作一下简单的翻译工做。

beforeCreate

在实例初始化以后，数据观测（data observer）和 event/watcher 事件配置以前被调用。

created

实例已经建立完成以后被调用。实例已经完成数据观测、属性和方法的运算、watch/event事件回调，但尚未开始挂载。

beforeMount

在挂在以前被调用

mounted

挂载以后

beforeUpdate

数据更新时调用，发生在 vdom 从新渲染和打补丁以前。

updated

因为数据更改致使的 vdom 从新渲染和打补丁，在这以后调用。

beforeDestroy

实例销毁以前调用。在这一步，实例仍然彻底可用。

destroyed

实例销毁以后调用。

数据流 & 事件流

组装好了各个组件，你如今面临的问题是——如何让这些东西协同工做？

Props

props 是定义在子组件中的属性，用来定义指望从父组件传入的数据（在父组件中向子组件添加 v-bind 绑定属性便可）。

Event

• 使用$on()监听事件
• 使用$emit()触发事件
• 使用$dispatch()派发事件，沿父链冒泡
• 使用$broadcast()广播事件，传导给全部的后代

有时候，你也许须要一个帮手—— vuex

当应用比较庞大，数据流和状态也会愈加的难以管理和维护，这个时候你就须要 vuex 了。

21秒精通 Vue.js

接下来从一个新手司机的角度，总结一些能够帮助你快速上手 Vue 的小经验。

不要一上来就用 vue-cli

连手枪都没打过，你一上来就问我要他娘的意大利炮？（一个出自《亮剑》的梗）

vue-cli是 Vue 官方推出的一款能够快速构建一个 vue app 的脚手架，各项配置也是全到没谁了。
可是，做为一个刚起步的选手，尤为是当你一开始要去搞的项目没那么复杂，仍是不要用vue-cli了，缘由有如下两点：

• 若是你像我同样（对于构建玩的不是特别6），当你在Terminal按照指引敲击完几条命令以后，看着各类配置文件，确定会一脸蒙蔽，会很是打击你的学习热情。
• 更多的时候，你的项目可能还不须要用到如此完(yōng)整(zhǒng)的构建体系。

因此，本身动手搭一个吧，从最简单的开始，早晚有一天你也能够写出一个100%切合本身项目的脚手架。

你不只须要ES6教程，还须要.babelrc

你是一个有理想的 JavaScript 开发者，你时刻关注着这门语言的发展趋势，终于有一天，你深深的迷恋上了ES6，她诸多的新特性都令你为之神往，因此你决定紧随她的脚步。
但事与愿违，不少浏览器在很大程度上并不认同这位姑娘，因此你须要做为中间人，让这些观念老旧的浏览器认识到新时代的风尚——这就是编译（此案例默认为预编译）。
一般状况下，咱们在构建工具中引入babel对本身的脚本进行语法上的转换，实现向后兼容。
好比在webpack.config.js中引入这样的规则：

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015', 'stage-0']
    }
}复制代码

事实证实，在大多数状况下，这样是ok的。
但，当咱们的项目是借助构建工具实现的单文件组件系统时，咱们的 JavaScript 都写在了.vue文件中，因此当你编译以后会获得一堆错误，这些错误都是在你使用ES6语法的地方出现的。
缘由是由于咱们用vue-loader去处理.vue文件，这自己没错。可是，vue-loader用到了babel-loader，却没有配置babel-loader的地方，因此呢，gg。
查看官方文档，就会找到解决办法。

“babel-loader respects .babelrc, so it is the recommended approach to configure the Babel presets and plugins.”

参加这里。
综上，把 babel 相关配置放到 .babelrc 文件中去。

使用组建以前先注册

想上车？先买票！

组件 (Components) 是 Vue.js 最强大的功能之一。

若是你没有使用那个单文件组件系统，在使用组件的时候，你要这么作 ↓ （注册一个全局组件，Vue.component(tagName, options)）

Vue.component('my-component',{
    // options
});复制代码

组件在注册以后，即可以在父实例的模块中以自定义元素<mu-component></my-component>的形式使用。
要确保在初始化根实例以前注册了组件：

<div id="example">
    <my-component></my-component>
</div>复制代码

// 注册
Vue.component('my-component', {
    template: '<p>Hello Vue component</p>'
});

// 建立根实例
new Vue({
    el: '#example'
});复制代码

你也能够经过使用组件实例选项注册，可使组件仅在另外一个实例/组件的做用域中可用，这也是单文件组件系统的注册方式，即局部注册。
官方文档写的已经很是详细了，若是你仍然对这里有疑虑，给你一个传送门。

父子组件是怎么协同工做的？

父子组件的关系能够总结为 props down, events up。
父组件经过 props 向下传递数据给子组件，子组件经过 events 给父组件发送消息。
这就比如，老子给儿子生活费（props），儿子一有事就告诉老子：“爸，我没钱了”、“爸，有人打我”、“爸，我饿了”（events）。

父子组件协做方式

让你更方便的调试 Vue

官方提供了一款 Chrome 插件，用于调试你的 Vue app —— Vue.js devtools。

最后

全文是从我的的视角出发，描述对 Vue 的认识以及在开发过程当中一些问题的理解。
若是有不正确、或是与你理解有误差的地方，但愿你能指出这些问题，共同窗习。

一个还算有趣的前端