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 回调函数