Vue课堂笔记知识总结（2）

类绑定：
    属性        :class="值"
    对象        :class="{'x':true,'y':false}"
    数组        :class="[c1,c2,c3]"

样式绑定
    :style="{color:'red','fontSize':'48px'}"        行内样式

自定义指令        

        写法：

//第一种：
directives: {
  属性名(element,binding){

   }
}

//第二种：
directives: {
  属性名:{
   //指令与元素成功绑定时
   bind(element,binding){}
   //指令所在元素被插入页面时
   inserted(element,binding){}
   //指令所在的模板被重新解析时
   update(element,binding){}
    }
}	

        调用    v-属性名

定义语法
	1.局部指令：
nuw Vue({
  directives:{指令名:配置对象}
})
		或
 nuw Vue({
  directives:{指令名:回调函数}
})
	2.全局指令
Vue.directive(指令名,配置对象)
		或
Vue.directive(指令名,回调函数)

 配置对象中常用的3个回调:
            .bind:           指令与元素成功绑定时调用
            .inserted      指令所在元素被插入页面时调用
            .update:       指令所在的模板被重新解析时调用

注意：

1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名

生命周期

常用的生命周期钩子
        1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
        2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
 关于销毁Vue实例
        1.销毁后借助Vue开发者工具看不到任何信息。
        2.销毁后自定义事件会失效,但原生DOM事件依然有效。
        3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

备注：

mounted
1.又名:生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是或组件实例对象。

动画

内置组建：

transition:{
    name        名称

    mode        模式

    enter-active-class        指定进入类名

    leave-active-class        指定离开类名

}       

    
    动画类
        v-enter-active
            进入过程
        v-enter
             进入前
        v-enter-to
            进入后
        v-leave-active
            离开过程
        v-leave
            离开前
        v-leave-to
            离开后
    创建动画形式
        @keyframes 关键帧
            .fade-enter-active{animate:fadeIn ease 1s}
             .fade-leave-active{animate:fadeOut ease 1s}
        引用第三方动画库
            指定进入的class与离开的class
            <transition enter-active-class="slideIn aimated" leave-active-class="hinge animated">