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>