7.Vue学习记录（动画、跨域问题、插槽）

2022-12-14：

4.动画：css写动画样式：@keyframes cartoon {from{transform: translateX(-100%); }to{ transform: translateX(0px); } }
            vue中使用动画样式：使用<transition name="hello" appear（是否初始时进行动画样式）>标签包裹动画代码
                        样式书写：（进入） .hello-enter-active{animation: cartoon 1s; }（离开）.hello-leave-active{ animation: cartoon 1s reverse; }
        5.另一种动画写法：
            css：使用.hello-enter,.hello-leave-to{transform: translateX(-100%);} .hello-leave,.hello-enter-to{transform: translateX(0px); }
                .hello-enter-active,.hello-leave-active{transition: 0.5s linear;}
        6.多个元素的动画：使用<transition-group>进行包裹
        7.通过引入外部库来进行注册动画：例如引入：animate.css 库：a. npm i animate.css(下载库)，b.import 'animate.css'(引入库),
                            c.<transition 
                                        appear
                                        name="animate__animated animate__bounce" 
                                        enter-active-class="animate__swing"
                                        leave-active-class="animate__backOutUp"
                                    >（使用库）

2022-12-25：
        1.实现请求服务器获取数据：使用axios来进行请求，a.安装：npm i axios b.导入：import axios from 'axios'
                         c.使用：axios.get('网址').then(response=>{请求成功，response.data(获取请求过来的数据)}, error=>{请求失败,error.message(获取错误信息提示)})
        2.直接进行请求会长生跨域问题，可以通过nigx进行解决，也可以通过vue-cli脚手架进行配置中间服务器进行解决
            a.配置中间服务器：devServer: {proxy: 'http://localhost:4000'}（其中4000是请求的真实服务器的端口），
            b.使用： axios.get('http://localhost:8080/students')，直接把端口改成8080即可
            注：配置完并使用后需要重启脚手架
        3.多个配置：devServer: {proxy: {'/Students': {target: 'http://localhost:5000',pathRewrite:{'^/Students':''}},
                              '/Cars': {target: 'http://localhost:5001',pathRewrite:{'^/Cars':''} } }}
                '/Students'和 '/Cars'是指定自定义路径，pathRewrite：可以去除请求路径中多余的/Cars
        使用：axios.get('http://localhost:8080/Students/students')
        4.对象值替换方法{...要被替换掉的对象,...替换的对象}
        5.vue-resource:使用方法和axios一样，只需在mian.js里导入并使用即可，Vue.use(vue-resource),使用： this.$http.get()
卡槽：
        1.默认卡槽：（最普通的dom加载）a.在组建标签中写dom，b.在组件中使用<solt>标签指定dom加载的位置
        2.具名卡槽：（多块dom）a.在组件标签中写dom，如：<ul slot="center" v-for="(item,index) in games" :key="index"><li>{{ item }}</li></ul>
                b.在组件中使用<solt name="center">
        3.作用域卡槽：(当数据在组件中，需要传递数据时使用)
            a.在组件标签中写dom,如：template scope="{games}"><ul v-for="(item,index) in games" :key="index"><li>{{ item }}</li></ul></template>
            b.在组件中使用：<slot :games="games"></slot>