vue 自定义指令与过渡

一、自定义指令（分类 ：全局指令、局部指令）
    1、自定义全局指令
        使用全局Vue.directive(id,[])方法
        注：使用自定义指令时必须在指定名称前加前缀v-指令名称（v-hello）
        a.<div v-hello></div>

 Vue.directive('hello',{
            bind(){}//指令第一次绑定到元素上调用，只调用一次，可执行初始化操作
            inserted(){}//绑定元素插入到DOM中时调用
            update()绑定元素所在模板更新时调用
            componentUpdated()//被绑定元素所在模板完成第一次更新周期时调用
            unbind()指定与元素解绑时调用，只调用一次
        })

    2、自定义局部指令

    3、练习

    移动页面中的元素
    onmouseover onmouseout

    onmousedown onmousemove onmouseup

二、过渡（动画）

    1、简介
        Vue 在插入、更新或者移除DOM时，提供多种不同方法的应用过渡效果
        本质上还是css3动画：transition，animation

    2、基本用法
        使用transition组件，将要执行动画的元素包含在该组件内

<transition name="名称">
　　<p v-if="show">hello</p>
</transition>

            名称-enter：进入过渡的开始状态。
            名称-enter-active：进入过渡生效时的状态。
            名称-enter-to: 2.1.8版及以上 进入过渡的结束状态。
            名称-leave: 离开过渡的开始状态。
            名称-leave-active：离开过渡生效时的状态。
            名称-leave-to: 2.1.8版及以上 离开过渡的结束状态。

    3、钩子函数
        8个

    4、结合第三方库animation.css一起使用

<transition enter-active-class="animated 想要的动画类名" leave-active-class="animated 想要的动画类名">
　　<p v-show="flag"></p>
</transition>

5、多元素动画

<transition-group  enter-active-class="animated 想要的动画类名" leave-active-class="animated 想要的动画类名">
        <p v-show="flag" :key='1'></p>
        <p v-show="flag" :key='2'></p>
</transition-group>