今天学习了vue动画的一些写法还有跨域请求的解决以及插槽

过渡与动画

需要css写一点，来回都一样的动画，直接用reverse反转就可以，不用写两遍

用transition标签包裹要实现动画效果的标签，进入动画命名：.v-enter-active，离开.v-leave-active。这样插入、更新或移除DOM元素时，vue就可以自动控制了。

如果给transition标签起了name名字，那么动画命名就是.name-enter-active，.name-leave-active：

1. 元素进入的样式:
   • v-enter:进入的起点
   • v-enter-active:进入过程中
   • v-enter-to:进入的终点
2. 元素离开的样式
   • v-leave:离开的起点
   • v-leave-active:离开过程中
   • v-leave-to:离开的终点

加个属性 ：appear 就可以 自动播放

多个元素过过渡：transition-group标签包裹，但是必须给每个元素加key值

一个库 animate.css

Ajax请求跨域问题

Ajax请求：

1. xhr 原生的
2. jquery
3. axios 最好使用这个。
4. fetch 原生的，问题：返回数据会包两次promise。并且IE不兼容
5. vue-resource

解决跨域问题：

1. cors:后端解决，服务器携带一些特定的响应头

2. jsonp：借助script标签的src属性在引入外部资源时不受同源策略限制的特点。缺点：需要前后端配合，而且只能接收get请求

3. 开启代理服务器：

   • nginx，需要后端知识

   • vue-cli：

     1. 在vue.fonfig.js里面配置

        devServer:{proxy:'http://localhost:xxx'}相当于简写形式

        xxx端口号与本机请求数据的服务器端口号相同，就是向谁请求就写谁

        这样配置后，axios请求的url地址为本机的端口号/路由

     优点:配置简单，请求资源时直接发给前端(8080)即可。

     缺点:不能配置多个代理，不能灵活的控制请求是否走代理。

     工作方式:若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源)

     2. module.exports = {
          devServer: {
            proxy: {
              '/api': {
                target: '<url>',//只要请求前缀是/api，就把请求转发给url这个地址
                pathRewrite:{'^/api':''}//路径重写，不把/api传给服务器
                ws: true,//用于支持websocket
                changeOrigin: true//用于控制请求头中host值，是否跨域伪造，假装同源
              },
              '/foo': {
                target: '<other_url>'
              }//多个就直接把上面/api部分复制，再去改前缀、url等
            }
          }
        }
        

     优点:可以配置多个代理，且可以灵活的控制请求是否走代理。

     缺点:配置略微繁琐，请求资源时必须加前缀。

案例

1. 引入其他库的文件不要放在vue组件里：
   • 放在静态资源文件夹assets里面，在vue里面引入
   • 如果里面有找不到的资源（字体文件等），放public里，然后去html里面引入

Ajax请求——vue-resource，是对xhr的封装，用法与axios一样也是安装引入，写法也一样

插槽slot

预留一个位置，当使用者在组件标签里写东西时，东西就放在插槽的位置里

作用:让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件==>子组件。

分类:

1. 默认插槽

   父组件中：<category><div>html结构1</div></Category>

   子组件中:

   <template><div>
   <--定义插槽-->
   <slot>插槽默认内容...</slot>
   </div></template>
   

2. 具名插槽

   给插槽一个name，在使用的时候加属性 slot=‘name’或者slot-scope=’'，就会对应放入

   如果用template标签包裹，那么可以把slot='name’改成v-slot:name

   父组件中：

   <Category>
       <template slot="center"><div>html结构1</div></template>
       <template v-slot :footer><div>html结构2</div></template>
   </Category>
   

   子组件中：

   <template>
       <div>
           <!--定义插槽-->
           <slot name="center">插槽默认内容...</slot>
           <slot name="footer">插槽默认内容...</slot>
       </div>
   </template>
   

3. 作用域插槽

   数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定)。作用域插槽也可以有名字
   父组件中：

   <Category>
       <template scope="scopeData">
       <I--生成的是ul列表--><ul>
       cli v-for="g in scopeData.games" : key="g"">{{g}}</li></ul>
       </template>
   </Category>
   <Category>
       <template slot-scope="scopeData">
       <! --生成的是h4标题-->
       <h4 v-for="g in scopeData.games" : key="g">{{g}}</h4></template>
   </Category>
   

   子组件中:

   <template>
   	<div><slot :games="games"></slot></div>
   </template>
   
   <script>
   	export default {
   		name : 'Category " ,
   		props : ["title'],
   		//数据在子组件自身data({
   		return {
   			games:['1','2']
   		}
   	}
   </script>
   
   

Vuex

专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间的通信方式，适用于任意组件

使用情况：1.多个组件依赖于同一状态。 2.来自不同组件的行为需要变更同一状态