数据库 JDK动态代理 volatile Mixin xml windows api canvas parameters 后台模板 郑州网站建设 mysql更新多个字段 mysql卸载重装 mysql查询结果拼接 matlab取绝对值 单片机开发板工作原理 mysql教程 python入门例子 python创建文件 java继承 java正则 java集合 java对象和类 java的输入 jdk环境配置 sql实例 php案例 战地2单机地图 bat脚本 主板排名天梯图 pdf拆分工具 战地联盟辅助 groupy spoonwep blued是什么软件 银头鲑鱼 批处理if 谷歌地球用不了 音乐狂app 汽车配件查询软件
当前位置: 首页 > 学习教程  > 编程语言

Vue 学习入门指南

2020/10/16 17:51:03 文章标签:

如果你是一名 Vue 开发新手,可能已经听过很多行话术语,比如单页面应用程序、异步组件、服务器端渲染等等,或者还听说过与 Vue 有关的一些工具和库,比如 Vuex、Webpack、Vue CLI 和 Nuxt。 那么究竟什么是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+支持。

image.png

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

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

结构图.png

根据架构图,我们可以知道Vue架构的搭建需要学会哪些知识!

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

《ECMAScript 6 入门教程》PDF版

ES2015简介和基本语法

一、View 和 Components

View 就是UI界面,实现基本是html+css,当然了,目前也有主流的UI组件库,我们只需要站在巨人的肩膀进行开发,可以更加高效。
####移动端UI组件库:有赞出品的 Vant
####PC端UI组件库:饿了么出品的 Element

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

二、Router

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

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

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

三、Vuex + Store

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

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

四、接口API + Mock

接口API就是网络请求,这里代码君推荐使用 axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

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

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

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

五、Directives

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

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

六、Mixins

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

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

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

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

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


本文链接: http://www.dtmao.cc/news_show_300208.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?