vue学习大纲3-过滤器、指令、动画
2017-06-02 本文已影响162人
cd72c1240b33
自定义过滤器：
- 在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>
