自定义键盘事件

数据配合使用过滤器

limitBy  限制几个

limitBy 参数（取几个）

limitBy 取几个从哪里开始

 

filterBy 过滤数据

filterBy ‘谁’

orderBy  排序

orderBy 1/-1

orderBy 1--->正序

orderBy 1--->倒序

自定义指令

Vue.directive(指令名称,function(参数){

　　this.el---->原声DOM元素

})

指令名称 v-red----->red

注：必须以v-开头

<div v-red="参数"></div>

例子：

<style>

.t1{

width:100px;

height:100px;

background:red;

display:inline-block;

}

</style>

<div id="box">

　　　　<div v-red="'blue'" class='t1'></div>

</div>

Vue.directive('red',fucntion(color){

　　this.el.style.background=color;

});

var vm=new Vue({

el:"#box",

 

})

自定义键盘事件

Vue.directive('on').keyCodes.ctrl=17;

var vm=new Vue({

el:"#box",

methodds:{

　　show:function(){

　　alert(1)

　　}

　　}

})

<div id="box">

<input type="text" v-on:keydown.ctrl="show"/>

</div>

监听数据变化

vm.$el/$$mount/$options/....

vm.$watch(name,fnCb);

vm.$watch(name,fnCb,{deep:true})//深度监视

 

例子：

<div id="box">

{{a|json}}备注：|json为过滤器相当于JSON.stringify()

</div>

var vm=new Vue({

el:"#box",

data:{

a:{name:"liting",age:"18"}//这种操作对象类的复杂数据监听变化时应添加deep:true,

b:12

}

});

vm.$watch('a',function(){

alert(‘a的数据发生变化了’)

},{deep:true});

document.οnclick=function(){

vm.a.name="lishicheng"

}

双向过滤器（双向数据绑定v-model)

<div id="box">

<input type="text" v-model="book|filterHtml"/>

</div>

 

var vm=new Vue({

 el:"#box",

aa:11,//自定义属性通过$options获取

data:{

book:''

}

});

Vue.filter("filterHtml",{

read:function(){//model-view

return input.replace(/<[^<]+>/g,'');

},

write:function(val){//view->model

return val;

}

})

console.log(vm.$options.aa);//自定义静态属性

 

转载于:https://www.cnblogs.com/Ting-log/p/9120065.html