vue 笔记04

01 自定义指令的使用

02 watch 监听的使用

03 Vue动画之使用动画库

01 自定义指令的使用

系统自带的指令功能不足的时候可以创建自定义指令

和data同级的位置定义:

directives:{

不带v-的指令名称(当前指令所在的标签dom对象,指令对象){

}

通过指令对象.value能够获取当前指令使用时传入的值

Vue.directive('不带v-开头的指令名称',驱动函数)

函数有两个参数 ele dir

02 watch 监听的使用

监听一个值的变化从而做对应的事情

watch:{

被监听的变量名(新值,旧值){

不需要返回值 (做你想做的事)

}

监听器默认是浅监听

如果是基本数据类型那么值发生变化监听器触发

如果是复杂数据类型那么地址发生变化监听器才触发

配置深层监听:

watch:{

被监听的变量:{

handler(新值,旧值){

deep:true, //表示配置深层监听

immediate:true //第一次加载的时候也执行可配置这个属性

}

03 Vue动画之使用动画库

动画框架 animate.css

使用步骤:

1.引入animate.css

2.在使用v-show或者v-if显示隐藏的标签外面套transition标签

transition标签在内部元素显示隐藏的时候一共提供给了我们六个类名

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。