前端知识点总结——VUE

来源地址:

https://segmentfault.com/a/1190000013378197

前端知识点总结——VUE(持续更新中)

1.框架和库的区别:

框架:framework 有着自己的语法特点、都有对应的各个模块
库 library 专注于一点

框架的好处:

UI:user interface
GUI : graphical user interface
CLI : command line interface
API : application interface

思维模式的转换:

2.Vue概述

3.Vue中基础知识

4.组件化

5.自定义指令

6.过滤器

过滤器是针对一些数据 进行筛选、过滤、格式化等相关的处理,变成我们想要的数据

过滤器的本质 就是一个带有参数带有返回值的方法

Vue1. 支持内置的过滤器,但是Vue2. 就不再内置过滤器,但是支持自定义过滤器。

1、过滤器的创建和使用

2、如何在调用过滤器时,完成参数的发送和接受

7.复合组件

8.生命周期

9.常用属性

10.组件间通信

11.补充组件创建的方式

12.路由模块

路由模块的本质 就是建立起url和页面之间的映射关系

1、SPA的基本概念和工作原理

2、路由模块的基本使用

3、使用路由模块来实现页面跳转的方式

4、完成参数的传递

5、路由嵌套

13.搭建基于CLI开发环境的方式

14.axios

1.axios的get方法

2.axios的post方法

export const postAjax= function (getUrl,postAjaxData) {
return axios.get(postUrl, {

})
}

3.axios的拦截器
主要分为请求和响应两种拦截器,请求拦截一般就是配置对应的请求头信息(适用与常见请求方法,虽然ajax的get方法没有请求头,但是axios里面进行啦封装),响应一般就是对reponse进行拦截处理,如果返回结果为[]可以转化为0

1.请求拦截:将当前城市信息放入请求头中

axios.interceptors.request.use(config => {
config.headers.cityCode = window.sessionStorage.cityCode //jsCookie.get(‘cityCode’)
return config
},

2.响应拦截:处理reponse的结果

NPM常用更新命令

查看安装了哪些包

 

promise,回调函数等

Promise的含义
promise是异步编程的一种解决方法,比传统的回调函数和事件更合理更强大
。他由社区最早提出和实现,ES6将其写进语言标准,统一了用法,原生提供了promise对象。
所谓promise,简单说是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果,从语法上说,promise是一个对象,从它可以获取异步操作的消息,promise提供了统一的API,各种异步操作都可以用同样的方法进行处理。
promise对象的特点
(1)对象的状态不受外界影响,promise对象代表一个异步操作,有三种状态,pending(进行中)、fulfilled(已成功)、rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态,这也是promise这个名字的由来“承若”;
(2)一旦状态改变就不会再变,任何时候都可以得到这个结果,promise对象的状态改变,只有两种可能:从pending变为fulfilled,从pending变为rejected。这时就称为resolved(已定型)。如果改变已经发生了,你再对promise对象添加回调函数,也会立即得到这个结果,这与事件(event)完全不同,事件的特点是:如果你错过了它,再去监听是得不到结果的。

有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。

Promise也有一些缺点。首先,无法取消Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。第三,当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

一,用法
promise对象是一个构造函数,用来生成promise实例;
创建一个promise对象实例

Promise构造函数接收一个函数作为参数,该函数的两个参数分别是resolve和reject,他们是两个函数,由Javascript引擎提供,不用自己部署。

resolve函数的作用是,将promise对象的状态从“pending”变为‘’resolved‘’,在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;

reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数

then方法可以接受连个回调函数作为参数,第一个回调函数是promise对象的状态变为resolved时调用,第二个回调函数是promise对象的状态变为rejected时调用,其中,第二个函数是可选的,不一定要提供,这两个函数都接受promise对象传出的值作为参数;
promise对象的简单例子

timeOut方法返回一个promise实例,表示一段时间以后才会发生的结果,过了指定的时间(ms)以后,promise实例的状态变为resolved,就会触发then方法绑定的回调函数

通俗点讲

resolve和reject就是发信号弹的,如果promise里的异步操作成功了,用 resolve 改promise的状态为 resolved(还可以发送异步操作的结果),执行then里的第一个回调函数,如果操作失败了,用reject改promise的状态为rejected,执行then里的第二个回调函数获catch。

iview-admin登录权限控制

有2个地方,ivew使用mockjs模拟了后台数据,所以找到处理login请求的地方。mock文件夹中的login.js,模拟后台数据,直接返回了token值

其次在vuex里找到判断是否登录的地方,登录成功将设置token。文件是store文件夹中的user.js文件

JS 数组赋值=引用?

今天发现一个问题,如下所示

当改变arrayA的值的时候,ArrayB也同步修改了,有点像C语言指针的意思,网上查了下,果然是数组引用的意思。那么如何实现只是复制数组呢?

方法一

方法二

var arrayA = ArrayB.concat()

checkLogin()

路由设置,判断是否存在对应的cookie

VUE中mounted checkLogin()

全局路由拦截

在app.js路由前添加

带参数的路由拦截有两种方式

第一种:req.originalUrl.indexOf(‘/goods/list’)

第二种: req.path == ‘/goods/list’