vue13

目录

Vue封装的过渡与动画

Vue脚手架配置代理

---

Vue封装的过渡与动画

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

2.图示

1. 

 3.写法:

• 1.准备好样式:

1. 元素进入的样式

   1.v-enter:进入的起点
   2.v-enter-active:进入过程中
   3. v-enter-to:进入的终点

2. 元素离开的样式

   1.v-leave:离开的起点
   2.v-leave-active:离开过程中

   3. v-leave-to:离开的终点

• 2.使用<transition>包裹要过度的元素，并配置name属性:

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

• 3.备注:若有多个元素需要过度，则需要使用:<transition-group>，且每个元愫都要指定 key值。

动画

<div>
        <button @click="isShow = !isShow">显示/隐藏</button>        
        <transition appear>
        <h1 v-show="isShow" >你好啊!</h1>
        </transition>
    </div>

<style scoped>
h1 {
    background-color: orange;
}

.v-enter-active {
    animation: atguigu 1s;
}

.v-leave-active {
    animation: atguigu 1s reverse;
}

@keyframes atguigu {
    from {
        transform: translateX(-100px);
    }
    to {
        transform: translateX(0px);
    }
}
</style>

 过渡

<style scoped>
h1 {
    background-color: orange;
}
/*进入的起点 离开的终点*/
.hello-enter,.hello-leave-to {
    transform: translateX(-100%);
}

/* 进入的终点  离开的起点*/
.hello-enter-to,.hello-leave {
    transform: translateX(0);
}

.hello-enter-active,.hello-leave-active {
    transition: 0.5s linear;
}
</style>

升级版

<div>
        <button @click="isShow = !isShow">显示/隐藏</button>
        <transition-group 
        appear
        name="animate__animated animate__bounce" 
        enter-active-class="animate__swing"
        leave-active-class="animate__backOutUp"
        >
            <h1 v-show="!isShow" key="1">你好啊!</h1>
            <h1 v-show="isShow" key="2">尚硅谷</h1>
        </transition-group>
    </div>

Vue脚手架配置代理

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

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

说明:

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

 方式二

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

devServer:{
    proxy:{
      '/atguigu':{//匹配所有以 '/api'开头的请求路径
        target:'http://localhost:5000',//代理目标的基础路径
        pathRewrite:{'^/atguigu':''},
        ws:true,//用于支持websocket
        changeOrigin:true//用于控制请求头中的host值
      },
      '/demo':{
        target:'http://localhost:5001',
        pathRewrite:{'^/demo':''},
        ws:true,//用于支持websocket
        changeOrigin:true//用于控制请求头中的host值
      }
    }
  }

changeOrigin设置为true时，服务器收到的请求头中的host为: localhost:5000changeOrigin
设置为false时，服务器收到的请求头中的host为: localhost:8080changeorigin默认值为true

说明:

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