2018.11.20 超出盒子省略号 keep-alive优化递归组件的使用 axios的注意事项 vue里面的动画效果

***超出盒子用省略号表示的css代码

        overflow: hidden;
        white-space: nowrap; /*强制在一行显示*/
        text-overflow: ellipsis; /*多出来的用省略号表示*/

***使用keep-alive会有缓存的，我们可以使用activied那个钩子函数之外，还可以这样，在App.vue里面进行 exclude="Detail"指定相应的组件不用缓存，这样Detail这个组件就不会被缓存啦

<keep-alive exclude="Detail">
        	<router-view></router-view> <!--展示当前路由地址所对应的内容-->
</keep-alive>

递归组件的使用

递归组件的作用：后端传递过来的数据往往不只一层，可能包含很多层，这需要我们全部进行渲染出来，这时候要渲染相应的嵌套组件，就需要使用递归组件了。这些数据可能是这样的json数据

list: [{
    title: '成人票'，
    children: [{
        title: '成人三馆的门票'，
        children: [{
            title: '成人三馆的门票'
        }]
    }]
}]
//这样有着多级嵌套的数据，我们在进行渲染的时候就会使用递归组件来使用啦

1.首先必须拿到后端传递过来的数据 props:{ categoryList:Array}

2.进行渲染，注意点来了，一定要注意啊：就是自己调用自己

<!--1.先进行判断：递归组件的渲染 如果list里面包含children的话-->
<div v-if="item.children" class="item-children">

                 <!--使用自己的名字来调用自己-->
                 <detail-list :categoryList="item.children"></detail-list>
                 <!--如果有children的话 再把children传递给自己 里面还有便利的话 也是可以直接现实的
                    -->
 </div>

给组件起名字的作用：

1.可以在递归组件里面尽心使用自己调用自己就可以下面一级的渲染出来

2.在使用keep-alive缓存的时候使用名字来指定某一个组件不要进行缓存就可以重新发ajax了

3.谷歌浏览器有一个专门的vue插件就直接使用vue里面的名字

怎么解决页面之间的相互影响，就是一个页面的滚动另外一个页面，切换了页面也会停留在上一个页面的停留的位置？？？？在路由里面定义就好了

去官网的vue-router页面 进行复制 在router.js里面定义

scrollBehavior (to, from, savedPosition) {
        return { x: 0, y: 0 }
      }

这个的意思是：意思是：每次显示的时候让页面显示在X轴的0 y轴0处

关于动画的使用：我们可以定义一个公共的动画组件：FadeAnmation.vue

1.在里面定义好我们想要的动画效果

2.可以使用插槽<slot></slot>来让需要实现动画的组件插到这里

3.在相应的组件里面进行导入import FadeAnimation from 'common/fade/FadeAnimation'

4.最后包裹起来了就行了插槽会把该组件到入该组件里面

<fade-animation>

<common-gallary v-show="showGallary"

:imgs = "gallaryImgs"

@close = "handleGallaryColse"

></common-gallary>

</fade-animation>

其中官网给我们提供了六个关于动画的函数：

v-enter 这是一个时间段是进入之前，元素的起始状态，此时还没开始进入

v-enter-to这是一个时间点是动画离开之后，离开的终止状态，此时元素动画已经结束

v-leave

v-leave-to

v-enter-active 入场动画的时间段

v-leave-active 离场动画的时间段