vue学习大纲3-过滤器、指令、动画

自定义过滤器:

  • 在vue1.0中有过滤器,比如:
//首字母大写
{{msg | capitalize}}
//货币符号
{{100 | currency '%'}}
  • 在vue2.0中所有的内置过滤器都被销毁了,2.0推荐我们自己写过滤器;
//HTML
{{Date.now() | date('aaa','bbbb')}}
//JS //param1:过滤的内容,即原数据; param2:"aaaa"; param3:"bbb" Vue.filter('date',function (input,param1,param2) { var d=new Date(); console.log(arguments) return `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}` });

自定义指令; 作用:可以进行dom操作;

//html
我是一个蓝色边框的盒子
//js var vm=new Vue({ el:'#app', data:{ msg:'blue' } })
  • 1.0 自定义指令
Vue.directive('border',function (param) {
//this.el可以获取DOM元素;
    this.el.style.border=`1px solid ${param}`;
});
  • 2.0 自定义指令
Vue.directive('border',function (el,binding) {
//el:可以获取dom元素; binding内容丰富:表达式,修饰符,value值等都在里面
    el.style.border=`1px solid ${binding.value}`
})

小实战,vue2.0 自定义指令实现拖拽

//html
//JS部分
//因为没有传参,第二个binding参数可以省略;
Vue.directive('drag',function (el) {
    el.onmousedown=function (e) {
        var disX=e.pageX-el.offsetLeft;
        var disY=e.pageY-el.offsetTop;
        document.onmousemove=function (e) {
            el.style.left=e.pageX-disX+'px';
            el.style.top=e.pageY-disY+'px';
        };
        document.onmouseup=function () {
            document.onmousemove=null;
            document.onmouseup=null;
        };
        e.preventDefault();
    }
});
var vm=new Vue({
    el:'#app'
})

自定义键盘事件:扩展键盘事件;他是修饰符

//html
  • VUE1.0:
Vue.directive('on').keyCodes.f1=112;
  • VUE2.0
Vue.config.keyCodes.f1=112;//112是f1的keycode

VUE1.0 动画

  • 手写动画过渡效果
//CSS
.fly-transition{
    transition: 1s linear;
}
/*设置一个最初的状态,还要设置结束的状态*/
.fly-enter{
    width: 0;
    opacity:0;
}
.fly-leave{
    width: 100px;
    opacity: 0;
}

//HTML
这是显示或隐藏
  • 用animate.css库
//HTML
这是显示或隐藏
//JS var vm=new Vue({ el:'#app', data:{ flag:true }, transitions:{ fly:{ enterClass:'fadeInUp', leaveClass:'fadeOutDown' } } })

VUE2.0 动画

  • vue2.0的动画有四种状态:
    • fly-enter 初始进入状态; fly-enter-active 激活进入时;
    • fly-leave 初始离开状态; fly-leave-active 激活离开时
  • 手写动画
//css
.fly-enter{
    width: 100px;
    height: 100px;
}
.fly-enter-active{
    transition: 1s linear;
}
.fly-leave-active{
    width:100px;
    height: 100px;
    transition: 1s linear;
}

//HTML


    
显示或隐藏的文字框
  • vue2.0配合animate.css库
  • 下面实现的是多组动画:
    • 单组动画:用transition标签包裹即可;无需key;
    • 多组动画:1)用transiton-group包裹 2)里面的每个div必须有key;

    
显示或隐藏的文字框
显示或隐藏的文字框

动画小实战:输入不同的数组,显示不同的列表内容

你可能感兴趣的:(vue学习大纲3-过滤器、指令、动画)