vue学习

vue循环：

var vm = new Vue({    el:'#box',    data: {        a: ''    }});或者用mount挂载=>var vm = new Vue({    data: {        a: ''    }}),$mount('#box');

v-for="item in data"

会有重复数据， track-by = “索引”，提高循环的性能

track-by = "$index"

vue过滤器：

debounce  延迟，配合事件

@keyup="show | debounce 2000"

表示键盘弹起事件发生2秒后，执行show函数

limitBy 限制循环的过滤器

limitBy   限制几个   从第几个开始

filterBy 过滤数据

filterBy 'o'

选取带字幕o的数据

orderBy 1/-1 排序，按正序/倒叙排

自定义过滤器

Vue.filter(name,function(){

});

<div id="#box">    {{a | toDou a b}}</box>Vue.fleter('toDou',function(input,a,b){     return input<10 ? '0'+input : ''+input;});

自定义指令
扩展了html的语法

Vue.directive(name,function(){});Vue.directive('red',function(){    this.el.style.background = 'yellow';});<div v-red>这一行会变成黄色</div>

自定义拖拽标签 drag

Vue.directive('drag',function(){     var oDiv  = this.el;     oDiv.onmousedown = function(ev){         var l = ev.clientX - oDiv.offsetLeft;         var t = ev.clientY - oDiv.offsetTop;         document.onmousemove = function(ev){             var posX = ev.clientX - l;             var posY = ev.clientY - t;             oDiv.style.left = posX + 'px';             oDiv.style.top = posY + 'px';         }          document.onmouseup = function(){             document.onmousemove = null;             document.onmouseup = null;         }     }; });

自定义元素指令（用处不大）

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

自定义键盘信息：

console.log(ev.keyCode)；查看所按键盘键码；

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

监听数据变化：

之前有 vm.$el/$mount/$options

vm.$watch(name,fnCb) fnCb 回调函数