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

自定义过滤器：

• 在vue1.0中有过滤器，比如：

//首字母大写
{{msg | capitalize}}
//货币符号
{{100 | currency '%'}}

• 在vue2.0中所有的内置过滤器都被销毁了,2.0推荐我们自己写过滤器；

//HTML
<div id="app">
    {{Date.now() | date('aaa','bbbb')}}
</div>

//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
<div v-border="msg">我是一个蓝色边框的盒子</div>
//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
<div id="app">
    <div v-drag class="drag"></div>
    <div v-drag class="drag"></div>
</div>

//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
<div id="app">
    <input type="text" @keydown.f1="up">
</div>

• 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
<div id="app">
    <button @click="flag=!flag">显示／隐藏</button>
    <div v-show="flag" class="fadeIn" transition="fly">
        这是显示或隐藏
    </div>
</div>

• 用animate.css库

//HTML
<div id="app">
    <button @click="flag=!flag">显示／隐藏</button>
    <div v-show="flag" class="fadeIn animated" transition="fly">
        这是显示或隐藏
    </div>
</div>

//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
<button @click="flag=!flag">显示／隐藏</button>
<transition name="fly">
    <div class="div" v-show="flag">
        显示或隐藏的文字框
    </div>
</transition>

• vue2.0配合animate.css库
• 下面实现的是多组动画：
  • 单组动画：用transition标签包裹即可;无需key;
  • 多组动画：1）用transiton-group包裹 2）里面的每个div必须有key;

<transition-group enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
    <div class="div" v-show="flag" :key="1">
        显示或隐藏的文字框
    </div>
    <div class="div" v-show="flag" :key="2">
        显示或隐藏的文字框
    </div>
</transition-group>

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