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

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.js的前提是掌握了 html/js/css,这块应该没什么难度,大家很容易就能掌握。 接下来需要掌握ES6, 这是大前提一定要懂,一定要懂,一定要懂, 推荐阅读阮一峰的ES6入门,基础这里必须掌握,否则也没必要往下阅读,因为没学会走路就想跑,很容易摔倒!

View 就是UI界面,实现基本是html+css,当然了,目前也有主流的UI组件库,我们只需要站在巨人的肩膀进行开发,可以更加高效。

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

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

对于新手来说,你只需要知道,路由Router 用来分发请求对应跳转的界面,比如用户访问网址:我们需要根据请求路径,通过路由的方式,配置跳转对应的界面

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

上面比较官方,我举一个具体例子,比如我们写界面需要判断是否登陆,一般是根据token,这个token的状态管理就是用Vuex+Store,存储token状态,然后每次调用接口的时候,取出token数据,如果为空,自动跳转到登陆界面,所以你只需要理解Vuex + Store 用于存储,类似轻量级数据库

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

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

自定义指令,就是除了VUE定义的指令外,还支持用户注册自定义指令,那么你可能会问,什么是vue的指令,我举几个常用的指令,后续你一定会碰见的 – v-bind指令: 是Vue中,提供的用来绑定属性的指令,只能实现数据的单向绑定,从M自动绑定到V,无法实现数据的双向绑定。 – v-model指令:Vue中唯一一个实现双向数据绑定的指令, 注意 : 只能运用到表单元素中 – v-for指令: 用于写循环界面,比如列表页,复用同一个view – v-if 和 v-else 和 v-else-if 还有 v-show指令:用于控制界面是否显示,或者瞒住什么条件进行显示 上面举的例子是比较常用的,这个新手有一个概念就好,自定义指令还用不到对于新手,但是系统定义的那些常用指令,我们必须熟悉哈~

混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。

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

那么可能有人会问,抽离出工具类不也可以嘛! Mixins 和抽离出来的工具类有什么差别呐? 工具类只能针对方法进行抽离,Mixins 可以说更加强大,是可以根据生命周期进行抽离的,比如A、B、C界面都需要在创建的时候,验证有没有登陆,就可以在创建的生命周期里面抽离出验证登陆的方法,然后在通过Mixins插入到各个界面里

新手只需要了解 表现层与 API 层,业务层比较深入,可以后面再了解,工具层大家都比较好理解,就是一些常用的时间日期管理工具类、浮点计算等工具类的封装,基础设施层,代码君在下一篇文章,Vue 入门环境搭建进行讲解!

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

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注