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

本文轉載自查看原文 2016-05-25 14:37 1423 Vue.js/ Javascript

什么是組件？

組件（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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue.js-----輕量高效的MVVM框架（十二、組件動態切換） Vue.js-----輕量高效的MVVM框架（十一、使用slot分發內容） Vue.js-----輕量高效的MVVM框架（一、初識Vue.js） Vue.js-----輕量高效的MVVM框架（六、Class與Style綁定） H5開發推薦使用Q.js，輕量的前端單頁路由框架 39行代碼實現JS HTML模板（輕量+高效+易用） Vue常用的UI組件-vant（輕量、可靠的移動端Vue組件庫）(推薦) vue-calendar 基於 vue 2.0 開發的輕量，高性能日歷組件 golang 實現輕量web框架 OWIN輕量型框架介紹