1. 過渡

使用vue的transition標(biāo)簽結(jié)合css樣式完成動(dòng)畫

頁(yè)面

    <button @click="isShow=!isShow">顯示/隱藏</button>
    <!-- 將需要有過渡效果的內(nèi)容用transition組件包裹起來(lái) -->
    <transition name="box">
       <div class="box" v-show="isShow">我一定會(huì)好好學(xué)習(xí)的</div>
    </transition>
    <hr>
    <button @click="addGoods">添加商品</button>
    <!-- transition-group組件，用于包裹多個(gè)組件的過渡，
    tag屬性設(shè)置transition-group自身渲染的標(biāo)簽 -->
    <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>

給列表添加動(dòng)畫或過渡效果，用transition-group ↑

樣式

//進(jìn)入時(shí)樣式 和 離開時(shí)樣式
// 過濾的持續(xù)時(shí)間
.box-enter-active,
.box-leave-active {
  transition: all 1s;
}
// 開始進(jìn)入樣式 和 離開完成樣式
// 過渡的具體動(dòng)作
.box-enter,
.box-leave-to {
  transform: translateX(10px);
  // 注意：這里只能設(shè)置透明為0
  opacity: 0;
}

2. nanoid

安裝

npm install nanoid

導(dǎo)入nanoid函數(shù)

import { nanoid } from 'nanoid'

使用

let goods = {
        // nanoid()方法，每次返回一個(gè)全球唯一的id
        id:nanoid(),
        name:'商品'
      }

3. 服務(wù)器

新建一個(gè)server文件夾，在終端管理器下載一個(gè)包的描述文件

npm init -y

安裝express

npm i express

在新建一個(gè)index.js為一號(hào)服務(wù)器

// 導(dǎo)入express
let express = require("express");
// 創(chuàng)建一個(gè)服務(wù)器對(duì)象
let app = express();
// 開啟一個(gè)端口號(hào)
app.listen(5566, () => {
  console.log("服務(wù)器成功開啟！端口號(hào)5566");
});

//配置中間件，攔截所有的請(qǐng)求
app.use((req, res, next) => {
  //允許ajax請(qǐng)求跨域
  //默認(rèn)情況下：ajax請(qǐng)求必須要遵循同源策略：協(xié)議名，主機(jī)名，端口號(hào)一致。
  // 允許一臺(tái)指定的服務(wù)器跨域
  // res.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
  // 不限制跨域
  // res.setHeader("Access-Control-Allow-Origin", "*");
  next();
});

//學(xué)生數(shù)組
let stus = [
  {
    no: "1001",
    name: "張三",
    age: 20,
    sex: "男",
  },
  {
    no: "1002",
    name: "李四",
    age: 22,
    sex: "女",
  },
  {
    no: "1003",
    name: "王五",
    age: 24,
    sex: "男",
  },
]

// 定義一個(gè)get請(qǐng)求接口
app.get("/list", (req, res) => {
  res.send(stus);
});

2號(hào)服務(wù)器

// 導(dǎo)入express
let express = require("express");
// 創(chuàng)建一個(gè)服務(wù)器對(duì)象
let app = express();
// 開啟一個(gè)端口號(hào)
app.listen(7788, () => {
  console.log("服務(wù)器成功開啟！端口號(hào)7788");
});

//配置中間件，攔截所有的請(qǐng)求
app.use((req, res, next) => {
  //允許跨域
  // res.setHeader("Access-Control-Allow-Origin", "*");
  next();
});

//汽車數(shù)組
let cars = [
    {
      id: "1001",
      name: "奔馳"
    },
    {
      id: "1002",
      name: "寶馬"
    },
    {
      id: "1003",
      name: "奧迪"
    },
  ]

// 定義一個(gè)get請(qǐng)求接口
app.get("/list", (req, res) => {
  res.send(cars);
});

4. 配置代理

配置一個(gè)vue.config.js文件

module.exports = {
  lintOnSave: false,
  //devServer是腳手架中的開發(fā)服務(wù)器
  devServer: {
    //配置主機(jī)名
    host: "localhost",
    //配置端口號(hào)
    port: "8080",
    //注意：在開發(fā)階段，通過向當(dāng)前開發(fā)服務(wù)器發(fā)送ajax請(qǐng)求，當(dāng)前服務(wù)器會(huì)將請(qǐng)求轉(zhuǎn)發(fā)給配置的代理服務(wù)器地址。
    //這里只能配置一個(gè)代理服務(wù)器
    // proxy:'http://localhost:7788',
    // 配置多個(gè)代理服務(wù)器地址
    proxy: {
      // /stu是前綴
      "/stu": {
        //代理的地址
        target: "http://localhost:5566",
        //路徑重寫，因?yàn)橄蛘鎸?shí)的后臺(tái)發(fā)送請(qǐng)求時(shí)，不需要加前綴
        pathRewrite: {
          //將地址中，/stu替換成空
          // ajax向http://localhost:8080/stu/list發(fā)送請(qǐng)求
          // 代理服務(wù)器會(huì)幫我們向http://localhost:5566/stu/list發(fā)送請(qǐng)求
          // 但是http://localhost:5566服務(wù)器的真實(shí)地址應(yīng)該是http://localhost:5566/list，沒有/stu前綴
          // 所以在向真實(shí)的后臺(tái)發(fā)送請(qǐng)求時(shí)，要將路由中的前綴刪除掉。
          "^/stu": "", //將/stu替換成空
        },
      },
      "/car": {
        //代理的地址
        target: "http://localhost:7788",
        pathRewrite: {
          "^/car": "",
        },
      },
    },
  },
};

ajax請(qǐng)求數(shù)據(jù)，必須要遵循同源策略，什么是同源策略？
請(qǐng)求地址的協(xié)議名，主機(jī)名(域名或ip地址)，端口號(hào)，必須跟當(dāng)前地址相同，否則就是跨域請(qǐng)求。
解決跨域有兩種途徑：1.后端允許跨域，2.前端想辦法騙過后端實(shí)現(xiàn)跨域（jsonp技術(shù)，代理服務(wù)器技術(shù)）

methods: {
    // 加載學(xué)生信息的方法
    loadStudent() {
      // 向當(dāng)前服務(wù)器發(fā)請(qǐng)求，當(dāng)前服務(wù)器會(huì)作為代理服務(wù)器，在通過原生http的方式向后臺(tái)服務(wù)器發(fā)請(qǐng)求
      // ajax請(qǐng)求默認(rèn)要遵循同源策略：協(xié)議名，主機(jī)名，端口號(hào)要一致。
      // 注意：這里的/list，其實(shí)是http://localhost:8080/list
      axios.get("/stu/list").then(({ data }) => {
        this.stus = data;
      });
    },
    // 加載車輛信息的方法
    loadCar() {
      axios.get("/car/list").then(({ data }) => {
        this.cars = data;
      });
    },
  },