【6月日新计划更文活动】第2天

nextTick

1、语法：this.$nextTick(回调函数)        在DOM更新完毕之后执行一个回调

2、作用：在下一次 DOM 更新结束后执行其指定的回调

3、什么时间用：当改变数据后，要基于更新后的新DOM 进行某些操作时，要在 nextTick 所指定的回调函数中执行

Vue 封装过渡与动画

1、作用：在插入、更新或移除 DOM 元素时，在合适的时候给元素添加样式类名

2、图示：

3、写法： 1）、准备好样式：元素进入样式时：①、v-enter：进入的起点 ②、v-enter-active：进入过程中 ③、v-enter-to：进入的终点 元素离开样式时：①、v-leave：离开的起点 ②、v-leave-active：离开过程中 ③、v-leave-to：离开的终点 2）、使用 包裹要过度的元素，并配置 name 属性：

<transition name="hello" appear="">
  <h1 v-show="isShow">你好啊</h1>
</transition>

3、备注：若有多个元素需要过度，则需要使用：, 且每个元素都要指定 key

vue 脚手架配置代理

方法一： 在 vue.config.js 中添加如下配置

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

优点：配置简单，请求资源时直接发给前端 (8080) 即可。

缺点：不能配置多个代理，不能灵活的控制请求是否代理。

工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 (优先匹配前端资源)

方法二： 编写 vue.config.js 配置具体代理规则

module.exports = {
  devServer: {
    proxy: {
      '/api': { //匹配所有以 '/api' 开头的请求路径
        target: '<url>', //代理目标的基础路径
        ws: true,
        changeOrigin: true,
        pathRewrite: {'^/api': ''},
      },
      '/foo': { //匹配所有以 '/foo' 开头的请求路径
        target: '<other_url>' //代理目标的基础路径
      }
    }
  }
}
/*
changeOrigin 设置为 true 时，服务器收到的请求头中的 host为：http://localhost:8000
changeOrigin 设置为 false 时，服务器收到的请求头中的 host为：http://localhost:8080
changeOrigin  的默认值为 true
*/

优点：可以配置多个代理，且可以灵活的控制请求是否代理

缺点：配置稍繁琐，请求资源时必须加前缀

Vue 中的 Ajax

github接口 API 地址：api.github.com/search/user…

开放 API 地址：api.uixsj.cn/hitokoto/ge…

一言 语句接口 API： hitokoto.cn/

天气 API ：xsdggw.cn/t/api/wethe…

开源社区：api.apiopen.top/

段子API：api.apiopen.top/getJoke

Vue项目中常用的Ajax 库

axios： 通用的Ajax 请求库，官方推荐，使用广泛

// 错误处理
const errorHandle = (status, info) => {
  switch (status) {
    case 400:
      console.log("语义有误");
      break;
    case 401:
      console.log("服务器认证失败");
      break;
    case 403:
      console.log("服务器拒绝访问");
      break;
    case 404:
      console.log("地址错误");
      break;
    case 500:
      console.log("服务器遇到意外");
      break;
    case 502:
      console.log("服务器无响应");
      break;
    default:
      console.log(info);
      break;
  }
}

可以进行全局地址配置，配置响应时间等额外封装。

vue-resource： vue插件库，Vue1.x 使用广泛。官方已不维护