Vue1.0學(xué)習(xí)小結(jié)2

目錄

  1. 生命周期
  2. 計(jì)算屬性
  3. 自定義方法與屬性
  4. 數(shù)據(jù)監(jiān)聽
  5. 動(dòng)畫
  6. 組件
  7. slot
  8. 路由
1.生命周期

用Vue框架舷礼,熟悉它的生命周期可以讓開發(fā)更好的進(jìn)行欲逃。這里借助一個(gè)圖片說明一下生命周期的鉤子函數(shù)赎败。

生命周期
<script>
    var vm=new Vue({
        el:'#box',
        data:{
            msg:'well'
        },
        created:function(){
            alert('實(shí)例已經(jīng)創(chuàng)建');
        },
        beforeCompile:function(){
            alert('編譯之前');
        },
        compiled:function(){
            alert('編譯之后');
        },
        ready:function(){
            alert('插入到文檔中');
        },
        beforeDestroy:function(){
            alert('銷毀之前');
        },
        destroyed:function(){
            alert('銷毀之后');
        }
    });

    /*點(diǎn)擊頁面銷毀vue對(duì)象*/
    document.onclick=function(){
        vm.$destroy();
    };
</script>
2.計(jì)算屬性
//computed里面可以放置一些業(yè)務(wù)邏輯代碼禀苦,一定記得return
<div id="box">
    a => {{a}}
    <br>
    b => {世杀}
</div>
<script>
    var vm=new Vue({
        el:'#box',
        data:{
            a:1
        },
        computed:{
            b:function(){
                //業(yè)務(wù)邏輯代碼
                return this.a+1;
            }
        }
    });
    document.onclick=function(){
        vm.a=101;
    };
</script>
//computed里的屬性默認(rèn)也可以接收對(duì)象待笑,有set和get方法
<div id="box">
    a => {{a}}
    <br>
    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());  //可以相當(dāng)于查看vm.$data
4.數(shù)據(jù)監(jiān)聽

可以在數(shù)據(jù)發(fā)生變化的時(shí)候監(jiān)測(cè)處理摔踱,類似angular1的臟處理
a、vm.$watch(name,fnCb); //淺度監(jiān)聽針對(duì)基本值類型
b怨愤、vm.$watch(name,fnCb,{deep:true}); //深度監(jiān)視派敷,可以處理json對(duì)象

<div id="box">
    {{a}}
    <br>
    {}
</div>
<script>
    var vm=new Vue({
        el:'#box',
        data:{
            a:111,
            b:2
        }
    });
    vm.$watch('a',function(){
        alert('發(fā)生變化了');
        this.b=this.a+100;
    });
</script>
//深度監(jiān)聽撰洗,添加deep=true
<div id="box">
    {{json | json}}
    <br>
    {篮愉}
</div>
<script>
    var vm=new Vue({
        el:'#box',
        data:{
            json:{name:'strive',age:16},
            b:2
        }
    });
    vm.$watch('json',function(){
        alert('發(fā)生變化了');
    },{deep:true});  
    document.onclick=function(){
        vm.json.name='aaa';
    };
</script>
5.動(dòng)畫

vue動(dòng)畫有格式參考,例如想加fade動(dòng)畫效果差导,可以有fade-transition/fade-enter/fade-leave等试躏,不過如果想弄點(diǎn)好看點(diǎn),建議配合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>
//引進(jìn)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:{ //定義所有動(dòng)畫名稱
            bounce:{
                enterClass:'zoomInLeft',
                leaveClass:'zoomOutRight'
            }
        }
    });
</script>
6.組件

使用組件的方式有多種设褐,還可以嵌套(父子級(jí))冗酿。如果想了解組件之間的關(guān)系埠对,可以安裝vue-devtools插件,它可以從chrome商店直接下載安裝裁替。不過要注意的一點(diǎn)就是项玛,需要翻墻才能下載。

//全局組件弱判, extend方式
<div id="box">
    <aaa></aaa>
</div>
<script>
    var Aaa=Vue.extend({
        template:'<h3>我是標(biāo)題3</h3>'
    });
    Vue.component('aaa',Aaa);  //注冊(cè)組件
</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">標(biāo)題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">標(biāo)題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>標(biāo)題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>

//動(dòng)態(tài)切換組件固灵,利用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>

//嵌套組件(父子組件)
//子級(jí)獲取父級(jí)數(shù)據(jù)用props,props可以用數(shù)組方式忽略類型
<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:'我是父組件的數(shù)據(jù)'
                    }
                },
                template:'#aaa',
                components:{
                    'bbb':{
                        props:['mmm','myMsg'],  //第一種方式劫流,建議
                        //props:{    //第二種方式巫玻,如果有-,要寫成駝峰式寫法
                        //  'm':String,
                        //  'myMsg':Number
                        //},
                        template:'<h3>我是bbb組件->{{mmm}} <br> {{myMsg}}</h3>'
                    }
                }
            }
        }
    });
</script>

//父級(jí)獲取子級(jí)數(shù)據(jù)用
//子級(jí)主動(dòng)推送數(shù)據(jù)用vm.$emit(事件名,數(shù)據(jù)) 父級(jí)用@的方式寫事件接收 祠汇,推薦
//此外可以用vm.$dispatch(事件名,數(shù)據(jù)) 子級(jí)向父級(jí)發(fā)送數(shù)據(jù) vm.$broadcast(事件名,數(shù)據(jù)) 父級(jí)向子級(jí)廣播數(shù)據(jù)仍秤。 配合event使用。在vue2.0里面已經(jīng)廢除可很。
<template id="aaa">
    <span>我是父級(jí) -> {{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:'我是父組件的數(shù)據(jù)'
                    }
                },
                template:'#aaa',
                methods:{
                    get(msg){
                        // alert(msg);
                        this.msg=msg;
                    }
                },
                components:{
                    'bbb':{
                        data(){
                            return {
                                a:'我是子組件的數(shù)據(jù)'
                            }
                        },
                        template:'#bbb',
                        methods:{
                            send(){
                                this.$emit('child-msg',this.a);
                            }
                        }
                    }
                }
            }
        }
    });
</script>
7.slot

它的作用是作用: 占個(gè)位置诗力,類似ng里面 transclude(指令),可以參考插件vue-infinite-loading

//單個(gè)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>這是默認(rèn)的情況</slot>
    <p>welcome vue</p>
</template>
<script>
    var vm=new Vue({
        el:'#box',
        data:{
            a:'aaa'
        },
        components:{
            'aaa':{
                template:'#aaa'
            }
        }
    });
</script>
//多個(gè)slot我抠,用name區(qū)分
<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">這是默認(rèn)的情況</slot>
    <p>welcome vue</p>
    <slot name="ul-slot">這是默認(rèn)的情況2</slot>
</template>
<script>
    var vm=new Vue({
        el:'#box',
        data:{
            a:'aaa'
        },
        components:{
            'aaa':{
                template:'#aaa'
            }
        }
    });
</script>
8. 路由

對(duì)于單頁應(yīng)用苇本,官方提供了vue-router進(jìn)行路由跳轉(zhuǎn)的處理

//vue跳轉(zhuǎn)鏈接格式  <a v-link="{path:'/home'}">主頁</a>
//展示內(nèi)容:<router-view></router-view>
//1. 準(zhǔn)備一個(gè)根組件
var App=Vue.extend();
//2. Home News組件都準(zhǔn)備
var Home=Vue.extend({
    template:'<h3>我是主頁</h3>'
});
var News=Vue.extend({
    template:'<h3>我是新聞</h3>'
});
//3. 準(zhǔn)備路由
var router=new VueRouter();
//4. 關(guān)聯(lián)
router.map({
    'home':{
        component:Home
    },
    'news':{
        component:News
    }
});
//5. 啟動(dòng)路由
router.start(App,'#box');
//6.指定默認(rèn)跳轉(zhuǎn):
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'}">注冊(cè)</a>
    </div>
    <div>
        <router-view></router-view>
    </div>
</template>
<template id="news">
    <h3>我是新聞</h3>
</template>
<script>
    //1. 準(zhǔn)備一個(gè)根組件
    var App=Vue.extend();
    //2. Home News組件都準(zhǔn)備
    var Home=Vue.extend({
        template:'#home'
    });
    var News=Vue.extend({
        template:'#news'
    });
    //3. 準(zhǔn)備路由
    var router=new VueRouter();
    //4. 關(guān)聯(lián)
    router.map({
        'home':{
            component:Home,
            subRoutes:{
                'login':{
                    component:{
                        template:'<strong>我是登錄信息</strong>'
                    }
                },
                'reg':{
                    component:{
                        template:'<strong>我是注冊(cè)信息</strong>'
                    }
                }
            }
        },
        'news':{
            component:News
        }
    });
    //5. 啟動(dòng)路由
    router.start(App,'#box');
    //6. 跳轉(zhuǎn)
    router.redirect({
        '/':'home'
    });
</script>

//url的path路徑為 detail/001?a=1&b=1
//參數(shù)傳遞router格式為'/detail/:id'菜拓,注意有冒號(hào)圈澈。接收用$route.params
//path后面?問號(hào)后邊參數(shù)接收$route.query
<template id="detail">
    {{$route.params | json}}
    <br>
    {{$route.path}}
    <br>
    {{$route.query | json}}
</template>
<script>
    //注意下邊subRoutes參數(shù)前面的冒號(hào)
    router.map({
        'home':{
            component:Home,
            subRoutes:{
                'login':{
                    component:{
                        template:'<strong>我是登錄信息</strong>'
                    }
                },
                'reg':{
                    component:{
                        template:'<strong>我是注冊(cè)信息</strong>'
                    }
                }
            }
        },
        'news':{
            component:News,
            subRoutes:{
                '/detail/:id':{
                    component:Detail
                }
            }
        }
    });
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末尘惧,一起剝皮案震驚了整個(gè)濱河市康栈,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌喷橙,老刑警劉巖啥么,帶你破解...
    沈念sama閱讀 222,590評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異贰逾,居然都是意外死亡悬荣,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門疙剑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來氯迂,“玉大人践叠,你說我怎么就攤上這事〗朗矗” “怎么了禁灼?”我有些...
    開封第一講書人閱讀 169,301評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長轿曙。 經(jīng)常有香客問我弄捕,道長,這世上最難降的妖魔是什么导帝? 我笑而不...
    開封第一講書人閱讀 60,078評(píng)論 1 300
  • 正文 為了忘掉前任守谓,我火速辦了婚禮,結(jié)果婚禮上您单,老公的妹妹穿的比我還像新娘斋荞。我一直安慰自己,他們只是感情好虐秦,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,082評(píng)論 6 398
  • 文/花漫 我一把揭開白布平酿。 她就那樣靜靜地躺著,像睡著了一般羡疗。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上别洪,一...
    開封第一講書人閱讀 52,682評(píng)論 1 312
  • 那天叨恨,我揣著相機(jī)與錄音,去河邊找鬼挖垛。 笑死痒钝,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的痢毒。 我是一名探鬼主播送矩,決...
    沈念sama閱讀 41,155評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼哪替!你這毒婦竟也來了栋荸?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,098評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤凭舶,失蹤者是張志新(化名)和其女友劉穎晌块,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體帅霜,經(jīng)...
    沈念sama閱讀 46,638評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡匆背,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,701評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了身冀。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片钝尸。...
    茶點(diǎn)故事閱讀 40,852評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡括享,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出珍促,到底是詐尸還是另有隱情铃辖,我是刑警寧澤,帶...
    沈念sama閱讀 36,520評(píng)論 5 351
  • 正文 年R本政府宣布踢星,位于F島的核電站澳叉,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏沐悦。R本人自食惡果不足惜成洗,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,181評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望藏否。 院中可真熱鬧瓶殃,春花似錦、人聲如沸副签。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽淆储。三九已至冠场,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間本砰,已是汗流浹背碴裙。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評(píng)論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留点额,地道東北人舔株。 一個(gè)月前我還...
    沈念sama閱讀 49,279評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像还棱,于是被迫代替她去往敵國和親载慈。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,851評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • Vue 實(shí)例 屬性和方法 每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性:var data = { a:...
    云之外閱讀 2,221評(píng)論 0 6
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容珍手,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容办铡。關(guān)于...
    云之外閱讀 5,052評(píng)論 0 29
  • 1.安裝 可以簡(jiǎn)單地在頁面引入Vue.js作為獨(dú)立版本,Vue即被注冊(cè)為全局變量琳要,可以在頁面使用了料扰。 如果希望搭建...
    Awey閱讀 11,039評(píng)論 4 129
  • 基本格式 以json的形式、將數(shù)據(jù)(支持所有格式)掛載在vue的data上焙蹭、方法掛載在vue的methods上晒杈。 ...
    kirito_song閱讀 776評(píng)論 0 21
  • vue 2.0 漸進(jìn)式框架 MVC 單向通信 > m:model 數(shù)據(jù)層 保存數(shù)據(jù) > v:view視圖層 用戶界...
    web前端ling閱讀 739評(píng)論 0 0