Vue基础知识总结（二）

一、解决网速慢的时候用户看到花括号标记

　　（1）v-cloak，防止闪烁，通常用于比较大的选择器上。

　　给元素添加属性v-cloak，然后style里面：[v-cloak]{display:none;}

　　（2）{{msg}}，等价于<span v-text="msg"></span>

　　（3）{{{msg}}}，html转意输出，等价于<span v-html="msg"></span>（在v2.0上，三括号已经删除）

二、计算属性的使用：

　　（1）注意：计算属性computed的写法方式是跟methods是一样的，但是computed是属性，可以直接拿来当属性使用，而methods是方法

　　（2）计算属性的值取决于函数的返回值，这样函数里面就可以写相应的业务逻辑

　　（3）2种方式：

//1、默认get方式
new Vue({
    el:‘#box‘,
    data:{
        a:1
    },
    computed:{
        b:function(){
            //业务代码逻辑
            return this.a + 1; //计算属性b的值取决于return的值
        }
    }
});
//2、完整写法：有get和set
computed:{
    b:{
        get:function(){
            return this.a + 1;
        },
        set:function(val){//val即为给计算属性b赋的值
            this.a=val;
        }
    }
}

三、vue实例自带的简单方法

　　vm.$el 就是指定的el元素
　　vm.$data 就是data对象
　　vm.$mount(el)手动挂载元素
　　vm.$options 获取自定义属性或方法（vm.$options.aa，vm.$options.show()）
　　vm.$destroy 销毁对象
　　vm.$log() 查看现在数据的状态

四、循环

　　（1）循环有重复的数据怎么办？加track-by="索引或uuid"，还会提高循环的性能

<li v-for="value in arr" track-by="$index">{{value}}</li>

五、过滤器

　　1、跟json串使用：json，类似于JSON.stringify，如果属性是json对象的时候，用于将json对象序列化显示

　　2、跟事件配合使用：debounce 2000，延迟执行

　　3、跟数组配合适用的过滤器：

　　　　limitBy 2 1，限制取几个数据，有两个参数：limitBy 取几个 从哪开始（索引）

　　　　filterBy ‘a‘，按字符过滤包含给定字符的数据

　　　　orderBy 1（正序，-1倒序），排序用

　　4、自定义过滤器：常规的model—过滤—view

　　语法：Vue.filter(name,function(arguments){})

<div id="box">{{a | toDou 1 2}}</div>

Vue.filter(‘toDou‘,function(input,a,b){
    alert(a+‘,‘+b);//input即传a值，a/b依次为1、2
    return input<10?‘0‘+input:‘‘+input;
});

　　5、双向过滤器：完整的写法，默认的写法就是一般默认是read

    　　//<h2>welcome</h2>
        Vue.filter(‘filterHtml‘,{
            read:function(input){ //model-view
                alert(1);
                return input.replace(/<[^<]+>/g,‘‘);
            },
            write:function(val){ //view -> model
                console.log(val);
                return val;
            }
        });

六、自定义属性指令

　　Vue.directive(指令名称,function(接收参数){ this.el — 原生的dom对象})

　　<div v-red="参数"></div>，传参数

　　指令名称：v-red，那么对应的是red；指令必须以 v- 开头，否则不生效

//拖拽指令自定义
Vue.directive(‘drag‘,function(){
    var oDiv=this.el;
    oDiv.onmousedown=function(ev){
        var disX=ev.clientX-oDiv.offsetLeft;
        var disY=ev.clientY-oDiv.offsetTop;

        document.onmousemove=function(ev){
            var l=ev.clientX-disX;
            var t=ev.clientY-disY;
            oDiv.style.left=l+‘px‘;
            oDiv.style.top=t+‘px‘;
        };
        document.onmouseup=function(){
            document.onmousemove=null;
            document.onmouseup=null;
        };
    };
});

//带参数指令
Vue.directive(‘red‘,function(color){
    this.el.style.background=color;//color接收参数red
});

<span v-red="‘red‘">{{msg}}</span>

　　自定义元素指令：语法不一样

//自定义元素指令，用处不大
Vue.elementDirective(‘zns-red‘,{
    bind:function(){
        this.el.style.background=‘red‘;
    }
});

<div id="box">
    <zns-red></zns-red>
</div>

七、自定义键盘信息

　　Vue.directive("on").keyCodes.ctrl=17

　　那么就可以这么使用了：@keydown.ctrl="show"，按ctrl键触发

八、监听数据变化

　　vm.$watch(name,function(){})，浅度监视，适用于name为基础类型

　　vm.$watch(name,function(){},{deep:true})，深度监视，适用于name为基础类型和引用类型

原文地址：https://www.cnblogs.com/goloving/p/8619961.html