傳統(tǒng)網(wǎng)頁一些不可避免的小問題:

1.網(wǎng)頁JS、CSS等資源依賴關(guān)系混亂,不方便維護(hù)

2.代碼復(fù)用率很低

使用組件將代碼進(jìn)行復(fù)用,簡化項(xiàng)目結(jié)構(gòu),提高運(yùn)行效率,便于維護(hù)

組件定義

組件即為實(shí)現(xiàn)應(yīng)用中局部功能代碼(css、html、js)和資源(mp3、mp4、字體資源)的集合
模塊化：當(dāng)應(yīng)用中的JS都是以模塊來編寫的,那這個(gè)應(yīng)用就是一個(gè)模塊化的應(yīng)用
組件化：當(dāng)應(yīng)用中的JS都是以組件來編寫的,那這個(gè)應(yīng)用就是一個(gè)組件化的應(yīng)用

傳統(tǒng)網(wǎng)頁

傳統(tǒng)網(wǎng)站如需要新建一個(gè)頁面，需要頭部、中間內(nèi)容部分、底部,每次新建頁面都得復(fù)制來一套，引用的外部樣式也是如此；如果有一處需要更改，那么所復(fù)制的每個(gè)頁面都需要更改，還有著遺漏某個(gè)隱藏極深的頁面漏改的可能。

組件

組件是獨(dú)立和可復(fù)用的代碼組織單元，組件系統(tǒng)是vue核心特性之一，它讓開發(fā)者使用小型、獨(dú)立和通常可復(fù)用的組件構(gòu)建大型應(yīng)用，使得前端開發(fā)的過程變成搭積木的過程。

傳統(tǒng)代碼

實(shí)現(xiàn)步驟

新建一個(gè)頁面并創(chuàng)建好頁面容器及對(duì)應(yīng)的Vue實(shí)例，在data中定義三個(gè)變量如下

 data: function () {
	 return {
	       header:'頁面頭部',
	       content: '頁面內(nèi)容',
	       footer:'頁面底部'
	   };
},

在頁面中通過差值語法的方式將數(shù)據(jù)渲染展示

<div class="box">{{header}}</div>
<hr />
<div class="box">{{content}}</div>
<hr />
<div class="box">{{footer}}</div>

這樣看上去也沒有什么問題，影響貌似也不大，但是如果現(xiàn)在讓你再實(shí)現(xiàn)一個(gè)頁面，保持結(jié)構(gòu)不變的同時(shí)修改數(shù)據(jù)，那是不是只能把這段代碼復(fù)制粘貼呢?這樣就違背了組件的作用，組件是把代碼進(jìn)行復(fù)用而不是復(fù)制

組件代碼

定義組件

使用Vue.extend(option)創(chuàng)建，格式與new Vue時(shí)幾乎一樣，但是這里有兩點(diǎn)要注意；
一是不需要寫el,因?yàn)閑l最終是由vm來決定的、二是data必須寫成函數(shù),這樣組件復(fù)用時(shí)互不干擾

通過template字段直接將html編寫在里面即可

const header = Vue.extend({
            template:`
                <div>
                    <span>{{header}}</span>
                </div>
            `,
            data(){
                return {
                    header:'頁面頭部'
                }
            }
        });

注冊(cè)組件

局部注冊(cè)

在new Vue中使用components選項(xiàng)即可實(shí)現(xiàn)組件局部注冊(cè)

// 創(chuàng)建vue實(shí)例
        const vm = new Vue({
            el: '#root',
            //2.組件注冊(cè)
            components:{
                headercom:header,
                contentcom:content,
                footercom:footer,
            }
        });

使用局部注冊(cè)時(shí)，如果頁面上有兩個(gè)容器對(duì)應(yīng)著兩個(gè)vm，那只有注冊(cè)過的vm才能使用這個(gè)組件，如果另外一個(gè)vm需要使用也需要再次注冊(cè)才能使用，但是這樣代碼又重復(fù)了，所以有了下面的全局注冊(cè)

全局注冊(cè)

全局注冊(cè)方法：使用Vue.component(‘’,‘’)，它有兩個(gè)參數(shù)，第一個(gè)是組件名，第二個(gè)組件的指向，也就是你定義好的組件

Vue.component('name',name);

使用組件

定義跟注冊(cè)好組件后即可在頁面進(jìn)行使用，通過編寫組件標(biāo)簽的形式即可

<headercom></headercom>
<hr />
<contentcom></contentcom>
<hr />
<footercom></footercom>

避坑

1.組件注冊(cè)時(shí)使用大小寫命名會(huì)報(bào)錯(cuò)，同時(shí)組件名稱不要使用一些html標(biāo)簽名稱
2.components注冊(cè)時(shí)單詞拼寫容易錯(cuò)誤
3.單個(gè)vm中存在多個(gè)components

總結(jié) 

到此這篇關(guān)于Vue非單文件組件使用的文章就介紹到這了,更多相關(guān)Vue非單文件組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論