目录
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被删除)，在过渡/动画完成之后移除。
Vue当中能够结合transition组件实现动画的条件是:
v-if v-show 动态组件 组件根节点