目录
Vue封装的过渡与动画
1.作用:在插入、更新或移除DOM元素时|在合适的时候给元素添加样式类名。
2.图示
3.写法:
- 1.准备好样式:
- 元素进入的样式
1.v-enter:进入的起点
2.v-enter-active:进入过程中
3. v-enter-to:进入的终点 - 元素离开的样式
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"}
说明:
- 优点:配置简单,请求资源时直接发给前端(8080)即可。
- 缺点:不能配置多个代理,不能灵活的控制请求是否走代理。
- 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器(优先匹配前端资源)
方式二
编写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
说明:
- 优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
- 缺点:配置略微繁琐,请求资源时必须加前缀。