99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

這篇文章將為大家詳細講解關(guān)于vue 組件的介紹，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計、成都網(wǎng)站制作、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)雞西,10多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

Vue的兩大核心

1. 數(shù)據(jù)驅(qū)動 - 數(shù)據(jù)驅(qū)動界面顯示

2. 模塊化 - 復(fù)用公共模塊，組件實現(xiàn)模塊化提供基礎(chǔ)

組件基礎(chǔ)

組件渲染過程

template ---> ast（抽象語法樹） ---> render ---> VDom(虛擬DOM) ---> 真實的Dom ---> 頁面

Vue組件需要編譯，編譯過程可能發(fā)生在

• 打包過程 （使用vue文件編寫）
• 運行時（將字符串賦值template字段，掛載到一個元素上并以其 DOM 內(nèi)部的 HTML 作為模板)

對應(yīng)的兩種方式 runtime-only vs runtime-compiler

runtime-only（默認）

• 打包時只包含運行時，因此體積更少
• 將template在打包的時候，就已經(jīng)編譯為render函數(shù)，因此性能更好

runtime-compiler

• 打包時需要包含（運行時 + 編譯器），因此體積更大，大概多10Kb
• 在運行的時候才把template編譯為render函數(shù)，因此性能更差

啟用runtime-compiler

vue.config.js（若沒有手動創(chuàng)建一個）

module.exports = {
 runtimeCompiler: true //默認false
}

組件定義

1. 字符串形式定義（不推薦）

例子

const CustomButton = {
 template: "自定義按鈕"
};

這種形式在運行時才把template編譯成render函數(shù)，因此需要啟用運行時編譯（runtime-compiler）

2. 單文件組件（推薦）

創(chuàng)建.vue后綴的文件，定義如下