最近開始使用了vue構(gòu)建一個新項目，對于vue的核心優(yōu)勢--組件的構(gòu)造，很多人剛開始的時候，都是懵逼的，在網(wǎng)上以及官網(wǎng)，他們都是已經(jīng)構(gòu)造好的組件，并沒有從頭到尾的詳細介紹一個組件是如何封裝的，這給小白們造成很大的不方便的地方，本文就是將一個vue的組件從頭到尾給構(gòu)建出來的教程

創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設計制作、成都網(wǎng)站設計與策劃設計,珠暉網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設十多年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:珠暉等地區(qū)。珠暉做網(wǎng)站價格咨詢:18982081108

1. vue組件的優(yōu)勢

2. vue組件的構(gòu)建

3. vue組件的注意事項

一、vue組件的優(yōu)勢

1、我們在寫一個頁面的時候，時長會碰到一種樣式，或者一塊菜單欄之類的，它們在很多的頁面都是一模一樣的，如果我們每一個頁面都寫一遍的話，會造成巨大的浪費時間和精力，如果我們?nèi)繌椭起べN過去的話，后期的修改又會十分的痛苦，有沒有辦法能讓我們將這一塊通用的樣式/菜單給封裝起來，等到我們使用的時候，直接引入進來，就能正常的使用了，并且我們在維護的時候，只需要修改一個文件，就能完成整體的修改。組件這個概念就應運而生了

組件具有的優(yōu)勢是：

① 提高開發(fā)效率

② 方便重復使用

③ 簡化調(diào)試步驟

④ 提升整個項目的可維護性

⑤ 便于協(xié)同開發(fā)

⑥vue 中的組件是一個自定義標簽形式，Vue.js的編譯器為它添加特殊功能；vue也可以擴展原生的html元素，封裝可重用的代碼。

二、vue組件的構(gòu)建：這里以創(chuàng)建hearMenu為例

1、創(chuàng)建文件夾hearMenu，文件夾里面創(chuàng)建文件：hearMenu.vue（主要的組件代碼）以及hearMenu.css（組件的樣式）

下面是vue的主要內(nèi)容：

2、組件文件的引用

在對應的頁面/組件，引入需要的組件，引入了之后，需要在當前頁面注冊

在當前頁面注冊成功之后，在引用的時候，需要留意這里是駝峰的寫法，寫在html的時候需要將它們拆分開來 ，不然會報錯的。

比如hearMenu→hear-menu

這樣就引入了你自己定義的組件了

三、vue組件的注意事項

1、js 中所有駝峰式命名屬性在 HTML 中均須寫成小寫字母短橫分隔的形式

2、全局注冊的優(yōu)點在于所有的Vue實例都可以用，缺點在于權限太大，容錯率降低（類似于JavaScript中的全局變量和局部變量）

3、有多個單詞時，推薦使用kebab-case (短橫線分隔命名) ，字母全小寫且必須包含一個連字符。

睿江云官網(wǎng)鏈接：https://www.eflycloud.com/home?from=RJ0027

網(wǎng)頁名稱：vue之組件在腳手架構(gòu)造篇
路徑分享：http://www.chinadenli.net/article14/iigsge.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、關鍵詞優(yōu)化、軟件開發(fā)、域名注冊、App設計、面包屑導航

廣告

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