Vue封装的过渡与动画
1、作用：在插入、更新或是移除DOM元素时，在合适的时候给元素添加样式类名
2、图示
3、写法(用法)
过渡：
准备好样式：
元素进入的样式：
v-enter：进入的起点
v-enter-active：进入过程中
v-enter-to：进入的终点
元素离开的样式：
v-leave：离开的起点
v-leave-active：离开的过程
v-leave-to：离开的终点
// 进入的起点，离开的终点
.hello-enter,.hello-leave-to{
transform: translateX(-100%);
}
// 进入过程的效果，离开过程的效果
.hello-enter-active,.hello-leave-active{
transition: 1s linear;
}
// 进入的终点，离开的起点
.hello-enter-to,.hello-leave{
transform: translateX(0);
}
使用包裹要过渡的元素，并配置name属性，如果不配置name属性，默认就是v，只适用于文件中只有一个使用过渡效果的元素，否则就配置name属性，要不然所有的元素就只能使用一样的过渡效果
<!-- 让一个元素具有过渡效果 -->
<transition name="hello" appear>
<h1 v-show="isShow">你好啊！！</h1>
</transition>
注意：如果有多个元素需要过渡，就要使用包裹要过度的多个元素(这些元素使用的时一样的过渡效果)，并且每一个元素都要制定key值
<!-- 让多个元素具有过渡效果 -->
<transition-group name="hello" appear>
<h1 v-show="isShow" key="1">你好啊！！</h1>
<h1 v-show="isShow" key="2">123456</h1>
</transition-group>
动画：
准备好样式：
@keyframes：配置动画效果
v-enter-active：元素进入的效果(配置animation)
v-leave-active：元素离开的效果(配置animation)
.hello-enter-active{
animation: nkd 2s;
}
.hello-leave-active{
animation: nkd 2s reverse;
}
@keyframes nkd{
from{
transform: translateX(-100%);
}
to{
transform: translateX(0px);
}
}
使用动画库：
例如：animate.css库 ：animate.style/
第一步：安装 npm install animate.css
第二步：引入 import 'animate.css'
第三步：使用
<transition-group
appear
<!-- name属性必须是这个值 -->
name="animate__animated animate__bounce"
// 元素进入时的效果，类名需要在这个库的官网上选取赋值
enter-active-class="animate__fadeIn"
// 元素离开时的效果
leave-active-class="animate__bounceOut"
>
<h1 v-show="isShow" key="1">你好啊！！</h1>
<h1 v-show="isShow" key="2">123456</h1>
</transition-group>
Vue脚手架配置代理
方法一
在vue.config.js中添加配置：
devServer:{
proxy:'http://localhost:5000'
}
说明：
优点：配置简单，请求资源是直接发给前端(88080)即可
缺点：不能配置多个代理，不能灵活的控制请求是否走代理
工作方式：若按照第一种方式配置代理，当请求前端不存在的资源时，这个请求才会转发给服务器，当请求前端存在的资源时，就不会转发给服务器
方式二
在vue.config.js中添加配置：
// 开启代理服务器（方式二），两种方式不能同时用
devServer: {
proxy: {
// 添加前缀，当路径有了这个前缀，就使用代理服务器
// 当路径没有这个前缀，就不适用代理服务器
'/nkd': {//匹配所有以/nkd开头的请求路径
// 目标服务器的路径，只写到端口号，代理目标的基础路径
target: 'http://localhost:5000',
// 重写路径，如果是以/nkd开头的就替换为空串
pathRewrite:{'^/nkd':''},
//用于支持websocket
ws: true,
//用于告诉目标服务器代理服务器的端口号，true为说谎，false为说真话
// 说谎就是告诉目标服务器自己的端口号和目标服务器一样
// 不说谎就是告诉目标服务器自己真实的端口号(host值)
// 默认为true
changeOrigin: true,
},
}
}
优点：可以配置多个代理，并且可以灵活的控制请求是否走代理
缺点：配置繁琐，请求资源时必须添加前缀(如：http://localhost:8080/nkd/students)
插槽
1、作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件==>子组件
2、分类：默认插槽、具名插槽、作用域插槽
3、使用方式
默认插槽
<template>
<div class="container">
<Category title="美食">
<img src="../public/img/壁纸 (15).jpg" alt="">
</Category>
<Category title="游戏">
<ul>
<li v-for="(g,index) in games" :key="index">{{g}}</li>
</ul>
</Category>
<Category title="电影">
<ul>
<li v-for="(f,index) in films" :key="index">{{f}}</li>
</ul>
</Category>
</div>
</template>
<template>
<div class="category">
<h3>{{title}}分类</h3>
<!-- 定义一个插槽,当使用者没有传递具体的结构时，会显示 -->
<slot>这是一个插槽</slot>
</div>
</template>
具名插槽
<template>
<div class="container">
<Category title="美食" >
<img src="../public/img/壁纸 (15).jpg" alt="" slot="center">
<a href="http://www.baidu.com" slot="footer">更多美食</a>
</Category>
<Category title="游戏">
<ul slot="center">
<li v-for="(g,index) in games" :key="index">{{g}}</li>
</ul>
<div class="foot" slot="footer">
<a href="https://www.3dmgame.com/">单机游戏</a>
<a href="https://js3.xoyo.com/index.html?utm_source=bdsem#/">网络游戏</a>
</div>
</Category>
<Category title="电影">
<ul slot="center">
<li v-for="(f,index) in films" :key="index">{{f}}</li>
</ul>
<!-- 这是一种新的写法，必须写在template中 -->
<template v-slot:footer>
<div class="foot">
<a href="https://movie.douban.com/">经典</a>
<a href="https://www.iqiyi.com/dianying">热门</a>
<a href="https://www.maoyan.com/films?showType=3">推荐</a>
</div>
<h4 class="foot">欢迎来到影院观看！！</h4>
</template>
</Category>
</div>
</template>
<template>
<div class="category">
<h3>{{title}}分类</h3>
<!-- 定义一个插槽,当使用者没有传递具体的结构时，会显示 -->
<slot name="center">这是一个插槽</slot>
<slot name="footer">这是第二个个插槽</slot>
</div>
</template>
作用域插槽
理解：数组在自身中，但是根据数据生成的结构需要组件的使用者来决定，如示例代码，games数据在Category组件中，但是用的数据在App组件中，所以遍历出来的结构就由App组件决定
<template>
<div class="container">
<Category title="游戏">
<template scope="games">
<ul>
<li v-for="(g,index) in games.games" :key="index">{{g}}</li>
</ul>
</template>
</Category>
<Category title="游戏">
<template scope="games">
<ol>
<li v-for="(g,index) in games.games" :key="index">{{g}}</li>
</ol>
</template>
</Category>
<Category title="游戏">
<template slot-scope="{games}">
<h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
</template>
</Category>
</div>
</template>
<template>
<div class="category">
<h3>{{title}}分类</h3>
<slot :games="games">我是一个插槽</slot>
</div>
</template>
