vue檔案解析

2022-09-09 17:48:20 字數 1443 閱讀 5424

vue是現今非常流行的框架之一,整體給人的感覺就是優雅,小巧,從老師給的專案**中快速學習。在看了一遍專案檔案結構後,對於.vue結尾的單檔案卻是有很多不解的地方,具體碰到的問題如下:

template是html5的乙個新元素,主要用於儲存客戶端中的內容,表現為瀏覽器解析該內容但不渲染出來,

可以將乙個模板視為正在被儲存以供隨後在文件中使用的乙個內容片段。

vue的單檔案相當於乙個頁面中的元件,包含了關於該元件的html-css-js檔案集合,這麼做的目的有利於專案的管理和整合,官方說法是有構建步驟

標籤下只能有乙個子節點元素,如果寫多個如這樣的標籤則會報錯,如下所示

//run --> throw error

-component template should contain exactly one root element. if you are using v-if on multiple elements, use v-else-if to chain them instead.

.vue檔案中,dom結構可以寫在標籤下,對dom結構的樣式檔案則作為標籤的兄弟元素存在,同樣的控制該dom結構的指令碼程式寫在另乙個兄弟元素之中,這樣一來,每個元件自己對應的結構樣式都在同乙個檔案之中,便不會與其它的元件搞混了。

4、style標籤有哪些屬性?分別是什麼意思?

標籤包含scopedmodule屬性,分別表示css作用域css模組,一般會寫上scoped屬性,表示樣式僅對當前元件以及其子元件的模板部分生效

標籤下第一行**是export default,這是es6新增的模組部分的語法,採用模組的方式,每個檔案都自成乙個模組,採用exportimport來暴露和引用介面。乙個檔案或模組中,export 和 import可以有多個,但export default只能有乙個,使用該命令之後別的模組引用時就可以不需要知道所要載入的模組變數名

可以寫很多東西,包括變數和方法,物件等,只要是想作為開放的介面都可以寫,在.vue檔案中一般寫上data() {}以及method等,data指的是在該元件中定義的模板資料,而如果你對中的元素繫結了點選方法,如

詳解 vue檔案解析的實現

vue單檔案 vue是現今非常流行的框架之一,整體給人的感覺就是優雅,小巧,最近開始學習著使用該框架做一些專案,學習,當然是從程式設計客棧實踐開始,在瀏覽了一遍官方文件之後,便開始用vue cli腳手架來快速搭建乙個vue專案,從實踐中快速學習。在看了一遍專案檔案結構後,對於.vue結尾的單檔案卻是...

webpack對vue單檔案元件的解析

vue2.0 step0 首先vuelloaderplugin會在webpack初始化的時候 注入pitcher這個rule,然後將rules進行排序,pitcher,clonedrule,vuerule pitcher對應的pitch loader會對query欄位中有vue欄位的進行處理 ste...

vue專案目錄解析

1.build資料夾 打包配置的資料夾 1.1 webpack.base.conf.js 打包的核心配置 1.2 build.js 構建生產版本,專案開發完成之後,通過build.js打包 載入base與prod,讀取完之後通過webjpack命令對專案進行打包 1.3 webpack.prod.c...