vue中特殊的知识点

vm的一些属性和方法

    var vm=new Vue({
        aa:11,
        el:'#box',
        data:{

        }
    })
    vm.$el  //代表root元素
    vm.$data //代表data
    vm.$mount('#box') //手动挂载
    vm.$options.aa //自定义属性
    vm.$log() //查看数据的状态

关于循环中的重复数据
<li v-for="item in arr" track-by="$index"></li>
过滤器
1.debounce
2.limitBy 取几个从哪开始取 limitBy 2 1
3.filterBy ‘o’ 过滤数据
4.orderBy 排序 orderBy 1 正序 orderBy -1逆序
5.json {{msg | json}} 相当于JSON.stringfy
6.自定义过滤器

    {{a | date}}
    Vue.filter('date',function(input){
            var oDate=new Date(input);
            return oDate.getFullYear()+'-'oDate.getMonth()
        })

7.双向过滤器

model->view  view->model
Vue.filter('filterHTML',{
    read:function(){
        //默认是read  model->view
    },
    write:funtion(){
        //view->model
    }
})

8.自定义指令

Vue.directive('指令名称',function(参数){
})
指令名称 v-red => red
eg:
Vue.directive('red',function(color){
    this.el  //原生DOM元素
    this.el.style.background=red;
})
<div v-red="red"今天</div>

9.自定义元素 //不常用

Vue.elementDirective('zns-red',{
    bind:function(){
        this.el.style.background=red;
    }
})
<zns-red><zns-red>

10.自定义键盘信息

Vue.directive('on').keyCodes.ctrl=17;
<input @keydown.ctrl="show">

11.数据监听

data只是一个字符串  //浅度监控
vm.$watch('data',function(){
    alert('发生变化了')
})
json 是一个json数据 //深度监控
vm.$watch('json',function(){
    alert('发生变化了')
},{deep:true})

vue中特殊的知识点

猜你喜欢