Vue 組件

Vue的核心思想

A.數據化驅動

B.組件化驅動：最強大的核心功能之一

1.定義組件（component）

①全局定義

　　a) 擴展組件
var component=Vue.extend({
　　template:'<div></div>'
　});
 註冊組件
Vue.component('div-app',component);
掛載到實例上面去
new Vue({
el:'#app'
})

b)
　　Vue.component('div-app', {
　　template:`  //:模板屬性，用來放置你須要封裝的html代碼
　　<div class="alert alert-secondary" role="alert">
　　　　This is a secondary alert—check it out!
　　</div>
});

例：

<div id="app1">
    <div-app></div-app>
</div>

<script src="vue/vue.min.js"></script>//引用VUE庫

<script>
    /*全局*/
    var component=Vue.extend({
        template:'<div>這是一個全局</div>',
    });
    Vue.component('div-app',component);

    new Vue({
        el:'#app1'
    });
</script>

②局部定義
a)
　　new Vue({

　　　　el: '#app1',
　　　　components: {
　　　　　　'div-app': {
　　　　　　template: `<div >xxxxx</div>`,
　　　　　　}
　　　　}
　　});
b)
　　var div = {
　　template: `<div>xxxxx</div>`,
};
　　new Vue({
　　　　el: '#app1',
　　　　components: {
'　　　　　　div-app': div
　　　　　　}
　　　　});
c):經過template標籤

例： 

 /*局部 兄弟*/

<div id="app">
 <div-aoo></div-aoo>
 <div-abb></div-abb>
</div>
<template id="app1">
 <div>{{msg1}}</div>
</template>
<template id="app2">
 <div>{{msg2}}</div>
</template>

<script src="vue/vue.min.js"></script>

<script>
    /*局部 兄弟*/
    new Vue({
        el:'#app',
        components:{
            'div-aoo':{
                template:'#app1',
                data:function(){
                    return{
                        msg1:'這是一個局部',
                    }
                }
            },
            'div-abb':{
                template:'#app2 ',
                data:function(){
                    return{
                        msg2:'這是局部的兄弟'
                    }
                }
            }
        }
    })
</script>
ps:
1 組件裏面的data必須經過函數來定義，而且經過return返回數據源
2 在template裏面若是是幾個平行的元素，那麼須要一個空元素將他們包起來

例：
 

  /*局部 父子*/

<div id="app">
    <div-app></div-app>
</div>
<template id="app1">
    <div>
        {{msg}}
        <h1-app></h1-app>
    </div>
</template>
<template id="h1">
    <div>
        <div>
            <h1 class="display-3">{{msg2}}</h1>
        </div>
    </div>
</template>

<script src="vue/vue.min.js"></script>

<script>
    /*局部 父子*/
    new Vue({
        el: '#app',
        components: {//父組件
            'div-app': {
                template: '#app1',
                data: function () {
                    return {
                        msg1: '這是局部的勞資',
                    }
                },
                components: {//子組件
                    'h1-app': {
                        template: '#h1',
                        data: function () {
                            return {
                                msg2: '這是局部的兒砸'
                            }
                        }
                    }
                }
            }
        }
    });
</script>