基于Vue單文件組件詳解

本文將詳細(xì)介紹Vue單文件組件

創(chuàng)新互聯(lián)公司是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷、企業(yè)網(wǎng)站建設(shè)，賣友情鏈接，廣告投放平臺(tái)為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計(jì)到用戶體驗(yàn)提高，創(chuàng)新互聯(lián)力求做到盡善盡美。

概述

在很多 Vue 項(xiàng)目中，使用 Vue.component 來(lái)定義全局組件，緊接著用 new Vue({ el: '#container '}) 在每個(gè)頁(yè)面內(nèi)指定一個(gè)容器元素。

這種方式在很多中小規(guī)模的項(xiàng)目中運(yùn)作的很好，在這些項(xiàng)目里 JavaScript 只被用來(lái)加強(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) 缺乏語(yǔ)法高亮，在 HTML 有多行的時(shí)候，需要用到丑陋的 \

3、不支持 CSS (No CSS support) 意味著當(dāng) HTML 和 JavaScript 組件化時(shí)，CSS 明顯被遺漏

4、沒(méi)有構(gòu)建步驟 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用預(yù)處理器，如 Pug (formerly Jade) 和 Babel

文件擴(kuò)展名為 .vue 的 single-file components(單文件組件) 為以上所有問(wèn)題提供了解決方法，并且還可以使用 Webpack 或 Browserify 等構(gòu)建工具

下面是一個(gè)文件名為 Hello.vue 的簡(jiǎn)單實(shí)例：

通過(guò)單文件組合，現(xiàn)在我們獲得：

1、完整語(yǔ)法高亮
2、CommonJS 模塊
3、組件化的 CSS

還可以使用預(yù)處理器來(lái)構(gòu)建簡(jiǎn)潔和功能更豐富的組件，比如 Pug，Babel (with ES2015 modules)，和 Stylus。

這些特定的語(yǔ)言只是例子，可以只是簡(jiǎn)單地使用 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 開(kāi)發(fā)中，已經(jīng)發(fā)現(xiàn)相比于把代碼庫(kù)分離成三個(gè)大的層次并將其相互交織起來(lái)，把它們劃分為松散耦合的組件再將其組合起來(lái)更合理一些。在一個(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” 來(lái)轉(zhuǎn)換，Vue 也提供 vue-loader 插件來(lái)執(zhí)行 .vue 單文件組件 的轉(zhuǎn)換。這個(gè) webpack-simple 模板已經(jīng)為你準(zhǔn)備好了所有的東西

無(wú)論更鐘情Webpack或是Browserify，簡(jiǎn)單的或更復(fù)雜的項(xiàng)目都可參考一些文檔模板。瀏覽github.com/vuejs-templates，找到需要的部分，然后參考 README 中的說(shuō)明，使用 vue-cli 工具生成新的項(xiàng)目

模板中使用 Webpack，一個(gè)模塊加載器加載多個(gè)模塊然后構(gòu)建成最終應(yīng)用

以上這篇基于Vue單文件組件詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站題目：基于Vue單文件組件詳解
文章源于：http://muchs.cn/article38/isjssp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、電子商務(wù)、網(wǎng)站內(nèi)鏈、網(wǎng)站營(yíng)銷、云服務(wù)器、虛擬主機(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)