Vue 学习入门指南

点击上方“代码集中营”，设为星标

优秀文章，第一时间送达！

若是你是一名 Vue 开发新手，可能已经听过不少行话术语，好比单页面应用程序、异步组件、服务器端渲染等等，或者还据说过与 Vue 有关的一些工具和库，好比 Vuex、Webpack、Vue CLI 和 Nuxt。

那么究竟什么是Vue，有什么做用？

Vue.js是一套用于构建用户界面的渐进式框架，主要用于快速的构建前端界面，与其它大型的前端框架不一样，Vue被设计为能够自底向上逐层应用。

相比Angular.js来讲，Vue的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合，是初创项目的前端首选框架。

做为一个新兴的前端框架，Vue.js大量借鉴和参考了Angular.js和React.js等优秀的前端框架。而在版本支持上，Vue.js抛弃了对IE8的支持，对移动端的支持也有必定的要求，也就是说使用Vue.js进行移动跨平台开发时须要Android 4.2+和iOS 7+支持。

Vue在MVVM模式中，充当的是VIewModel，就是用于处理数据交互与相应

言归正传，要入门Vue须要掌握哪些呐，这是代码君绘制的结构图

根据架构图，咱们能够知道Vue架构的搭建须要学会哪些知识！

首先，在学习vue.js的前提是掌握了 html/js/css，这块应该没什么难度，你们很容易就能掌握。接下来须要掌握ES6, 这是大前提必定要懂，必定要懂，必定要懂， 

推荐阅读阮一峰的 ES6入门^[1]，基础这里必须掌握，不然也不必往下阅读，由于没学会走路就想跑，很容易摔倒！

《ECMAScript 6 入门教程》PDF版^[2]

ES2015简介和基本语法^[3]

1
 View 和 Components

View 就是UI界面，实现基本是html+css，固然了，目前也有主流的UI组件库，咱们只须要站在巨人的肩膀进行开发，能够更加高效。

移动端UI组件库：有赞出品的 Vant^[4]

PC端UI组件库：饿了么出品的 Element^[5]

Components 就是组件，你能够这么理解，一个View 能够由多个Components组件构成，好比一个列表页，能够由头部组件+列表组件+尾部组件，构成一个界面，做为新手，组件化能够先放一下，先学会利用成熟的组件库，进行UI开发便可，新手经过现成的UI库，会比较容易快速实现UI界面

2
 Router

Vue Router^[6] 是 Vue.js^[7] 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

•嵌套的路由/视图表•模块化的、基于组件的路由配置•路由参数、查询、通配符•基于 Vue.js 过渡系统的视图过渡效果•细粒度的导航控制•带有自动激活的 CSS class 的连接•HTML5 历史模式或 hash 模式，在 IE9 中自动降级•自定义的滚动条行为

对于新手来讲，你只须要知道，路由Router 用来分发请求对应跳转的界面，好比用户访问网址：http://localhost:8088/pageA , http://localhost:8088/pageB,咱们须要根据请求路径，经过路由的方式，配置跳转对应的界面

3
 Vuex + Store

什么是vuex？Vuex^[8] 是一个专门为 Vue.js 应用设计的 状态管理模型 + 库。它为应用内的全部组件提供集中式存储服务，其中的规则确保状态只能按预期方式变动。状态改变了，对应的视图也会改变。

上面比较官方，我举一个具体例子，好比咱们写界面须要判断是否登录，通常是根据token，这个token的状态管理就是用Vuex+Store,存储token状态，而后每次调用接口的时候，取出token数据，若是为空，自动跳转到登录界面，因此你只须要理解Vuex + Store 用于存储，相似轻量级数据库

4
 接口API + Mock

接口API就是网络请求，这里代码君推荐使用 axios axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它自己具备如下特征：

•从浏览器中建立 XMLHttpRequest•从 node.js 发出 http 请求•支持 Promise API•拦截请求和响应•转换请求和响应数据•取消请求•自动转换JSON数据•客户端支持防止 CSRF/XSRF

这里新手只须要知道网络请求框架咱们用的是axios，后续代码君会出专门文章对 axios 使用进行讲解

Mock专业术语就是数据模拟，有了mockjs，前端工程师不再用等后端人员开发好以后再测数据了，由于mockjs能够拦截ajax请求，有了mockjs咱们能够模拟后台返回数据，以方便的进行一系列的操做。这个新手能够先了解一下概念，后续在网络请求模拟数据的时候会用到，到时候也会专门讲解的

5
 Directives

自定义指令，就是除了VUE定义的指令外，还支持用户注册自定义指令，那么你可能会问，什么是vue的指令，我举几个经常使用的指令，后续你必定会遇见的

•v-bind指令：是Vue中，提供的用来绑定属性的指令,只能实现数据的单向绑定,从M自动绑定到V,没法实现数据的双向绑定。•v-model指令：Vue中惟一一个实现双向数据绑定的指令, 注意 : 只能运用到表单元素中•v-for指令：用于写循环界面，好比列表页，复用同一个view•v-if 和 v-else 和 v-else-if 还有 v-show指令：用于控制界面是否显示，或者瞒住什么条件进行显示 上面举的例子是比较经常使用的，这个新手有一个概念就好，自定义指令还用不到对于新手，可是系统定义的那些经常使用指令，咱们必须熟悉哈~

6
 Mixins

混入 (mixins)：是一种分发 Vue 组件中可复用功能的很是灵活的方式。混入对象能够包含任意组件选项。当组件使用混入对象时，全部混入对象的选项将被混入该组件自己的选项。

这个概念官方说的比较绕，我举一个简单的例子，Vue 界面一些公用的东西，好比头部、尾部，不是能够经过Components实现组件化开发，当咱们在开发JS代码的时候，若是遇到多个界面执行相同的逻辑代码，是否也能够抽离出来呐？基于这个思考，Mixins就出来了，Mixins至关于js中的组件化，把相同的抽离出来，而后再经过Mixins插入到js里面

那么可能有人会问，抽离出工具类不也能够嘛！Mixins 和抽离出来的工具类有什么差异呐？工具类只能针对方法进行抽离，Mixins 能够说更增强大，是能够根据生命周期进行抽离的，好比A、B、C界面都须要在建立的时候，验证有没有登录，就能够在建立的生命周期里面抽离出验证登录的方法，而后在经过Mixins插入到各个界面里

新手只须要了解 表现层与 API 层，业务层比较深刻，能够后面再了解，工具层你们都比较好理解，就是一些经常使用的时间日期管理工具类、浮点计算等工具类的封装，基础设施层，代码君在下一篇文章，Vue 入门环境搭建 进行讲解！

好了，此次的入门指南就这些，此篇文章是对 Vue 总体的框架进行宏观剖析，就是但愿初学者能对 Vue 设计到的知识面有一个宏观的概念，以后代码君会分别对涉及到的知识点依次进行讲解！

《ECMAScript 6 入门教程》PDF版下载地址：https://089u.com/file/17143538-463130700

好文推荐

微信小程序版2048

基于Python搭建Django后台管理系统

Android 8.0 版本更新的适配