Vue1.0学习小结2

2017-09-05  本文已影响0人  前端工程狮_jam

目录

  1. 生命周期
  2. 计算属性
  3. 自定义方法与属性
  4. 数据监听
  5. 动画
  6. 组件
  7. slot
  8. 路由
1.生命周期

用Vue框架，熟悉它的生命周期可以让开发更好的进行。这里借助一个图片说明一下生命周期的钩子函数。

生命周期 
<script>
    var vm=new Vue({
        el:'#box',
        data:{
            msg:'well'
        },
        created:function(){
            alert('实例已经创建');
        },
        beforeCompile:function(){
            alert('编译之前');
        },
        compiled:function(){
            alert('编译之后');
        },
        ready:function(){
            alert('插入到文档中');
        },
        beforeDestroy:function(){
            alert('销毁之前');
        },
        destroyed:function(){
            alert('销毁之后');
        }
    });

    /*点击页面销毁vue对象*/
    document.onclick=function(){
        vm.$destroy();
    };
</script>
2.计算属性
//computed里面可以放置一些业务逻辑代码，一定记得return
<div id="box">
    a => {{a}}
    <br>
    b => {{b}}
</div>
<script>
    var vm=new Vue({
        el:'#box',
        data:{
            a:1
        },
        computed:{
            b:function(){
                //业务逻辑代码
                return this.a+1;
            }
        }
    });
    document.onclick=function(){
        vm.a=101;
    };
</script>
//computed里的属性默认也可以接收对象，有set和get方法
<div id="box">
    a => {{a}}
    <br>
    b => {{b}}
</div>
<script>
    var vm=new Vue({
        el:'#box',
        data:{
            a:1
        },
        computed:{
            b:{
                get:function(){
                    return this.a+2;
                },
                set:function(val){
                    this.a=val;
                }
            }
        }
    });

    document.onclick=function(){
        vm.b=10;
    };
</script>
3.自定义方法和属性
var vm=new Vue({
    aa:11, //自定义属性,
    show:function(){
        alert(1);
    },
    data:{
        a:1
    }
}).$mount('#box');
vm.$options.show();
console.log(vm.$options.aa);
console.log(vm.$log());  //可以相当于查看vm.$data
4.数据监听

可以在数据发生变化的时候监测处理，类似angular1的脏处理
a、vm.$watch(name,fnCb); //浅度监听针对基本值类型
b、vm.$watch(name,fnCb,{deep:true}); //深度监视，可以处理json对象

<div id="box">
    {{a}}
    <br>
    {{b}}
</div>
<script>
    var vm=new Vue({
        el:'#box',
        data:{
            a:111,
            b:2
        }
    });
    vm.$watch('a',function(){
        alert('发生变化了');
        this.b=this.a+100;
    });
</script>
//深度监听，添加deep=true
<div id="box">
    {{json | json}}
    <br>
    {{b}}
</div>
<script>
    var vm=new Vue({
        el:'#box',
        data:{
            json:{name:'strive',age:16},
            b:2
        }
    });
    vm.$watch('json',function(){
        alert('发生变化了');
    },{deep:true});  
    document.onclick=function(){
        vm.json.name='aaa';
    };
</script>
5.动画

vue动画有格式参考，例如想加fade动画效果，可以有fade-transition/fade-enter/fade-leave等，不过如果想弄点好看点，建议配合animate.css

<style>
    .fade-transition{
        transition: 1s all ease;    
    }
    .fade-enter{
        opacity: 0;
    }
    .fade-leave{
        opacity: 0;
        transform: translateX(200px);
    }
</style>
<div id="box">
    <input type="button" value="按钮" @click="toggle">
    <div id="div1" v-show="bSign" transition="fade"></div>
</div>
<script>
    new Vue({
        el:'#box',
        data:{
            bSign:true
        },
        methods:{
            toggle(){
                this.bSign=!this.bSign;
            }
        }
    });
</script>
//引进animate.css
<div id="box">
    <input type="button" value="按钮" @click="toggle">
    <div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
</div>
<script>
    new Vue({
        el:'#box',
        data:{
            bSign:true
        },
        methods:{
            toggle(){
                this.bSign=!this.bSign;
            }
        },
        transitions:{ //定义所有动画名称
            bounce:{
                enterClass:'zoomInLeft',
                leaveClass:'zoomOutRight'
            }
        }
    });
</script>
6.组件

使用组件的方式有多种，还可以嵌套（父子级）。如果想了解组件之间的关系，可以安装vue-devtools插件，它可以从chrome商店直接下载安装。不过要注意的一点就是，需要翻墙才能下载。

//全局组件， extend方式
<div id="box">
    <aaa></aaa>
</div>
<script>
    var Aaa=Vue.extend({
        template:'<h3>我是标题3</h3>'
    });
    Vue.component('aaa',Aaa);  //注册组件
</script>

//局部组件，extend方式
<div id="box">
    <my-aaa></my-aaa>
</div>
<script>
    var Aaa=Vue.extend({
        template:'<h3>{{msg}}</h3>',
        data(){
            return {
                msg:'ddddd'
            }
        }
    });
    var vm=new Vue({
        el:'#box',
        components:{ //局部组件
            'my-aaa':Aaa
        }
    });
</script>

//局部组件，components方式
<div id="box">
    <my-aaa></my-aaa>
</div>
<script>
    var vm=new Vue({
        el:'#box',
        components:{
            'my-aaa':{
                data(){
                    return {
                        msg:'welcome vue'
                    }
                },
                methods:{
                    change(){
                        this.msg='changed';
                    }
                },
                template:'<h2 @click="change">标题2->{{msg}}</h2>'
            }
        }
    });
</script>

//全局组件，components方式
<div id="box">
    <my-aaa></my-aaa>
</div>
<script>
    Vue.component('my-aaa',{
        template:'<strong>好</strong>'
    });
    var vm=new Vue({
        el:'#box'
    });
</script>

//模板方式，使用script，类似backbone
<div id="box">
    <my-aaa></my-aaa>
</div>
<script type="x-template" id="aaa">
        <h2 @click="change">标题2->{{msg}}</h2>
</script>
<script>
    var vm=new Vue({
        el:'#box',
        components:{
            'my-aaa':{
                data(){
                    return {
                        msg:'welcome vue'
                    }
                },
                methods:{
                    change(){
                        this.msg='changed';
                    }
                },
                template:'#aaa'
            }
        }
    });
</script>

////模板方式，使用template
<div id="box">
    <my-aaa></my-aaa>
</div>
<template id="aaa">
    <h1>标题1</h1>
    <ul>
        <li v-for="val in arr">
            {{val}}
        </li>
    </ul>
</template>
<script>
    var vm=new Vue({
        el:'#box',
        components:{
            'my-aaa':{
                data(){
                    return {
                        msg:'welcome vue',
                        arr:['apple','banana','orange']
                    }
                },
                methods:{
                    change(){
                        this.msg='changed';
                    }
                },
                template:'#aaa'
            }
        }
    });
</script>

//动态切换组件，利用is特性
<div id="box">
    <input type="button" @click="a='aaa'" value="aaa组件">
    <input type="button" @click="a='bbb'" value="bbb组件">
    <component :is="a"></component>
</div>
<script>
    var vm=new Vue({
        el:'#box',
        data:{
            a:'aaa'
        },
        components:{
            'aaa':{
                template:'<h2>我是aaa组件</h2>'
            },
            'bbb':{
                template:'<h2>我是bbb组件</h2>'
            }
        }
    });
</script>

//嵌套组件（父子组件）
//子级获取父级数据用props，props可以用数组方式忽略类型
<template id="aaa">
    <bbb :mmm="msg2" :my-msg="msg"></bbb>
</template>
<script>
    var vm=new Vue({
        el:'#box',
        data:{
            a:'aaa'
        },
        components:{
            'aaa':{
                data(){
                    return {
                        msg:111,
                        msg2:'我是父组件的数据'
                    }
                },
                template:'#aaa',
                components:{
                    'bbb':{
                        props:['mmm','myMsg'],  //第一种方式，建议
                        //props:{    //第二种方式，如果有-，要写成驼峰式写法
                        //  'm':String,
                        //  'myMsg':Number
                        //},
                        template:'<h3>我是bbb组件->{{mmm}} <br> {{myMsg}}</h3>'
                    }
                }
            }
        }
    });
</script>

//父级获取子级数据用
//子级主动推送数据用vm.$emit(事件名,数据) 父级用@的方式写事件接收 ，推荐
//此外可以用vm.$dispatch(事件名,数据) 子级向父级发送数据 vm.$broadcast(事件名,数据) 父级向子级广播数据。 配合event使用。在vue2.0里面已经废除。
<template id="aaa">
    <span>我是父级 -> {{msg}}</span>
    <bbb @child-msg="get"></bbb>
</template>
<template id="bbb">
    <h3>子组件-</h3>
    <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:{
                    get(msg){
                        // alert(msg);
                        this.msg=msg;
                    }
                },
                components:{
                    'bbb':{
                        data(){
                            return {
                                a:'我是子组件的数据'
                            }
                        },
                        template:'#bbb',
                        methods:{
                            send(){
                                this.$emit('child-msg',this.a);
                            }
                        }
                    }
                }
            }
        }
    });
</script>
7.slot

它的作用是作用: 占个位置，类似ng里面 transclude（指令），可以参考插件vue-infinite-loading

//单个slot
<div id="box">
    <aaa>
        <ul>
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
        </ul>
    </aaa>
    <hr>
    <aaa>
    </aaa>
</div>
<template id="aaa">
    <h1>xxxx</h1>
    <slot>这是默认的情况</slot>
    <p>welcome vue</p>
</template>
<script>
    var vm=new Vue({
        el:'#box',
        data:{
            a:'aaa'
        },
        components:{
            'aaa':{
                template:'#aaa'
            }
        }
    });
</script>
//多个slot，用name区分
<div id="box">
    <aaa>
        <ul slot="ul-slot">
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
        </ul>
        <ol slot="ol-slot">
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ol>
    </aaa>
    <hr>
    <aaa>
    </aaa>
</div>
<template id="aaa">
    <h1>xxxx</h1>
    <slot name="ol-slot">这是默认的情况</slot>
    <p>welcome vue</p>
    <slot name="ul-slot">这是默认的情况2</slot>
</template>
<script>
    var vm=new Vue({
        el:'#box',
        data:{
            a:'aaa'
        },
        components:{
            'aaa':{
                template:'#aaa'
            }
        }
    });
</script>
8. 路由

对于单页应用，官方提供了vue-router进行路由跳转的处理

//vue跳转链接格式  <a v-link="{path:'/home'}">主页</a>
//展示内容:<router-view></router-view>
//1. 准备一个根组件
var App=Vue.extend();
//2. Home News组件都准备
var Home=Vue.extend({
    template:'<h3>我是主页</h3>'
});
var News=Vue.extend({
    template:'<h3>我是新闻</h3>'
});
//3. 准备路由
var router=new VueRouter();
//4. 关联
router.map({
    'home':{
        component:Home
    },
    'news':{
        component:News
    }
});
//5. 启动路由
router.start(App,'#box');
//6.指定默认跳转:
router.redirect({
‘/’:'/home'
});

//路由嵌套(多层路由)，用subRoutes 
<div id="box">
    <ul>
        <li>
            <a v-link="{path:'/home'}">主页</a>
        </li>
        <li>
            <a v-link="{path:'/news'}">新闻</a>
        </li>
    </ul>
    <div>
        <router-view></router-view>
    </div>  
</div>

<template id="home">
    <h3>我是主页</h3>
    <div>
        <a v-link="{path:'/home/login'}">登录</a>
        <a v-link="{path:'/home/reg'}">注册</a>
    </div>
    <div>
        <router-view></router-view>
    </div>
</template>
<template id="news">
    <h3>我是新闻</h3>
</template>
<script>
    //1. 准备一个根组件
    var App=Vue.extend();
    //2. Home News组件都准备
    var Home=Vue.extend({
        template:'#home'
    });
    var News=Vue.extend({
        template:'#news'
    });
    //3. 准备路由
    var router=new VueRouter();
    //4. 关联
    router.map({
        'home':{
            component:Home,
            subRoutes:{
                'login':{
                    component:{
                        template:'<strong>我是登录信息</strong>'
                    }
                },
                'reg':{
                    component:{
                        template:'<strong>我是注册信息</strong>'
                    }
                }
            }
        },
        'news':{
            component:News
        }
    });
    //5. 启动路由
    router.start(App,'#box');
    //6. 跳转
    router.redirect({
        '/':'home'
    });
</script>

//url的path路径为 detail/001?a=1&b=1
//参数传递router格式为'/detail/:id'，注意有冒号。接收用$route.params
//path后面？问号后边参数接收$route.query
<template id="detail">
    {{$route.params | json}}
    <br>
    {{$route.path}}
    <br>
    {{$route.query | json}}
</template>
<script>
    //注意下边subRoutes参数前面的冒号
    router.map({
        'home':{
            component:Home,
            subRoutes:{
                'login':{
                    component:{
                        template:'<strong>我是登录信息</strong>'
                    }
                },
                'reg':{
                    component:{
                        template:'<strong>我是注册信息</strong>'
                    }
                }
            }
        },
        'news':{
            component:News,
            subRoutes:{
                '/detail/:id':{
                    component:Detail
                }
            }
        }
    });
</script>
上一篇下一篇

猜你喜欢

热点阅读