Vue入门（一）

转：Vue入坑史，从一个简单的项目提及（一）

 

最近一直在学习Vue，官方文档也粗略的看过三四遍吧（有的东西总是记不住，多是老了，开个玩笑）。而后本身写了一个简单的Demo，模拟了iPhone端的微信界面，实现了一个简单的聊天功能。

这里是GitHub的项目地址，目前虽然仍是个半成品（有点懒），但对于初学者来讲应该会有帮助，由于我也是初学者。使用到的技术栈包括Vue，Vuex，Vue-router，Vue-cli，Pug，Sass等。点击这里可在线查看效果，建议使用谷歌浏览器并在手机调试模式下查看。

这不是一篇纯技术文章，更多的是我本身总结的一些方法和对Vue的理解。

初学者的难题

根据我学习的经历，我以为对于初学者学习Vue（或React）最大的难题可能就是环境的搭建，尤为是对于没有NodeJS方面经验的人来讲。这里我要说一下本身对于学习Vue的一些看法，可供参考。

从Vue-cli开始

vue-cli是官方提供的一个命令行工具，能够一键部署开发环境，这样会省去不少麻烦。另外，经过vue-cli部署的环境能够直接进入到单文件组件的学习，这对之后的学习可能会更有帮助。若是本身搭建环境，一个webpack的相关配置均可能把你的意志消磨殆尽（webpack我就踩过不少坑），我猜不少学习Vue或React的新手都是死在环境搭建的过程当中。初学者应该把注意力集中在Vue自己，等体会到其中的“乐趣”以后再回过头来学习npm和webpack等相关知识可能会更好。

vue-cli使用以下，建议使用cnpm代替npm，具体可自行百度或Google。

# 全局安装 vue-cli npm install -g vue-cli # 建立一个基于 Webpack 模板的项目 vue init webpack my-project # 安装依赖 cd my-project npm install # 运行 npm run dev

直接进入到单文件组件开发

Vue能够直接经过script标签引入到HTML文件中，但我不建议这样学习。由于这就违背了学习Vue的初衷，Vue是一个MVVM框架，其核心思想就是分组件开发，组件的复用，组件解耦。

Vue还可使用字符串模板以及Render渲染来开发组件，其弊端也很明显。字符串模板不支持语法高亮，并且写起来也不直观。Render函数渲染相对比较复杂，并且也不直观。最重要的是他们都没法封装CSS样式，也没法使用预处理器（Pug和Sass）。

单文件组件（.vue后缀名）很好的实现了组件的封装，让组件看起来更像组件。文件结构以下：

<template lang="html">
    <!-- 这里是组件的 HTML 标签 -->
</template>

<script>
export default {
    // 这里是组件 js 代码
}
</script>

<style lang="scss" scoped>
// 这里是组件的 CSS 样式
</style>

选择一款合适的编辑器

我曾经无数次纠结过这个问题：究竟是使用Sublime，VS Code，仍是Atom？或是WebStorm？百度一下，人们对这些工具也是各执其词，根本毫无可比性，一会儿更不知如何选择了（选择困难症，十分痛苦）。如今想一想其实也十分好笑，咱们彻底不必把时间花在这些无聊的事情上。这些编辑器我在Windows和MacOS中都尝试过，最终仍是选择了Sublime阵营。

简单的说一下，选择Sublime一个字快，两个字稳定，三个字插件丰富（伪装三个字）。Atom界面最好看，尤为是在MacOS下；VS Code没什么心得，就是不喜欢；WebStorm至关于IDE，笨重但功能齐全，前端初学者神器（也是个人入门工具）。Atom我也是比较看好的，只是闲置在电脑中，暂时没怎么用。

若是你也跟我同样纠结的话，那我建议你选择Sublime，什么也别想，就选它。记住它的一些快捷操做，和一些实用技巧，我相信你会慢慢爱上它的。

Sublime做为前端编辑器，推荐几个好用的插件：

• Emmet：前端必备神器；
• DocBlockr：统一文档注释的风格；
• Babel：支持ES6语法；
• Pug：Jade的新叫法，语法高亮；
• Sass：支持Sass语法高亮；
• Vue Syntax Highlight：Vue必备，语法高亮。

另外推荐一款我在用的主题：Theme - SoDaReloaded。

纵观全局

我一直有一个观点：就是看事物要先看全局，忽略那些繁琐的细节，而后再逐个深究。好比看书要先看目录（虽然我讨厌看书），首先作到内心有数，知道本身在看什么或有没有必要再看下去(好比这篇文章)。

比较重要的几个概念

我不是一个语言表达能力很好的人，不会扯那些概念，我只能尽量的说一些本身的理解。

这里先说一句，Vue中的this通常都指向当前的Vue实例。也是就说，在哪一个组件中使用，this就指向哪一个组件。固然，这只是对于组件自己具备的属性和方法而言。

Vue实例

经过Vue开发单页面项目，一个项目就是一个Vue实例（暂且这么理解吧），也就是经过new Vue()语句建立的对象。那么既然有了一个实例，那么要显示出来，就得放入HTML文档中，这就是挂载。对应语法：

new Vue({
    // el是实例挂载点，会将根组件替换掉原文档中id为 app 标签
    el: '#app',
    // 经过render函数渲染
    render: h => {
        // 这里App是根组件
        h(App)
    }
})

// 第二种写法
new Vue({
    el: '#app',
    // 经过字符串模板
    template: '<App />',
    components: { App }
})

Vue扩展实例

严格来讲，经过new Vue()方式建立的实例叫作根实例，而还有一种叫扩展实例。这里引用官方的一句话：全部的 Vue.js 组件其实都是被扩展的 Vue 实例（其实我也是刚刚理解）。

扩展实例建立方式：

const MyComponent = Vue.extend({
    // 该对象就至关于 单文件组件中 export 导出的对象
    // 这就是为何说 全部的Vue组件都是被扩展的Vue实例
})
// 建立扩展实例
const component = new MyComponent()

一样的，Vue扩展实例也须要挂载，其语法与根实例挂载同样：

// 会替换掉 HTML 文档中 id 为 app 的标签
new MyComponent({el: '#app'})
// 可是这里不建议这么作，由于这样会与实例挂载点冲突
// 这里仅仅是为了说明扩展实例与 根实例的类似之处

扩展实例一个重要的用法就是在须要的时候才被插入到HTML文档中。好比点击一个按钮，弹出一个模态（modal）框。在个人Demo中，正是经过该方法实现一个加载等待的模态框。经过此方法有一个好处就是，能够将该功能封装成一个Vue插件，须要的时候经过一条指令就能够将组件插入到文档中，不须要预先将组件写入到HTML文档中。方法以下：

// 建立扩展实例
let component = new MyComponent()
// 挂载到虚拟DOM中
// 不传递参数，若传递参数会挂载到指定的地方
component  = component.$mount()
// 经过原生语法将 扩展实例添加到HTML文档中
document.body.appendChild(component.$el)

一样，Vue根实例也能够经过该方式挂载到HTML中。

组件

组件就是扩展的Vue实例（哈哈）。反正记住在Vue中，一切可见的东西（但不限于可见的东西）都是组件，一个Vue实例就是由一大堆组件经过必定的组合和嵌套累积起来的。

学习组件无外乎就是它的建立和使用，经过扩展Vue实例也算是一种建立的方式，另外还有字符串模板和render函数渲染的方式。我一开始就建议直接使用单文件组件，具体请转移官方文档或从GitHub上Clone个人demo查看详情。

生命周期

每一个组件都有本身的生命周期，从广义上来讲，Vue实例其实也是一个组件。通常经常使用的几个生命周期钩子：created，mounted，updated，destroyed。mounted基本上用的最多。

所谓的生命周期钩子，就是说组件在特定的时刻会自动触发该事件，执行对应的函数。

学习Vue的基本思想

程序员，其实大部分时间是用于思考的。创建一种思想，一种思惟方式很重要。这也是我如今一直在努力作的事。

学习一个框架，就要站在它的角度去思考问题。而Vue是一种MVVM模式的框架，因此有必要先理解什么是MVVM？而后再去思考Vue的基本原理，它能作什么？又是如何作到的？为何要使用Vue？能够去看一下官方文档：Vue与其余框架的对比。

什么是MVVM

M就是Model（模型），V就是View（界面），MVVM也是就说经过模型的改变来更新界面，而后经过界面的一些行为事件又来做用于模型。固然，这只是从字面上来解释。要更好的体会到Vue的MVVM思想，我建议去学习Vuex。

以前，咱们使用jQuery或原生JS要想更改界面上的内容，首先必须找到对应的DOM节点，而后经过直接操做DOM的语句来改变界面上的内容。而MVVM的思惟方式就是：一个模型对应一个界面，界面的状态和显示的内容彻底取决于它对应的模型。而咱们只需改变模型，后台（Vue）就会经过某种机制自动去更新界面。

什么是MVC

顺便谈一下MVC设计模式，它实际上是出如今MVVM以前，其中的C是指Controller（控制器）。MVC的基本思想就是：模型与界面之间的通讯都是经过中间的控制器实现的。因此它的缺陷就是控制器层须要处理大量的业务逻辑代码，不利于开发和维护。

Vue的基本原理

我没有研究过Vue的源码，也解释不出来它是怎么实现的？毕竟咱们是使用框架，经过它来提升开发效率，不必太过于深究，不然就失去了使用它的意义（大神请忽略之）。记住一句话：咱们是站在巨人的肩膀上开发的。若是什么都要去深究其原理，那还不累死？

Vue的核心是组件，一切能够看见的东西都是由组件构成。而后经过把不一样的组件组合和嵌套在一块儿，最终组成了一个根组件，也就是App。根组件会挂载到Vue的根实例中，而Vue根实例自己也相对于一个组件，而后又挂载到真实的HTML文档中。对应的语句也就是main.js文件中的语句。

new Vue({
    // 该属性会 将Vue实例挂载到 真实的HTML中
    el: '#app',
    // App 就是根组件，被挂载到Vue实例中
    render: h => h(App)
})