基于Vue單文件組件詳解
本文將詳細(xì)介紹Vue單文件組件
概述
在很多 Vue 項(xiàng)目中，使用 Vue.component 來定義全局組件，緊接著用 new Vue({ el: '#container '}) 在每個(gè)頁面內(nèi)指定一個(gè)容器元素。
這種方式在很多中小規(guī)模的項(xiàng)目中運(yùn)作的很好，在這些項(xiàng)目里 JavaScript 只被用來加強(qiáng)特定的視圖。但當(dāng)在更復(fù)雜的項(xiàng)目中，或者前端完全由 JavaScript 驅(qū)動(dòng)的時(shí)候，下面這些缺點(diǎn)將變得非常明顯：
1、全局定義 (Global definitions) 強(qiáng)制要求每個(gè) component 中的命名不得重復(fù)
2、字符串模板 (String templates) 缺乏語法高亮，在 HTML 有多行的時(shí)候，需要用到丑陋的 \
3、不支持 CSS (No CSS support) 意味著當(dāng) HTML 和 JavaScript 組件化時(shí)，CSS 明顯被遺漏
4、沒有構(gòu)建步驟 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用預(yù)處理器，如 Pug (formerly Jade) 和 Babel
文件擴(kuò)展名為 .vue 的 single-file components(單文件組件) 為以上所有問題提供了解決方法，并且還可以使用 Webpack 或 Browserify 等構(gòu)建工具
下面是一個(gè)文件名為 Hello.vue 的簡單實(shí)例：
通過單文件組合，現(xiàn)在我們獲得：
1、完整語法高亮
2、CommonJS 模塊
3、組件化的 CSS
還可以使用預(yù)處理器來構(gòu)建簡潔和功能更豐富的組件，比如 Pug，Babel (with ES2015 modules)，和 Stylus。
這些特定的語言只是例子，可以只是簡單地使用 Babel，TypeScript，SCSS，PostCSS - 或者其他任何能夠幫助提高生產(chǎn)力的預(yù)處理器。如果搭配vue-loader使用Webpack，它也是把CSS Modules當(dāng)作第一公民對(duì)待
【關(guān)注點(diǎn)分離】
一個(gè)重要的事情值得注意，關(guān)注點(diǎn)分離不等于文件類型分離。在現(xiàn)代 UI 開發(fā)中，已經(jīng)發(fā)現(xiàn)相比于把代碼庫分離成三個(gè)大的層次并將其相互交織起來，把它們劃分為松散耦合的組件再將其組合起來更合理一些。在一個(gè)組件里，其模板、邏輯和樣式是內(nèi)部耦合的，并且把它們搭配在一起實(shí)際上使得組件更加內(nèi)聚且更可維護(hù)。
即便不喜歡單文件組件，仍然可以把 JavaScript、CSS 分離成獨(dú)立的文件然后做到熱重載和預(yù)編譯
<!-- my-component.vue --> <template> <div>This will be pre-compiled</div> </template> <script src="./my-component.js"></script> <style src="./my-component.css"></style>
起步
有了 .vue 組件，就進(jìn)入了高級(jí) JavaScript 應(yīng)用領(lǐng)域
最好參考 webpack-simple。只要遵循指示，就能很快地運(yùn)行一個(gè)用到 .vue 組件，ES2015 和 熱重載 (hot-reloading) 的 Vue 項(xiàng)目。這個(gè)模板使用 Webpack，一個(gè)能將多個(gè)模塊打包成最終應(yīng)用的模塊打包工具
在 Webpack 中，每個(gè)模塊被打包到 bundle 之前都由一個(gè)相應(yīng)的 “l(fā)oader” 來轉(zhuǎn)換，Vue 也提供 vue-loader 插件來執(zhí)行 .vue 單文件組件 的轉(zhuǎn)換。這個(gè) webpack-simple 模板已經(jīng)為你準(zhǔn)備好了所有的東西
無論更鐘情Webpack或是Browserify，簡單的或更復(fù)雜的項(xiàng)目都可參考一些文檔模板。瀏覽github.com/vuejs-templates，找到需要的部分，然后參考 README 中的說明，使用 vue-cli 工具生成新的項(xiàng)目
模板中使用 Webpack，一個(gè)模塊加載器加載多個(gè)模塊然后構(gòu)建成最終應(yīng)用
以上這篇基于Vue單文件組件詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3點(diǎn)擊不同的菜單頁切換局部頁面實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue3點(diǎn)擊不同的菜單頁切換局部頁面實(shí)現(xiàn)的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考價(jià)值,需要的朋友可以參考下2023-08-08
這篇文章主要為大家介紹了Vue父子組件元素獲取方法互相調(diào)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-09-09
vue中利用three.js實(shí)現(xiàn)全景圖的完整示例
這篇文章主要給大家介紹了關(guān)于vue中利用three.js實(shí)現(xiàn)全景圖的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了使用vue實(shí)現(xiàn)自定義多選與單選的答題功能,vue組件中在表單方面提供了一個(gè)v-model指令，非常好用，具體實(shí)現(xiàn)過程大家跟隨腳本之家小編一起看看吧2018-07-07
公司內(nèi)部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是沒有認(rèn)真的來總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于如何在vue項(xiàng)目中使用rem布局的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue3+el-table封裝示例詳解(編輯、刪除、查看詳情按鈕一起封裝)
在Vue3中,利用Element?Plus?UI庫封裝表格組件,實(shí)現(xiàn)編輯、刪除和查看詳情的功能,通過定義tableData和tableDataHeader來管理表格數(shù)據(jù)和表頭,其中tableData通常從后端獲取,而tableHeader可根據(jù)具體需求自定義,感興趣的朋友跟隨小編一起看看吧2024-09-09
vue定時(shí)器清除不掉,導(dǎo)致功能頻繁執(zhí)行問題
這篇文章主要介紹了vue定時(shí)器清除不掉,導(dǎo)致功能頻繁執(zhí)行問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家詳細(xì)介紹了Vue.use源碼，Vue.use方法的引入，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
頁面跳轉(zhuǎn)有很多方法,本次使用的是?vue-router,但卻在使用?router.push?的時(shí)候遇到了點(diǎn)麻煩,所以記錄下來,希望可以幫助有需要的人2023-09-09
詳解webpack打包vue項(xiàng)目之后生成的dist文件該怎么啟動(dòng)運(yùn)行
這篇文章主要介紹了詳解webpack打包vue項(xiàng)目之后生成的dist文件該怎么啟動(dòng)運(yùn)行,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09