適合初學(xué)者的Vue-1.0教程（四）

先介紹一下bower包管理器

npm install bower -g（全局安裝）
npm install bower （安裝到當(dāng)前文件夾）
bower -version（獲取bower的版本號(hào)）
bower install <包名>（安裝）
bower uninstall <包名>（卸載）
bower info <包名>（獲取包名的所有版本號(hào)）  

$ bower install vue#1.0.28
//下載1.0.28版本的vue

vue動(dòng)畫

<style>
        #div1{
            width:100px;
            height:100px;
            background: red;
        }
        .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>

點(diǎn)擊按鈕，紅色方塊向右移動(dòng)200px并逐漸透明化
再點(diǎn)擊按鈕，則在一開始的位置出現(xiàn)
vue動(dòng)畫的實(shí)現(xiàn)原理是：CSS3的transition、transform
在標(biāo)簽上增加transition="fade"屬性
.fade-transition樣式里寫入transition屬性
.fade-enter樣式里寫入出現(xiàn)動(dòng)畫
.fade-leave樣式里寫入消失動(dòng)畫

animate.css官網(wǎng)
bower install animate.css

里面封裝了許多動(dòng)畫樣式

<link rel="stylesheet" href="bower_components/animate.css/animate.css">

引入animate.css文件

<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>

標(biāo)簽寫入class="animated" transition="動(dòng)畫名稱"屬性

transitions:{ //定義所有動(dòng)畫名稱
    bounce:{
        enterClass:'zoomInLeft',
        leaveClass:'zoomOutRight'
    }
}

設(shè)置動(dòng)畫名稱bounce的進(jìn)入動(dòng)畫enterClass和離開動(dòng)畫leaveClass

vue自定義組件

全局組件

HTML

    <div id="box">
        <aaa></aaa>
    </div>

javascript

        var Aaa=Vue.extend({
            template:'<h3>我是標(biāo)題3</h3>'
        });
        Vue.component('aaa',Aaa);
        var vm=new Vue({
            el:'#box'
        });
等同

javascript

        Vue.component('aaa',{
            template:'<h3>我是標(biāo)題3</h3>'
        });

效果


image.png

全局組件可以在任意掛載目標(biāo)里使用

局部組件

HTML

<div id="box">
    <aaa></aaa>
</div>

javascript

var Aaa=Vue.extend({//組件對(duì)象
            template:'<h3>{{msg}}</h3>',
            data(){
                return {msg:'我是標(biāo)題3'}
            }
        });
        var vm=new Vue({
            el:'#box',
            components:{ //局部組件
                aaa:Aaa
            }
        });
等同

javascript

        var vm=new Vue({
            el:'#box',
            components:{//定義多個(gè)組件
                'aaa':{//組件對(duì)象
                    data(){
                        return {msg:'我是標(biāo)題3'}
                    },
                    template:'<h3>{{msg}}</h3>'
                }
            }
        });

組件是一個(gè)對(duì)象，
用ES6語法聲明的data函數(shù)返回?cái)?shù)據(jù)對(duì)象的屬性msg，
用template屬性定義模板
效果


image.png
組件模板

HTML

    <div id="box">
        <aaa></aaa>
    </div>

x-template--自定義組件模板

    <script type="x-template" id="aaa">
        <h3>{{msg}}</h3>
        <ul>
            <li>apple</li>
            <li>banana</li>
            <li>orange</li>
        </ul>
    </script>

javascript

    <script type="text/javascript">
            var vm=new Vue({
            el:'#box',
            components:{
                'aaa':{
                    data(){
                        return {msg:'我是標(biāo)題3'}
                    },
                    template:'#aaa'
                }
            }
        });
    </script>

模板是HTML標(biāo)簽字符串
template的屬性值是選擇器，選擇器匹配的標(biāo)簽就是模板

等同

template

    <template id="aaa">
        <h3>{{msg}}</h3>
        <ul>
            <li v-for="val in arr">
                {{val}}
            </li>
        </ul>
    </template>

javascript

    <script>
        var vm=new Vue({
            el:'#box',
            components:{
                'aaa':{
                    data(){
                        return {
                            msg:'我是標(biāo)題3',
                            arr:['apple','banana','orange']
                        }
                    },
                    template:'#aaa'
                }
            }
        });
    </script>
捕獲.PNG
動(dòng)態(tài)組件

HTML

    <div id="box">
        <input type="button" @click="a='aaa'" value="aaa組件">
        <input type="button" @click="a='bbb'" value="bbb組件">
        <component :is="a"></component>
    </div>

javascript

    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    template:'<h3>我是aaa組件</h3>'
                },
                'bbb':{
                    template:'<h3>我是bbb組件</h3>'
                }
            }
        });
    </script>
image.png

點(diǎn)擊“bbb組件”按鈕之后，下面的內(nèi)容變成“我是bbb組件”
<component :is="組件名"><component>
組件名可以是變量，當(dāng)點(diǎn)擊按鈕之后，這個(gè)組件名的值會(huì)變化

父子組件

父組件傳數(shù)據(jù)給子組件

    <div id="box">
        <aaa>
        </aaa>
    </div>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    template:'<h2>我是aaa組件</h2><bbb></bbb>',
                    components:{
                        'bbb':{
                            template:'<h3>我是bbb組件</h3>'
                        }
                    }
                }
            }
        });
    </script>

components屬性對(duì)象里，屬性即是組件名
組件名屬性對(duì)象里，template屬性對(duì)象放入模板，
components屬性則是子組件集合對(duì)象，里面放入子組件名屬性，
依次類推，可以多層嵌套

父組件data屬性函數(shù)的數(shù)據(jù)對(duì)象，傳遞給子組件的模板
    components:{
        'aaa':{
            data(){
                return {
                    msg:'我是父組件的數(shù)據(jù)'
                }
            },
            template:'<h2>我是aaa組件</h2><bbb></bbb>',
            components:{
                'bbb':{
                    template:'<h3>我是bbb組件->{{msg}}</h3>'
                }
            }
        }
    }

data屬性返回的是一個(gè)對(duì)象，對(duì)象里面的屬性即是數(shù)據(jù)，可以在它自身模板，或子組件的模板里使用，這樣就完成父組件對(duì)子組件的數(shù)據(jù)傳遞

父組件的data屬性函數(shù)的數(shù)據(jù)對(duì)象，傳遞給子組件自定義的屬性
    <div id="box">
        <aaa>
        </aaa>
    </div>
    <template id="aaa">
        <h1>11111</h1>
        <bbb :mmm="msg2"></bbb>
    </template>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    data(){
                        return {
                            msg2:'我是父組件的數(shù)據(jù)'
                        }
                    },
                    template:'#aaa',
                    components:{
                        'bbb':{
                            props:['mmm'],
                            template:'<h3>我是bbb組件->{{mmm}}</h3>'
                        }
                    }
                }
            }
        });
    </script>

數(shù)據(jù)在在父組件上，
傳遞給父組件的模板，
子組件自定義了屬性mmm，
數(shù)據(jù)傳給子組件名的mmm屬性,
子組件模板直接從mmm屬性獲取給傳遞的數(shù)據(jù)

自定義屬性props是數(shù)組
    <bbb :mmm="msg2" :my-msg="msg"></bbb>

    data(){
        return {
            msg:111,
            msg2:'我是父組件的數(shù)據(jù)'
        }
    },

    bbb':{
        props:['mmm','myMsg'],
        template:'<h3>我是bbb組件->{{mmm}} <br> {{myMsg}}</h3>'
    }
自定義屬性props是對(duì)象，規(guī)定接受的數(shù)據(jù)類型
    components:{
        'bbb':{
            props:{
                'mmm':String,
                'myMsg':Number
            },
            template:'<h3>我是bbb組件->{{mmm}} <br> {{myMsg}}</h3>'
        }
    }

子組件傳數(shù)據(jù)給父組件

$emit
    <div id="box">
        <aaa>
        </aaa>
    </div>
    <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
                        }
                    },
                    template:'#aaa',
                    methods:{
                        get(msg){
                            this.msg=msg;
                        }
                    },
                    components:{
                        'bbb':{
                            data(){
                                return {
                                    a:'我是子組件的數(shù)據(jù)'
                                }
                            },
                            template:'#bbb',
                            methods:{
                                send(){
                                    this.$emit('child-msg',this.a);
                                }
                            }
                        }
                    }
                }
            }
        });

    </script>

點(diǎn)擊子組件按鈕，觸發(fā)send方法函數(shù)，
this.$emit子組件發(fā)送數(shù)據(jù)this.a給自定義事件child-msg，
父組件觸發(fā)自定義事件child-msg接收數(shù)據(jù)，調(diào)用get方法函數(shù)，
get方法函數(shù)接收數(shù)據(jù)，改變父組件的數(shù)據(jù)msg

image.png
image.png

slot—組件中的標(biāo)簽

插入標(biāo)簽組件化
    <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>

一對(duì)slot標(biāo)簽，表示插入組件的HTML標(biāo)簽，
如果組件里沒有插入的HTML標(biāo)簽，即slot標(biāo)簽無效時(shí)，則slot標(biāo)簽里的數(shù)據(jù)才會(huì)顯示

image.png

插入標(biāo)簽組件化的分類
    <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>

slot標(biāo)簽的name屬性，將出入的HTML標(biāo)簽的頂部標(biāo)簽分類，
標(biāo)頂部簽的slot屬性與之對(duì)應(yīng)，
插入標(biāo)簽實(shí)際渲染的位置與模板里slot標(biāo)簽的位置有關(guān)，與組件里的位置無關(guān)

image.png

路由

嵌入路由插件vue-router

<script src="bower_components/vue-router/dist/vue-router.js"></script>

單層組件路由

基本的路由實(shí)例
    <div id="box">
        <ul>
            <li>
                <a v-link="{path:'/home'}">主頁</a>
            </li>
            <li>
                <a v-link="{path:'/news'}">新聞</a>
            </li>
        </ul>
        //相當(dāng)于兩個(gè)鏈接
        <div>
            <router-view></router-view>
        </div>  
        //鏈接拿到的數(shù)據(jù)插入到HTML文檔中的位置
    </div>
    <script>
        //1. 準(zhǔn)備一個(gè)根組件，包含鏈接和鏈接數(shù)據(jù)存放的位置
        var App=Vue.extend();
        //2. Home News組件都準(zhǔn)備，鏈接數(shù)據(jù)
        var Home=Vue.extend({
            template:'<h3>我是主頁</h3>'
        });
        var News=Vue.extend({
            template:'<h3>我是新聞</h3>'
        });
        //3. 準(zhǔn)備路由，路由實(shí)例
        var router=new VueRouter();
        //4. 關(guān)聯(lián)，判斷鏈接路徑，給出響應(yīng)的數(shù)據(jù)，
        //參數(shù)是一個(gè)鏈接路徑對(duì)象，屬性是鏈接的路徑，對(duì)應(yīng)鏈接的屬性是對(duì)應(yīng)的組件屬性
        router.map({
            'home':{
                component:Home
            },
            'news':{
                component:News
            }
        });
        //5. 啟動(dòng)路由，并綁定鏈接的整個(gè)區(qū)域范圍
        router.start(App,'#box');
    </script>
image.png
默認(rèn)路徑獲取的組件數(shù)據(jù)
    //6. 跳轉(zhuǎn)
    router.redirect({
        '/':'/home'
    });

URL不輸入路徑時(shí)，默認(rèn)鏈接的組件

多層組件路由

    <style>
        //vue鏈接激活狀態(tài)的樣式
        .v-link-active{
            font-size: 20px;
            color: #f60;
        }
    </style>
    <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>
       //子路由組件數(shù)據(jù)存放區(qū)域
        <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,
                //關(guān)聯(lián)呢，子路由
                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>
image.png
新增news的子組件路由

news模板中的子鏈接，以及路由組件存放區(qū)域，
以及Detail模板

    <template id="news">
        <h3>我是新聞</h3>
        <div>
            <a v-link="{path:'/news/detail/001'}">新聞001</a>
            <a v-link="{path:'/news/detail/002'}">新聞002</a>
        </div>
        <router-view></router-view>
    </template>
    <template id="detail">
        {{$route.params | json}}
    </template>

準(zhǔn)備子組件Detail

    var Detail=Vue.extend({
        template:'#detail'
    });

父組件路由News，以及自組件路由Detail

    'news':{
        component:News,
        subRoutes:{
            //將路徑對(duì)應(yīng)位置的參數(shù)賦值給屬性id
            '/detail/:id':{
                component:Detail
            }
        }
    }
image.png
獲取激活的鏈接路徑,并匹配參數(shù)對(duì)象

    <template id="detail">
        //參數(shù)對(duì)象
        {{$route.params | json}}
        <br>
        //激活的鏈接路徑
        {{$route.path}}
        <br>
        {{$route.query | json}}
    </template>
image.png
zns登錄和strive注冊(cè)
    <template id="home">
        <h3>我是主頁</h3>
        <div>
            <a v-link="{path:'/home/login/zns'}">登錄</a>
            <a v-link="{path:'/home/reg/strive'}">注冊(cè)</a>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </template>

    'home':{
        component:Home,
        subRoutes:{
            'login/:name':{
                component:{
                    template:'<strong>我是登錄信息 {{$route.params | json}}</strong>'
                }
            },
            'reg':{
                component:{
                    template:'<strong>我是注冊(cè)信息</strong>'
                }
            }
        }
    },
image.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.安裝 可以簡(jiǎn)單地在頁面引入Vue.js作為獨(dú)立版本，Vue即被注冊(cè)為全局變量，可以在頁面使用了。 如果希望搭建...
    Awey閱讀 11,278評(píng)論 4贊 129
  • Vue 實(shí)例 屬性和方法 每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性：var data = { a:...
    云之外閱讀 2,365評(píng)論 0贊 6
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容，還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,168評(píng)論 0贊 29
  • 以下內(nèi)容是我在學(xué)習(xí)和研究Vue時(shí)，對(duì)Vue的特性、重點(diǎn)和注意事項(xiàng)的提取、精練和總結(jié)，可以做為Vue特性的字典； 1...
    科研者閱讀 14,220評(píng)論 3贊 24
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,836評(píng)論 25贊 709

友情鏈接更多精彩內(nèi)容