Vue知识点整理（三）transition过渡与生命周期_vue transition组件生命周期

transition 过度 Vue在插入，更新或者移除DOM时，提供不同方式的应用过渡效果 1.单个元素/组件过度 css过渡 css动画 结合animate.css 动画库 2.多个元素过度（设置key）

单元素过渡

  <transition name="kerwinfade" >
            <div v-show="isShow">1111111111111</div>
        </transition>

多元素过渡

多个元素是指互斥这种，有你没我，有我没你 比如 v-if 和v-else当有多个相同标签的元素切换时，需要使用key特性设置唯一的值来标记来让Vue区分它们，diff算法会发现如果key值一样就替换，不一样直接删除。否则Vue为了效率只会替换相同标签内部的内容,不会删除。（如果标签不一样，就会认为不是一个东西了，发生改变了）。所以就会有动画了，但是能不能不一起触发，要有个先后顺序就使用 mode:in-out(先来再走); out-in（先走再来）

 <transition name="kerwinfade" mode="in-out">
            <div v-if="isShow" key="1">1111111111111</div>
            <div v-else key="2">222222</div>
        </transition>

组件过渡

        <!--keep-alive 保存状态，防止重新渲染-->
        <!--利用transition 包住组件 -->
        <keep-alive>
            <transition name="kerwinfade" mode="out-in">
                <component :is="who"></component>
            </transition>
           
        </keep-alive>

列表过渡

    <!--列表过度 使用的是一个 transition-group的标签 他会以一个真实的元素呈现，
        默认为一个span 也可以用过tag修改成其他的元素
        但是必须提供一个唯一的key属性值-->
 <transition-group tag="ul" name="kerwinbounce">
                <li v-for="(data,key) in dd" :key="data">
                    {{data}}----{{key}} 
                    <button @click="del(key)">del</button>
               </li>
             </transition-group>

生命周期

 //beforeCreate，created,beforeMount,mounted只能执行一次
            beforeCreate () {
                console.log("beforeCreate")
            },
            created () {
                console.log("created")
            },
            beforeMount () {
                console.log("beforeMount")
            },
            mounted () {
                //结束之后，节点才会渲染出来，访问dom,ajax,监听事件，window.onscroll 设置监听
                console.log("mounted")
            },
            //beforeUpdate,updated可以更新无数次
            beforeUpdate () {
                console.log("beforeUpdate")
            },
            updated () {
                console.log("updated")
            },
            //解除绑定   v-if=false的时候就会销毁
            beforeDestroy () {
                console.log("beforeDestroy")
            },
            destroyed () {
                console.log("destroyed")
            }

过滤器

 <!--通过 | 把数据送给我的过滤器-->
                <img :src="data.poster | myImage"/>     
 //定义过滤器
      Vue.filter('myImage',function(data){
          console.log(data)
            return data;
      })

自定义指令

单引号表示的是变量
<div v-hello="'red'">11111</div>
Vue.directive("hello",{
            //在指令的生命周期中只会执行一次，所以在修改mycolor的时候不会改变
            inserted(el,bind){
                //插入
                console.log(el)
                console.log(bind)
                el.style.background=bind.value
            },
            //修改会执行很多次
            update(el,bind){
                el.style.background=bind.value 
            }
        })