一、过渡

1、单元素/组件的过渡

Vue 提供了transition的封装组件，将需要有过渡效果的内容用transition组件包裹起来。
v-enter：这是入场动画开始之前的状态，即原状态到达到动画效果的时间段的起始点。
v-leave-to：是离场动画结束后的状态，即动画效果还原到初始状态后的结束点。

<button @click="isShow=!isShow">显示/隐藏</button>
<transition name="box">
   <div class="box" v-show="isShow">我一定会好好学习的</div>
</transition>

// 进入时样式 和 离开时样式
// 过滤的持续时间
.box-enter-active, .box-leave-active {
  transition: all 1s;
}
// 开始进入样式 和 离开完成样式
// 过渡的具体动作
.box-enter, .box-leave-to {
  transform: translateX(10px);
  // 注意：这里只能设置透明为0
  opacity: 0;
}

2、多个组件的过渡

transition-group组件：用于包裹多个组件的过渡。transition-group组件会以一个真实元素呈现：默认为一个 <span>，可以通过tag属性更换为其他元素。

<transition-group name="box" tag="ul">
  <li v-for="(item,index) in goodses" :key="item.id">{{item.id}}-{{item.name}}
    <button @click="goodses.splice(index,1)">删除</button>
  </li>
</transition-group>

// 进入时样式 和 离开时样式
// 过滤的持续时间
.box-enter-active, .box-leave-active {
  transition: all 1s;
}
// 开始进入样式 和 离开完成样式
// 过渡的具体动作
.box-enter, .box-leave-to {
  transform: translateX(10px);
  // 注意：这里只能设置透明为0
  opacity: 0;
}

二、nanoid

nanoid是使用 JavaScript 开发、一个小型、安全、对 URL 友好的唯一字符串 ID 生成器。

1、安装

npm install nanoid

2、导入

import { nanoid } from 'nanoid'

3、使用

this.goodses.push({
    id: nanoid(),
    name: '丰田'
})

可以指定生成字符串的长度：

id: nanoid(5)

三、代理服务器

ajax请求数据，必须要遵循同源策略：请求地址的协议名，主机名(域名或ip地址)，端口号，必须跟当前地址相同；否则就是跨域请求。
解决跨域有两种途径：① 后端允许跨域；② 前端想办法骗过后端实现跨域（jsonp技术，代理服务器技术）。

1、搭建服务器

1号服务器：

// 导入express
let express = require("express");
// 创建一个服务器对象
let app = express();
// 开启一个端口号
app.listen(5566, () => {
  console.log("服务器成功开启！端口号5566");
});

//配置中间件，拦截所有的请求
app.use((req, res, next) => {
  //允许跨域
  // res.setHeader("Access-Control-Allow-Origin", "*");
  next();
});

//学生数组
let stus = [
  {
    no: "1001",
    name: "张三",
    age: 20,
    sex: "男",
  },
  {
    no: "1002",
    name: "李四",
    age: 22,
    sex: "女",
  },
  {
    no: "1003",
    name: "王五",
    age: 24,
    sex: "男",
  },
]

// 定义一个get请求接口
app.get("/list", (req, res) => {
  res.send(stus);
});

2号服务器：

// 导入express
let express = require("express");
// 创建一个服务器对象
let app = express();
// 开启一个端口号
app.listen(7788, () => {
  console.log("服务器成功开启！端口号7788");
});

//配置中间件，拦截所有的请求
app.use((req, res, next) => {
  //允许跨域
  // res.setHeader("Access-Control-Allow-Origin", "*");
  next();
});

//汽车数组
let cars = [
    {
      id: "1001",
      name: "奔驰"
    },
    {
      id: "1002",
      name: "宝马"
    },
    {
      id: "1003",
      name: "奥迪"
    },
  ]

// 定义一个get请求接口
app.get("/list", (req, res) => {
  res.send(cars);
});

2、配置代理

注意：在开发阶段，通过向当前开发服务器发送ajax请求，当前服务器会将请求转发给配置的代理服务器地址。

（1）配置一个代理服务器地址

module.exports = {
  // 取消eslint语法检查
  lintOnSave: false,
  // devServer是脚手架中的开发服务器
  devServer: {
    // 配置主机名
    host: "localhost",
    // 配置端口号
    port: "8080",
    // 这里只能配置一个代理服务器（1号服务器）
    proxy: 'http://localhost:7788'
  },
};

（2）配置多个代理服务器地址

配置多个代理服务器，需要路径重写。因为向真实的后台发送请求时，不需要加前缀。
实现过程：ajax向 http://localhost:8080/stu/list 发送请求，代理服务器会帮我们向 http://localhost:5566/stu/list 发送请求。但是 http://localhost:5566服务器的真实地址应该是 http://localhost:5566/list ，没有/stu前缀。所以在向真实的后台发送请求时，要将路径中的前缀删除掉。

module.exports = {
  // 取消eslint语法检查
  lintOnSave: false,
  // devServer是脚手架中的开发服务器
  devServer: {
    //配置主机名
    host: "localhost",
    // 配置端口号
    port: "8080",
    // 配置多个代理服务器地址
    proxy: {
      // /stu是前缀
      "/stu": {
        // 代理的地址（1号服务器）
        target: "http://localhost:5566",
        // 路径重写，因为向真实的后台发送请求时，不需要加前缀
        pathRewrite: {
          // 将地址中，/stu替换成空
          "^/stu": "", 
        },
      },
      "/car": {
        // 代理的地址（2号服务器）
        target: "http://localhost:7788",
        pathRewrite: {
          "^/car": "",
        },
      },
    },
  },
};

3、 组件中使用

（1）代理服务器只配置一个代理服务器地址

<button @click="loadStudent">获取学生信息</button>
<table class="table">
  <thead>
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="stu in stus" :key="stu.no">
      <td>{{ stu.no }}</td>
      <td>{{ stu.name }}</td>
      <td>{{ stu.age }}</td>
      <td>{{ stu.sex }}</td>
    </tr>
  </tbody>
</table>

data() {
  return {
    //学生信息数组
    stus: []
  };
},
methods: {
  // 加载学生信息的方法
  loadStudent() {
    // 向当前服务器发请求，当前服务器会作为代理服务器，在通过原生http的方式向后台服务器发请求
    // ajax请求默认要遵循同源策略：协议名，主机名，端口号要一致。
    // 注意：这里的/list，其实是http://localhost:8080/list
    axios.get("/list").then(({ data }) => {
      this.stus = data;
    });
  }
}

（2）代理服务器配置多个代理服务器地址

<button @click="loadStudent">获取学生信息</button>
<table class="table">
  <thead>
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="stu in stus" :key="stu.no">
      <td>{{ stu.no }}</td>
      <td>{{ stu.name }}</td>
      <td>{{ stu.age }}</td>
      <td>{{ stu.sex }}</td>
    </tr>
  </tbody>
</table>
<button @click="loadCar">获取车辆信息</button>
<table class="table">
  <thead>
    <tr>
      <th>编号</th>
      <th>名称</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="car in cars" :key="car.id">
      <td>{{ car.id }}</td>
      <td>{{ car.name }}</td>
    </tr>
  </tbody>
</table>

data() {
  return {
    //学生信息数组
    stus: [],
    //车辆信息数组
    cars: []
  };
},
methods: {
  // 加载学生信息的方法
  loadStudent() {
    // 向当前服务器发请求，当前服务器会作为代理服务器，再通过原生http的方式向后台服务器发请求
    // ajax请求默认要遵循同源策略：协议名，主机名，端口号要一致。
    axios.get("/stu/list").then(({ data }) => {
      this.stus = data;
    });
  },
  // 加载车辆信息的方法
  loadCar() {
    axios.get("/car/list").then(({ data }) => {
      this.cars = data;
    });
  },
}