vue的作用域插槽、动态指令、动画和过渡的实现和引入插件

vue的作用域插槽

 含义：在调用子组件的时候想从父元素定义传递的DOM样式。

 形式：Vue.component('child',{

  template:`<div>

<ul>

                  <solt name='header' v-for="item of list"  :val=item>

                    默认值（中间可以添加默认值）                     </solt>

//name表示的是在父组件中的标识

//solt代表的就是父组件中想要自定义传入的样式

</ul>

      </div>`，

data:function(){

  return {

 

       list:[1,2,3,4]

}

}

 

<div id="root">

  <template solt-scope='props'>

  <p>{{props.val}}</p>

        </template>

</div>

 

Vue的动态指令

<component :is=’type’></component> //对应的type值的改变应用与子组件的切换

 

V-once

 能提高性能，提高展示效率

把v-once填写在子组件的template 中 类似于属性

 

Vue中的css动画和原理

<transition name="fade">
<div v-if="show">transition的展示</div>
</transition> 
<button @click="clickTr">点击切换</button> 

第一步：我们需要在有动画效果的html外面加一个transition的标签,vue会自动帮我们执行动画的流程。（vue从隐藏到显示时的活动）

在第一帧的时候会存在fade-enter、fade-enter-active

运行到第二帧的时候，我们的fade-enter会被移除，就会执行fade-enter-active的内容，同时vue会增加fade-enter-to。

最后vue会在执行完后，移除fade-enter-active和fade-enter-to

在我们需要从显示到隐藏时vue给的默认是fade-leave

Fade是因为我们设置了name=fade ，vue默认是v

 

在vue中如何使用animate.css

第一步在页面中引入css

第二步就是在transition增加自定义的属性 同时添加上animated 和需要设置的动画效果名

<transition name="fade" enter-active-class="animates swing" leave-active-class="animates">
<div v-if="show">transition的展示</div>
</transition>

 

在vue中如何同时使用动画和过渡

<transition name="fade"  appear enter-active-class="animates swing" leave-active-class="animates" appear-active-class="animates swing">
<div v-if="show">transition的展示</div>
</transition>

增加的appear就是一个能让网页在初始化的时候显示动画
<transition name="fade"  appear enter-active-class="animates swing fade-enter-active" leave-active-class="animates" appear-active-class="animates swing fade-leave-active" :duration=“{enter:5000,leave:10000}”   type=“transition”
>
<div v-if="show">transition的展示</div>
</transition>

我们在style增加fade-enter-active等的css这样就能在初始的时候有过渡和动画效果了

:duration是自定义动画播放的时长

Type规定我们使用那个的设置动画时间为标准

 

Vue中的js动画与velocity.js结合

Transition 拥有生命周期钩子，我们可以利用before-enter绑定事件来进行显示

Enter也是一个生命后期钩子，它在before-enter执行完之后执行，一般动画效果我们都是写在enter钩子中

<transition name="fade" @before-enter='handBefore' @enter='handEnter' @after-enter='handAfter'>
<div v-if="show">transition的展示</div>
</transition> 
我们可以使用js的方式给transtion添加动画，当然leave也是同样的js就不赘述了。
handBefore:function(el){ //指的是当前的元素
el.style.color='red'
},
handEnter:function(el,done){//done是一个回调函数
setTimeout(()=>{
el.style.color='green'
},2000)
setTimeout(()=>{//在颜色改变后调用回调函数done
done()
},4000)
},
handAfter:function(el){
el.style.color='black'
}

我们可以在vue中引入velocity.js，借助与它我们可以通过简单的写法实现酷炫的效果

先下载文件，然后在文件中引入

handBefore:function(el){ //指的是当前的元素
el.style.opacity="0"
},
handEnter:function(el,done){//done是一个回调函数
Velocity(el,{
opacity:1
},{
duration:1000,
complate:done
})
},
handAfter:function(el){
console.log("动画结束")
}
我们需要在enter的生命钩子时，执行动画内容。此时的内容只需要简单填写样式就会出来。

vue中的组件动画的切换

<transition name="fade" mode='out-in'>
      <div v-if="show" key='showTr'>transition的展示</div>
       <div v-else key='hidenTr'>transition的隐藏</div>
    </transition> 

在transition中添加其他元素，利用v-if来控制，同时设置key来不让vue在进行切换时不进行复用而达到动画切换。mode切换时根据给的值进行先隐藏再显示的执行顺序。

下面我们来进行组件的动画切换

<transition name="fade" >
      <component :is='type'></component>
    </transition> 

transition我们通过子组件的动态指令 ：is来进行子组件的切换  

vue中的列表过渡

<transition-group name="fade" >
      <div v-for="item of list" :key="item.id">
        {{item.title}}
      </div>
    </transition-group> 
<script>
var count="";
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'write you first vue ',
      list:[],
    }
  },
  methods:{
    clickTr:function(){
      this.list.push({//每次点击都往数组list添加内容
        id:count++,
        title:'hello '+count
      })
    },
   
  }
}
</script>

添加的transiton-group相当于每次增加新内容时，会每个div都在外面包裹一个transition，从而达到动画的效果