這篇文章主要為大家展示了“vue組件的寫法有哪些”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue組件的寫法有哪些”這篇文章吧。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),沈河企業(yè)網(wǎng)站建設(shè),沈河品牌網(wǎng)站建設(shè),網(wǎng)站定制,沈河網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,沈河網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

數(shù)據(jù)驅(qū)動(dòng)和組件化是vue.js兩個(gè)最重要的特點(diǎn)。組件化是為了方便代碼復(fù)用，提高開(kāi)發(fā)效率。常見(jiàn)的vue組件寫法有四種，各有特色，適用于不同的場(chǎng)景。

1、全局組件

結(jié)構(gòu)：

// 組件的注冊(cè) 
Vue.component( 'componentName', { 
 template: // 組件的html結(jié)構(gòu), 
 data(){ 
 return{ 
  // 組件中的屬性 
 } 
 }, 
 method: { 
 // 組件中的方法 
 } 
 ...... // 組件其他的屬性和方法 
}) 
// 組件的使用 
new Vue({ 
 el: '#app' 
})

在script標(biāo)簽內(nèi)通過(guò)Vue.component()定義一個(gè)全局組件，并通過(guò)new Vue()實(shí)例將組件應(yīng)用到html文件中id為app的標(biāo)簽內(nèi)。

特點(diǎn)：

<1>可以直接在html文件中的script標(biāo)簽內(nèi)直接定義與使用；

<2>通過(guò)該方法定義的組件是全局組件，在任何Vue實(shí)例下都可以使用，適合項(xiàng)目比較簡(jiǎn)單的場(chǎng)景；

<3>每次定義組件時(shí)都要重新使用Vue.component()，且組件名不能相同；

實(shí)例：

Welcome組件

2、局部組件

結(jié)構(gòu)：

// 構(gòu)造組件對(duì)象 
const componentName = { 
 template: // 組件的html結(jié)構(gòu), 
 data(){ 
 return{ 
  // 組件中的屬性 
 } 
 }, 
 method: { 
 // 組件中的方法 
 } 
 ...... // 組件其他的屬性和方法 
} 
// 組件的使用 
new Vue({ 
 el: '#app', 
 components: { 
 // 組件注冊(cè)、調(diào)用 
 componentName 
 } 
})

在script標(biāo)簽中通過(guò)定義一個(gè)組件對(duì)象，并通過(guò)Vue實(shí)例中components屬性將該組件注冊(cè)調(diào)用。

特點(diǎn)：

<1>與全局方式定義的組件相似，都可以直接在html文件中的script標(biāo)簽中直接書寫組件與使用；

<2>只有在注冊(cè)過(guò)的Vue實(shí)例中才能使用該組件；

實(shí)例：

Welcome組件

3、使用template標(biāo)簽

結(jié)構(gòu)：

<template id="componnet"> 
 // 組件的html結(jié)構(gòu) 
</template> 
// 全局組件的注冊(cè)與使用 
Vue.component( 'componentName', { 
 template: '#component', 
 data(){ 
 return{ 
  // 組件中的屬性 
 } 
 }, 
 method: { 
 // 組件中的方法 
 } 
 ...... // 組件其他的屬性和方法 
}) 
new Vue({ 
 el: '#app' 
}) 
// 局部組件的注冊(cè)與使用 
const componentName = { 
 template: '#component', 
 data(){ 
 return{ 
  // 組件中的屬性 
 } 
 }, 
 method: { 
 // 組件中的方法 
 } 
 ...... // 組件其他的屬性和方法 
} 
new Vue({ 
 el: '#app', 
 components: { 
 // 組件注冊(cè)、調(diào)用 
 componentName 
 } 
})

使用template標(biāo)簽將組件中的html結(jié)構(gòu)寫在body標(biāo)簽內(nèi)部，在script標(biāo)簽內(nèi)按照全局組件和局部組件的方式注冊(cè)與使用。不同之處在于組件中template屬性是通過(guò)id引用。

特點(diǎn)：

<1>js文件中不包含html結(jié)構(gòu)內(nèi)容，實(shí)現(xiàn)結(jié)構(gòu)與邏輯分離；

實(shí)例：

Welcome組件

4、單文件組件

結(jié)構(gòu)：

<template lang="html"> 
 // 組件中的html結(jié)構(gòu) 
</template> 
<script> 
 //組件的邏輯 
 export default { 
 // 組件的屬性和方法 
 } 
</script> 
<style lang="css" scoped> 
 // 組件的樣式 
</style>

創(chuàng)建一個(gè)尾綴為vue的文件，文件名即為組件名。組件內(nèi)包含三部分內(nèi)容：html結(jié)構(gòu)、js邏輯、css樣式，分別對(duì)應(yīng)于不同的標(biāo)簽。使用時(shí)組件時(shí)，通過(guò)import引入即可使用。

特點(diǎn)：

<1>組件與組件之間互不影響，復(fù)用性高，其html、css、js均可復(fù)用；

<2>組件的結(jié)構(gòu)、邏輯清晰；

<3>適用于大型復(fù)雜項(xiàng)目，適合多人開(kāi)發(fā)；

實(shí)例：

Welcome組件

?。。⌒枰⒁獾氖牵簍emplate標(biāo)簽內(nèi)必須用一個(gè)標(biāo)簽將所有的標(biāo)簽包裹，否則會(huì)報(bào)錯(cuò)

正確的寫法：

<template> 
 <div> 
 <div></div> 
 ...... 
 <div></div> 
 </div> 
</template>

錯(cuò)誤的寫法：

<template> 
 <div></div> 
 <div></div> 
 ...... 
 <div></div> 
</template>

以上是“vue組件的寫法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：vue組件的寫法有哪些
瀏覽地址：http://aaarwkj.com/article14/jjphde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站策劃、云服務(wù)器、定制開(kāi)發(fā)、品牌網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)