Vue1.0學習小結2

weixin_33890499發表於2017-09-05

<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>

學習小結
2018-03-30
vue 學習小結
2019-01-26
Vue
JavaScript學習小結
2018-09-24
JavaScript
NFS學習小結
2017-11-17
NFS
042學習小記（2）
2012-07-27
小程式學習總結
2018-10-29
git學習小總結
2018-07-15
Git
CommonsChunkPlugin學習小結
2018-01-31
Plugin
整合學習原理小結
2016-12-04
Spring 學習小結
2016-12-02
Spring
qDebug 學習小結
2011-06-01
HTML5 學習小結
2020-04-06
HTML
Activiti 學習筆記小結
2016-09-16
筆記
Thrift－java學習小結
2016-07-27
Java
awk指令碼學習小結
2013-07-10
指令碼
Android:Sqlitedatabase學習小結
2012-11-07
AndroidSQLiteDatabase
shell學習總結-2
2019-04-03
學習心得總結（２）
2015-04-24
WebPack持久快取學習小結
2019-03-04
Web快取
《angular 權威教程》學習小結
2017-05-01
Angular
struts2學習筆記–執行緒安全問題小結
2016-02-05
筆記執行緒
數論學習總結2
2013-08-04
不確定估計學習小結
2020-08-16
Nginx支援WebSocket反向代理-學習小結
2018-08-21
NginxWeb
redis執行緒模型-學習小結
2020-12-29
Redis執行緒模型
學習vue第一階段小結
2020-10-29
Vue
Android學習之 WebView使用小結
2014-11-20
AndroidWebView
7.15--7.19學習小結
2013-07-19
【C#學習之辨析小總結】
2016-02-20
C#
每天花2小時學習5大學習網站！
2019-05-05
學習網站
微信小程式開發學習筆記[2]
2019-01-04
微信小程式筆記
學習 JS 資料結構(2)：連結串列
2016-11-23
JS資料結構
Nginx code 常用狀態碼學習小結
2017-07-19
Nginx
跟小師父學習QTP後的總結
2008-05-04
QT
軟體測試工具QTP學習小結
2009-09-23
QT
MySQL深入研究--學習總結（2）
2021-03-04
MySql
AIX 5L學習總結2
2017-11-14
AI
前端學習小結（一）—基礎入門篇
2016-12-19
前端