Vue 过渡动画、配置代理解决跨域(笔记)

1. Vue 过渡与动画

• 作用：Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果

• 写法：当标签没有 name 属性时，样式默认为 v 开头，有 name 属性时，以 name 属性值开头

  • 元素进入的样式：

    1. v-enter：进入的起点，(name=“text”，text-enter)
    2. v-enter-active：进入过程中
    3. v-enter-to：进入的终点

  • 元素离开的样式：

    1. v-leave：离开的起点
    2. v-leave-active：离开过程中
    3. v-leave-to：离开的终点

• 单个元素过渡：

  <transition name="text">
    <h1 v-show="isShow">你好啊！</h1>
  </transition>
  

• 多个元素过渡：需要绑 key 值，并且唯一

  <transition-group name="text">
    <h1 v-show="isShow" :key="1">你好啊！</h1>
    <h1 v-show="!isShow" :key="2">你好啊！</h1>
  </transition-group>
  

• 过渡模式：属性 mode

  • in-out：新元素先进行过渡，完成之后当前元素过渡离开。
  • out-in：当前元素先进行过渡，完成之后新元素过渡进入。

• 外部映入动画库：

  <transition 
    enter-active-class="进入动画"
    leave-active-class="离开动画"
    >
  </transition>
  

1.1 过渡动画生命周期

• before-enter：进入之前
• enter：过渡曲线
• after-enter：过渡完成
• enter-cancelled：过渡中断

2. vue 脚手架配置代理

2.1 单个代理配置

在 vue.config.js 中添加如下配置：前端端口8080，后端端口5000，解决跨域

devServer:{
  proxy:"http://localhost:5000"
}

1. 优点：配置简单，请求资源时直接发给前端(8080)即可。
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
3. 工作方式：先匹配本地资源，如果前端不存在该资源时，那么该请求会代理转发给服务器

2.2 多个代理配置

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

module.exports = {
	devServer: {
      proxy: {
      "/api1": { // 匹配所有以 "/api1"开头的请求路径
        target: "http://localhost:5000", // 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {"^/api1": ""}
      },
      "/api2": { // 匹配所有以 "/api2"开头的请求路径
        target: "http://localhost:5001", // 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {"^/api2": ""}
      }
    }
  }
}
/*
   changeOrigin 设置为 true 时，服务器收到的请求头中的 host 为：localhost:5000
   changeOrigin 设置为 false 时，服务器收到的请求头中的 host 为：localhost:8080
   changeOrigin 默认值为 true，欺骗服务端端口号
*/

1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
2. 缺点：配置略微繁琐，请求资源时必须加前缀。