VueJS第二天2--关于自定义过滤器 自定义指令。。。

vuejs第二天2

• 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->modelVue.filter('filterHTML',{    read:function(){        //默认是read  model->view    },    write:funtion(){        //view->model    }})

8.自定义指令

Vue.directive('指令名称',function(参数){})指令名称 v-red => redeg: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})