数据配合使用过滤器
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{
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.onclick=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);//自定义静态属性