复写VUE.JS第四天
2018-05-02 本文已影响0人
飞奔的小白
过滤器
Vue.filter('toDou',function(input){
return input<10?'0'+input:' '+ input;
})
Vue.filter(name,function(input){
})
时间转化器
Vue.filter('date',function(){
var oDate = new Date(input);
return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
})
过滤html标记
Vue.filter('filterHtml',function(input){
return input.replace(/<[^<]/g,'');
})
双向过滤器
Vue.filter('filterHtml',{
read:function(){ //model->view
return input.replace(/<[^<+]>/g,'');
},
write:function(){ //view -> model
console.log(val);
}
})
自定义指令
Vue.directive(指令名称，function(参数){
this.el->原生DOM元素
})
指令名称 v-red -> red
*注意：必须以v-开头
拖拽：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<style type="text/css" media="screen">
#box_one{
width:100px;
height:100px;
background:blue;
position:absolute;
right:0px;
top:0px;
}
</style>
<script type="text/javascript">
Vue.directive('drag',function(){
var oDiv = this.el;
console.log(this);
oDiv.onmousedown = function(ev){
var disX = ev.clientX - oDiv.offsetLeft;
var disY = ev.clientY - oDiv.offsetTop;
document.onmousemove = function(ev){
var l = ev.clientX-disX;
var t = ev.clientY-disY;
oDiv.style.left = l +'px';
oDiv.style.top = t + 'px';
};
document.onmouseup = function(){
document.onmousemove = null ;
document.onmouseup = null ;
}
}
})
window.onload=function(){
var vm = new Vue({
el:'#box',
data:{
msg:'welcome'
}
})
}
</script>
</head>
<body>
<div id="box">
<div id="box_one" v-drag>
</div>
</div>
</body>
</html>```
--------------------------------------
###自定义元素指令
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
})
--------------------------------------------
@keydown.up
@keydown.enter
自定义键盘信息
Vue.directive('on').keyCodes.ctrl=17;
----------------------------------------------
监听数据变化：
vm.$el/$mount/$options/..
vm.$watch(name,回调函数);//浅度
vm.$watch('a',function(){
alert('发生变化')；
this.b=this.a+100;
})
vm.$watch('json',function(){
alert('1');
},{deep:true})//深度监视
