Vue基础知识总结（二）

转载

mob60475702efd6 2018-03-21 23:33:00

文章标签 数据 html json 自定义自定义属性 文章分类 代码人生

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

　　（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为基础类型和引用类型

九、Vue组件

　　1、组件创建注册步骤：

　　2种编写方式

　　Vue.extend()、Vue.component()、在el下面使用

　　注意：Vue.extend()里面可以放模板、data、methods，完全跟new Vue()实例一样。Vue.extend()就相当于Vue的一个构造函数，但是需要注意的是，如果里面需要放data数据的时候，data需要是一个函数，而且必须return一个对象，该对象就跟new Vue()里面的data对象一样。

//创建组件构造器
var Aaa=Vue.extend({
    data(){
        return {
            msg:"MyMsg"
        }
    },
    methods:{
        click:function(){
            this.msg = "changed";
        }
    },
    template:'<h3 @click="click">{{msg}}</h3>'
});
//注册组件
Vue.component('aaa',Aaa);
var vm=new Vue({
    el:'#box',
    data:{
        bSign:true
    }
});

　　2、全局组件和局部组件

　　3、模板编写方式：

　　script引入方式，改type类型

　　直接template标签，template标签里必须包含html标签

　　4、动态组件：<components :is="组件名称"></components>

　　5、父子组件及父子组件通信

　　6、父组件获取子组件数据：下面这四步

　　其本质是：子组件把自己的数据发送到父级

　　子组件发送用vm.$emit("事件名称","数据名称")，父组件接收用v-on

<body>
    <div id="box">
        <aaa></aaa>
    </div>
    //模板数据
    <template id="aaa">
        <span>我是父级 -> {{msg}}</span>
        //3、父组件绑定接收事件，接收的一边是子组件里的事件名，一边是父组件里面需要定义的事件名
        <bbb @child-msg="get"></bbb>
    </template>
    <template id="bbb">
        <h3>子组件-</h3>
        //1、子组件绑定发送事件
        <input type="button" value="send" @click="send">
    </template>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    data(){
                        return {
                            msg:111,
                            msg2:'我是父组件的数据'
                        }
                    },
                    template:'#aaa',
                    methods:{
                        //4、父组件接收子组件发送的数据，作为参数，改变自己里面数据
                        get(msg){
                            this.msg=msg;
                        }
                    },
                    components:{
                        'bbb':{
                            data(){
                                return {
                                    a:'我是子组件的数据'
                                }
                            },
                            template:'#bbb',
                            methods:{
                                send(){//2、子组件通过$.emit主动发送数据a到父级
                                    this.$emit('child-msg',this.a);
                                }
                            }
                        }
                    }
                }
            }
        });
    </script>
</body>

十、组件里的slot作用：

　　slot：位置、卡槽，主要用于占位置

　　1、单个slot的情况，可以默认给个默认的情况，然后组件里面没有其他元素就显示默认情况；如果有其他元素就显示元素情况

　　2、多个slot的情况，得区分谁是谁的问题。需要给slot名字，并且可以随意跳动位置

//模板
<aaa>
    <ul slot="ul-slot"></ul>
    <ol slot="ol-slot"<</ol>
</aaa>
//slot名字与上面对应即可
<template>
    <h1>多个slot</h1>
    <slot name="ul-slot"></slot>
    <slot name-"ol-slot"></slot>
    <p>多个slot结束</p>
</template>

十一、Vue路由：根据不同url地址，请求不同组件

　　1、SPA应用：单页面应用。下面8步记住：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/vue/dist/vue.js"></script>
    <script src="bower_components/vue-router/dist/vue-router.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li>
                <a v-link="{path:'/home'}">主页</a>//1、需要有跳转链接：home、news分别对应一个组件
            </li>
            <li>
                <a v-link="{path:'/news'}">新闻</a>
            </li>
        </ul>
        <div>
            <router-view></router-view>//2、需要有展示内容区
        </div>    
    </div>
    <script>
        //3. 准备一个根组件
        var App=Vue.extend();
        //4. Home News组件都准备
        var Home=Vue.extend({
            template:'<h3>我是主页</h3>'
        });
        var News=Vue.extend({
            template:'<h3>我是新闻</h3>'
        });
        //5. 准备路由
        var router=new VueRouter();
        //6. 关联映射
        router.map({
            'home':{
                component:Home
            },
            'news':{
                component:News
            }
        });
        //7. 启动路由：将根组件，盒子是box
        router.start(App,'#box');
        //8. 跳转：设定默认使用哪个组件
        router.redirect({
            '/':'home'
        });
    </script>
</body>
</html>

　　点击之后会加class：v-link-active，可以以这个class加一些样式

　　2、路由嵌套（多层路由）

　　主要需要用到subRoutes

component:Home,
subRoutes:{
    'login':{
        component:{
            template:'<strong>我是登录信息</strong>'
        }
    },
    'reg':{
        component:{
            template:'<strong>我是注册信息</strong>'
        }
    }
}