Vue.js-----轻量高效的MVVM框架（八、使用组件）

什么是组件？

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

#1、全局注册

html： <global-component></global-component>是自定义的全局组件

<h3>#注册</h3>
<div id="dr0101">
    <span>1、下面的是一个全局的构造器</span>
    <global-component></global-component>
</div>
<br />
<div id="dr0102">
    <span>2、下面的是一个全局的构造器</span>
    <global-component></global-component>
</div>                                       

 js：创建组件构造器、注册组件、在vm中使用

//***************************************************************************
//全局注册
//1、创建一个组件构造器
var GlobalComponent = Vue.extend({
    template: "<div>hello, this is a global component</div>"
});
//2、如果要全局使用，则使用Vue注册组件
Vue.component("global-component", GlobalComponent);
//3、使用
var dr0101 = new Vue({
    el: "#dr0101"
});
var dr0102 = new Vue({
    el: "#dr0102",
});

页面显示

 　　

#2、局部注册

html：<local-component></local-component>是自定义的局部组件。

<h3>#局部注册</h3>
<div id="dr0201">
    <span>3、下面的是一个局部的构造器（在dr0201中，使用了&lt;local-component&gt;，因为没有全局的&lt;local-component&gt;或者局部的注册&lt;local-component&gt;，所以这里不显示下面的组件，并且在控制台有警告）</span>
    <local-component></local-component>
</div>
<br />
<div id="dr0202">
    <span>4、下面的是一个局部的构造器</span>
    <local-component></local-component>
</div>

js：创建组件、要局部使用则在vm实例中的data属性components中添加"local-component": LocalComponent，其中"local-component"是在页面中要显示的组件的名称，LocalComponent是定义的组件的名称。

//局部注册
//1、创建一个组件构造器
var LocalComponent = Vue.extend({
    template: "<div>hello, this is a local component</div>"
});
//2、这里不添加局部组件，进行测试
var dr0201 = new Vue({
    el: "#dr0201",
});
//3、如果要在某一个Vue组件中使用，则把创建的组件构造器添加到components中
var dr0202 = new Vue({
    el: "#dr0202",
    components: {
        "local-component": LocalComponent,
    }
});

页面：

　　

#3、注册语法糖

html：

<h3>#注册语法糖</h3>
<div id="dr0301">
    <span>dr0301使用语法糖注册的全局组件</span>
    <globalcomponent01></globalcomponent01>
</div>
<br />
<div id="dr0302">
    <span>dr0302使用语法糖注册的全局组件</span>
    <globalcomponent01></globalcomponent01>
</div>
<br />
<div id="dr0401">
    <span>dr0401使用没有用语法糖注册的局部组件</span>
    <localcomponent01></localcomponent01>
</div>
<br />
<div id="dr0402">
    <span>dr0402使用用语法糖注册的局部组件</span>
    <localcomponent01></localcomponent01>
</div>

js：利用vue的语法糖注册全局组件和局部组件

//注册语法糖
//1.1 在一个步骤中扩展与注册一个全局
Vue.component("globalcomponent01", {
    template: "<div>this is globalcomponent01</div>",
});
//1.2 在dr0301中使用注册的全局组件globalcomponent01
var dr0301 = new Vue({
    el: "#dr0301",
});
//1.3 在dr0302中使用注册的全局组件globalcomponent01
var dr0302 = new Vue({
    el: "#dr0302",
});
//2.1  在dr0401中直接使用没有注册过的localcomponent01
var dr0401 = new Vue({
    el: "#dr0401",
});
//2.2 在dr0402中直接使用注册的localcomponent01
var dr0402 = new Vue({
    el: "#dr0402",
    components: {
        "localcomponent01": {
            template: "<div>this is localcomponent01</div>",
        },
    }
});

页面显示：

　　

#4、组件选项问题

html：

<h3>#组件选项问题</h3>
<div id="dr0501">
    <data-component></data-component>
</div>
<div id="dr0502">
    <data-component></data-component>
</div>

js：

//组件选项问题
var lover = {
    name: "zhangyao",
    age: "25",
};
//DataComponent的data和el选项必须是有返回值的函数，并且template中如果要引入数据的话，只能引入这里定义的data
var DataComponent = Vue.extend({
    data: function() {
        return lover;
    },
    template: "<div>name: {{name}}, age: {{age}}</div>"
});
//在dr0501和dr0502的实例中都注册DataComponent组件
var dr0501 = new Vue({
    el: "#dr0501",
    components: {
        "data-component": DataComponent,
    }
});
var dr0502 = new Vue({
    el: "#dr0502",
    components: {
        "data-component": DataComponent,
    }
});

页面：

　　

#5、模板解析

html：

<h3>#模板解析</h3>
<div>
    <span>Vue的模板是Dom模板，所以它必须是有效的html片段，对放在html模板中的元素有限制：</span>
    <ul>
        <li>a标签不能包含其他的交互元素（按钮和链接）</li>
        <li>ul和ol只能直接包含li</li>
        <li>select只能包含option和optgroup</li>
        <li>table只能包含thead、tbody、tr、caption、col、colgroup</li>
        <li>tr只能直接包含th、td</li>
    </ul>
    <span>另外，自定义个组件不是有效的模板，即便my-select组件最终展开为select下拉菜单片段，也会解析失败</span>
</div>
<div id="dr06">
    <h4>遍历vue实例中的data</h4>
    <div v-for="item in items">
        <div>index: {{$index}}, name: {{item.name}}, desc: {{item.desc}}

        </div>
    </div>
    <h4>遍历vue组件中的data</h4>
    <div>
        <temp-component></temp-component>
    </div>
</div>

 js:

//模板解析
//这里的data数据只能供模板使用
var TempComponent = Vue.extend({
    data: function() {
        return {
            tempItems: [{
                name: "tempNameA",
                desc: "tempDescA"
            }, {
                name: "tempNameB",
                desc: "tempDescB"
            }, {
                name: "tempNameC",
                desc: "tempDescC"
            }, ]
        }
    },
    //在模板中定义的有item遍历，其中tempItems的数据只能来源于TempComponent中的data数据
    template: "<div v-for='tempItem in tempItems'>index: {{$index}}, name: {{tempItem.name}}, desc: {{tempItem.desc}}<div>"
});
//这里的data数据不能使用在模板中
var dr06 = new Vue({
    el: "#dr06",
    data: {
        items: [{
            name: "name01",
            desc: "desc01"
        }, {
            name: "name02",
            desc: "desc02"
        }, {
            name: "name03",
            desc: "desc03"
        }]
    },
    components: {
        "temp-component": TempComponent,
    }
});

页面显示：

　　

附：下面附上完整的html代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/vue.js"></script>
        <title>Vue组件</title>
    </head>

    <body style="background-color: lightgray;">
        <h3>#注册</h3>
        <div id="dr0101">
            <span>1、下面的是一个全局的构造器</span>
            <global-component></global-component>
        </div>
        <br />
        <div id="dr0102">
            <span>2、下面的是一个全局的构造器</span>
            <global-component></global-component>
        </div>

        <hr />

        <h3>#局部注册</h3>
        <div id="dr0201">
            <span>3、下面的是一个局部的构造器（在dr0201中，使用了&lt;local-component&gt;，因为没有全局的&lt;local-component&gt;或者局部的注册&lt;local-component&gt;，所以这里不显示下面的组件，并且在控制台有警告）</span>
            <local-component></local-component>
        </div>
        <br />
        <div id="dr0202">
            <span>4、下面的是一个局部的构造器</span>
            <local-component></local-component>
        </div>

        <hr />

        <h3>#注册语法糖</h3>
        <div id="dr0301">
            <span>dr0301使用语法糖注册的全局组件</span>
            <globalcomponent01></globalcomponent01>
        </div>
        <br />
        <div id="dr0302">
            <span>dr0302使用语法糖注册的全局组件</span>
            <globalcomponent01></globalcomponent01>
        </div>
        <br />
        <div id="dr0401">
            <span>dr0401使用没有用语法糖注册的局部组件</span>
            <localcomponent01></localcomponent01>
        </div>
        <br />
        <div id="dr0402">
            <span>dr0402使用用语法糖注册的局部组件</span>
            <localcomponent01></localcomponent01>
        </div>

        <hr />

        <h3>#组件选项问题</h3>
        <div id="dr0501">
            <data-component></data-component>
        </div>
        <div id="dr0502">
            <data-component></data-component>
        </div>

        <hr />

        <h3>#模板解析</h3>
        <div>
            <span>Vue的模板是Dom模板，所以它必须是有效的html片段，对放在html模板中的元素有限制：</span>
            <ul>
                <li>a标签不能包含其他的交互元素（按钮和链接）</li>
                <li>ul和ol只能直接包含li</li>
                <li>select只能包含option和optgroup</li>
                <li>table只能包含thead、tbody、tr、caption、col、colgroup</li>
                <li>tr只能直接包含th、td</li>
            </ul>
            <span>另外，自定义个组件不是有效的模板，即便my-select组件最终展开为select下拉菜单片段</span>
        </div>
        <div id="dr06">
            <h4>遍历vue实例中的data</h4>
            <div v-for="item in items">
                <div>index: {{$index}}, name: {{item.name}}, desc: {{item.desc}}

                </div>
            </div>
            <h4>遍历vue组件中的data</h4>
            <div>
                <temp-component></temp-component>
            </div>
        </div>

        <script>
            //***************************************************************************
            //全局注册
            //1、创建一个组件构造器
            var GlobalComponent = Vue.extend({
                template: "<div>hello, this is a global component</div>"
            });
            //2、如果要全局使用，则使用Vue注册组件
            Vue.component("global-component", GlobalComponent);
            //3、使用
            var dr0101 = new Vue({
                el: "#dr0101"
            });
            var dr0102 = new Vue({
                el: "#dr0102",
            });
            //***************************************************************************
            //局部注册
            //1、创建一个组件构造器
            var LocalComponent = Vue.extend({
                template: "<div>hello, this is a local component</div>"
            });
            //2、这里不添加局部组件，进行测试
            var dr0201 = new Vue({
                el: "#dr0201",
            });
            //3、如果要在某一个Vue组件中使用，则把创建的组件构造器添加到components中
            var dr0202 = new Vue({
                el: "#dr0202",
                components: {
                    "local-component": LocalComponent,
                }
            });
            //***************************************************************************
            //注册语法糖
            //1.1 在一个步骤中扩展与注册一个全局
            Vue.component("globalcomponent01", {
                template: "<div>this is globalcomponent01</div>",
            });
            //1.2 在dr0301中使用注册的全局组件globalcomponent01
            var dr0301 = new Vue({
                el: "#dr0301",
            });
            //1.3 在dr0302中使用注册的全局组件globalcomponent01
            var dr0302 = new Vue({
                el: "#dr0302",
            });
            //2.1  在dr0401中直接使用没有注册过的localcomponent01
            var dr0401 = new Vue({
                el: "#dr0401",
            });
            //2.2 在dr0402中直接使用注册的localcomponent01
            var dr0402 = new Vue({
                el: "#dr0402",
                components: {
                    "localcomponent01": {
                        template: "<div>this is localcomponent01</div>",
                    },
                }
            });
            //***************************************************************************
            //组件选项问题
            var lover = {
                name: "zhangyao",
                age: "25",
            };
            //DataComponent的data和el选项必须是有返回值的函数，并且template中如果要引入数据的话，只能引入这里定义的data
　　　　　　　var DataComponent = Vue.extend({
            　　 data: function() {
                    return lover;
                },
                template: "<div>name: {{name}}, age: {{age}}</div>"
            });
            //在dr0501和dr0502的实例中都注册DataComponent组件
            var dr0501 = new Vue({
                el: "#dr0501",
                components: {
                    "data-component": DataComponent,
                }
            });
            var dr0502 = new Vue({
                el: "#dr0502",
                components: {
                    "data-component": DataComponent,
                }
            });
            //***************************************************************************
            //模板解析
            //这里的data数据只能供模板使用
            var TempComponent = Vue.extend({
                data: function() {
                    return {
                        tempItems: [{
                            name: "tempNameA",
                            desc: "tempDescA"
                        }, {
                            name: "tempNameB",
                            desc: "tempDescB"
                        }, {
                            name: "tempNameC",
                            desc: "tempDescC"
                        }, ]
                    }
                },
                //在模板中定义的有item遍历，其中tempItems的数据只能来源于TempComponent中的data数据
                template: "<div v-for='tempItem in tempItems'>index: {{$index}}, name: {{tempItem.name}}, desc: {{tempItem.desc}}<div>"
            });
            //这里的data数据不能使用在模板中
            var dr06 = new Vue({
                el: "#dr06",
                data: {
                    items: [{
                        name: "name01",
                        desc: "desc01"
                    }, {
                        name: "name02",
                        desc: "desc02"
                    }, {
                        name: "name03",
                        desc: "desc03"
                    }]
                },
                components: {
                    "temp-component": TempComponent,
                }
            });
        </script>
    </body>

</html>