記得當(dāng)那天使用 CakePHP 開發(fā)的時(shí)候，我很喜歡它簡易入門的特性。其文檔不僅結(jié)構(gòu)嚴(yán)密，詳盡，而且對(duì)用戶友好。多年以后，我在 Vue.js 上找到了同樣的感覺。然而，與 Cake 相比，Vue 文檔還有一個(gè)缺點(diǎn)：（缺乏）真實(shí)的項(xiàng)目教程。

不管框架的文檔有多好，對(duì)與所有人來說都是不夠的。閱讀有關(guān)的概念并不是總能幫助你了解更多東西，也不能幫助你理解如何使用它們來實(shí)際做出某些事情。如果你和我一樣，你會(huì)在實(shí)踐過程中學(xué)到更多，在你編碼的時(shí)候參考文檔，因?yàn)槟阈枰鼈儭Ｔ诒窘坛讨?，我們將?gòu)建一個(gè)***評(píng)分系統(tǒng)組件。我們將在需要時(shí)介紹幾個(gè) Vue.js 概念，并介紹為什么要使用它們。

TL;DR: 這篇文章詳細(xì)的介紹了如何使用 vue.js 和為什么使用 vue.js 。它旨在幫助掌握 Vue.js 的一些核心概念，并教你如何為未來的項(xiàng)目做出設(shè)計(jì)決策。如果你想了解整個(gè)思維過程，請(qǐng)繼續(xù)閱讀。否則，你可以直接查看 CodeSandbox 上的最終代碼。

入門指南

Vue.js（正確地）以一個(gè)簡單的腳本引入足以開始運(yùn)行，但是當(dāng)你想使用single-file components，情況會(huì)有所不同。 現(xiàn)在，你不必這樣構(gòu)建組件。 你可以很容易地用 Vue.component 定義一個(gè)全局組件。

問題在于，這樣做需要權(quán)衡使用字符串模板，沒有 CSS 支持，也沒有構(gòu)建步驟（所以沒有預(yù)處理器）。 然而，我們想要更深入地學(xué)習(xí)如何構(gòu)建一個(gè)真正的在項(xiàng)目中使用的實(shí)際組件。出于這些原因，我們將使用由 Webpack 提供支持的實(shí)際設(shè)置。

為了保持簡單并減少配置時(shí)間，我們將使用 vue-cli 和簡單的 webpack-simple Vue.js模板。

首先，你需要全局安裝 vue-cli。啟動(dòng)你的終端并鍵入以下內(nèi)容：

你現(xiàn)在可以通過幾個(gè)按鍵生成隨時(shí)可用的 Vue.js 樣板。然后繼續(xù)輸入：

你會(huì)碰到幾個(gè)問題。 選擇除“使用sass”之外的所有默認(rèn)值，你應(yīng)該回答 yes(y)。然后，vue-cli 將初始化項(xiàng)目并創(chuàng)建 package.json 文件。完成后，可以導(dǎo)航到項(xiàng)目目錄，安裝依賴關(guān)系，然后運(yùn)行項(xiàng)目：

就這么簡單！Webpack 將開始在端口 8080（如果可用）上為你的項(xiàng)目提供服務(wù)并在瀏覽器中啟動(dòng)它。如果一切順利，你應(yīng)該看到這樣的歡迎頁面。

我們做到了嗎？

可以說我們做到了！為了正確調(diào)試你的Vue.js組件，你需要正確的工具。 繼續(xù)并安裝Vue.js devtools瀏覽器擴(kuò)展(Firefox/Chrome/Safari)。

你的***個(gè)組件

Vue.js***的功能之一是single-file components（SFC）。 它們允許您在一個(gè)文件中定義組件的結(jié)構(gòu)，樣式和行為，而不存在混合HTML，CSS和JavaScript的常見缺陷。

SFC以.vue擴(kuò)展名結(jié)尾，并具有以下結(jié)構(gòu)：

讓我們開始創(chuàng)建我們的***個(gè)組件：在/src/components中創(chuàng)建一個(gè)Rating.vue文件，然后復(fù)制/粘貼上面的代碼片段。然后，打開/src/main.js并調(diào)整現(xiàn)有的代碼：

***，添加一些HTML代碼到你的Rating.vue文件：

現(xiàn)在看看你的瀏覽器中的頁面，你應(yīng)該看到列表。Vue.js會(huì)將您的<Rating>組件附加到index.html中的#app元素。如果檢查HTML，則應(yīng)該看不到#app元素的符號(hào)：Vue.js將其替換為組件。

旁注：你有沒有注意到你甚至不需要重新加載頁面？這是因?yàn)閃ebpack的vue-loader帶有一個(gè)熱加載功能。與實(shí)時(shí)重新加載或?yàn)g覽器同步相反，每次更改文件時(shí)，熱重新加載都不會(huì)刷新頁面。而是監(jiān)視組件更改，只刷新它們，保持狀態(tài)不變。

現(xiàn)在，我們已經(jīng)花了一些時(shí)間來設(shè)置，是時(shí)候真正寫出有意義的代碼了。

模板

我們將使用 vue-awesome，一個(gè)用 Font Awesome icons 構(gòu)建的 Vue.js 的 SVG 圖標(biāo)組件。我們可以只加載我們需要的圖標(biāo)，使用 npm（或 Yarn）進(jìn)行安裝：

然后編輯你的組件，如下所示：

好吧，讓我們慢一點(diǎn)，解釋一下。

Vue.js 使用原生 ES6 模塊來處理依賴和導(dǎo)出組件。<script>塊中的前兩行分別導(dǎo)入圖標(biāo)，所以最終捆綁包中不需要圖標(biāo)。第三個(gè)圖標(biāo)是從 vue-awesome 導(dǎo)入的 Icon 組件，所以你可以在你的項(xiàng)目中使用它。

圖標(biāo)是一個(gè) Vue.js SFC，就像我們正在構(gòu)建的這一個(gè)。如果你打開這個(gè)文件，你會(huì)發(fā)現(xiàn)它和我們的結(jié)構(gòu)完全一樣。

export default 模塊將對(duì)象文字導(dǎo)出為我們組件的視圖模型。我們在組件屬性中注冊了 Icon 組件，所以我們可以在本地使用它。

***，我們在 HTML <template> 中使用了 Icon，并傳遞了一個(gè) name 屬性來定義我們想要的圖標(biāo)。通過將組件轉(zhuǎn)換為 kebab-case（例如：MyComponent 變成 <my-component>），可以將組件用作自定義 HTML 標(biāo)記。我們不需要在組件內(nèi)嵌入任何東西，所以我們使用了一個(gè)自閉合標(biāo)簽。

旁注：你有沒有注意到我們在 HTML 中添加了一個(gè)<div>標(biāo)簽？這是因?yàn)槲覀冞€在根級(jí)別的<span>中添加了一個(gè)計(jì)數(shù)器，Vue.js 中的組件模板只接受一個(gè)根元素。如果你不遵守，會(huì)得到一個(gè)編譯錯(cuò)誤。

樣式

如果你已經(jīng)使用過 CSS，你應(yīng)該知道一個(gè)主要的挑戰(zhàn)就是要處理它的全局性。嵌套一直被認(rèn)為是解決這個(gè)問題的方法。但現(xiàn)在我們知道它很快就會(huì)導(dǎo)致特殊性問題，使得樣式難以覆蓋，不能被重用，并且這將是一個(gè)難以衡量的噩夢。

于是發(fā)明了像 BEM 這樣的方法來繞過這個(gè)問題，并且通過命名空間類來保持低的特異性。有一段時(shí)間，這是編寫干凈和可擴(kuò)展的 CSS 的理想方法。然后，像 Vue.js 或 React 這樣的框架和庫就出現(xiàn)了，并將 scoped styling 引入表中。

React 具有樣式化的組件，Vue.js 具有 scoped styling CSS。它可以讓你編寫特定組件的 CSS，而不必拿出一些技巧來保持它的包含結(jié)構(gòu)。您使用“普通”類名編寫常規(guī) CSS，Vue.js 通過將數(shù)據(jù)屬性分配給 HTML 元素并將其附加到編譯樣式來處理范圍限定。

讓我們在組件上添加一些簡單的類：

和 css 樣式：

看到那個(gè)scoped屬性了嗎？ 這是告訴 Vue.js 去范圍化樣式，所以他們作用范圍不會(huì)涵蓋到其他地方。 如果您在 index.html 中正確地復(fù)制/粘貼 HTML 代碼，您將注意到您的樣式不適用：這是因?yàn)樗鼈兊淖饔糜蚴墙M件。

那么預(yù)處理器呢？

Vue.js 使得從簡單的 CSS 切換到您最喜歡的預(yù)處理器變得輕而易舉。你所需要的只是適當(dāng)?shù)?Webpack 加載器和<style>塊上的簡單屬性。我們在生成項(xiàng)目時(shí)對(duì)“使用sass”選擇“是”，所以 vue-cli 已經(jīng)為我們安裝并配置了 sass-loader。現(xiàn)在，我們需要做的就是將 lang="scss" 添加到開始的<style>標(biāo)簽中。

現(xiàn)在我們可以使用 Sass 編寫組件級(jí)樣式，導(dǎo)入變量，顏色定義或混合等部分。如果您更喜歡縮進(jìn)語法（或“sass”符號(hào)），只需在 lang 屬性中將 scss 切換 sass 即可。

行為

現(xiàn)在我們的組件看起來不錯(cuò)，現(xiàn)在是時(shí)候讓它開始工作了。目前，我們有一個(gè)硬編碼的模板。讓我們設(shè)置一些初始的模擬狀態(tài)，并調(diào)整模板，使其顯示出來：

我們在這里所做的是使用 Vue 的數(shù)據(jù)來設(shè)置組件狀態(tài)。你在 data 中定義的每個(gè)屬性都是有響應(yīng)性的：如果它發(fā)生變化，它將反映在視圖中。

我們正在創(chuàng)建一個(gè)可重用的組件，因此 data 需要成為工廠函數(shù)而不是對(duì)象文字。這樣我們就得到了一個(gè)新的對(duì)象，而不是一個(gè)可以跨幾個(gè)組件共享的現(xiàn)有對(duì)象。

我們的 data 工廠返回兩個(gè)屬性：stars，當(dāng)前“活動(dòng)”的 star 數(shù)和 maxStars，還有一個(gè)就是組件中 star 的總數(shù)。因?yàn)槲覀儠?huì)適配我們的模板規(guī)則，所以它反映了組件的實(shí)際狀態(tài)。

Vue.js 帶有一堆指令，可以讓您將演示邏輯添加到模板中，而無需將其與純 JavaScript 代碼混合。v-fordirective 遍歷任何可迭代的對(duì)象（數(shù)組，對(duì)象文字，映射等）。它也可以把一個(gè)數(shù)字作為一個(gè)范圍重復(fù) x 次、這就是我們用 v-for="star in maxStars" 所做的，所以我們對(duì)組件中的每個(gè)星星都有一個(gè)<li>。

您可能已經(jīng)注意到一些屬性以冒號(hào)為前綴，這是 v-bind 指令的縮寫，它將屬性動(dòng)態(tài)綁定到表達(dá)式。我們可以把它寫成長的形式，v-bind:class。

當(dāng) star 處于活動(dòng)狀態(tài)時(shí)，我們需要在 <li> 元素上添加 active 類。在我們的項(xiàng)目下，這意味著每個(gè) <li> 的索引小于 stars 應(yīng)該有 active 類。我們在 :class 指令中使用了一個(gè)表達(dá)式，當(dāng)當(dāng)前 star 小于總 star 數(shù)時(shí)，才會(huì)追加 active。同樣條件下我們使用三元運(yùn)算符來定義 Icon 組件使用的什么樣的圖標(biāo)：star 或 star-o。

那計(jì)數(shù)器呢？

現(xiàn)在我們的 star 列表是綁定到實(shí)際的數(shù)據(jù)，現(xiàn)在我們是時(shí)候?qū)τ?jì)數(shù)器也執(zhí)行相同的操作。最簡單的方法是使用帶有 mustache 語法的文本插值：

很簡單，不是嗎？ 現(xiàn)在在這種況下，這是訣竅。 但是，如果我們需要一個(gè)更復(fù)雜的 JavaScript 表達(dá)式，***將其抽象到一個(gè)計(jì)算屬性中。

在這里，這是矯枉過正。 我們可以避開模板內(nèi)表達(dá)式，并保持可讀性。然而，當(dāng)你不得不處理更復(fù)雜的邏輯時(shí)，記住計(jì)算的屬性。

另一件我們需要做的是提供一種方法來隱藏計(jì)數(shù)器，如果我們不需要它的時(shí)候。 最簡單的方法是使用帶有布爾值的 v-if 指令。

交互

我們差不多完成了，但是我們?nèi)匀恍枰獙?shí)現(xiàn)組件中最有趣的部分：響應(yīng)性。我們將使用 v-on，這是處理事件和方法的 Vue.js 指令，可以附加所有方法的 Vue.js 屬性。

我們在 <li> 上添加了 @click 屬性，這是 v-on:click 的簡寫。該指令包含對(duì)我們在組件的 methods 屬性中定義的 rate 方法的調(diào)用。

“等一下...這看起來非常像熟悉的 HTML 的 onclick 屬性。在 HTML 中使用內(nèi)聯(lián) JavaScript 不是一個(gè)過時(shí)和不好的做法嗎？”

確實(shí)如此，但是即使語法看起來很像 onclick，但比較兩者是一個(gè)錯(cuò)誤。當(dāng)你構(gòu)建一個(gè) Vue.js 組件時(shí)，你不應(yīng)該把它看作是分離的 HTML/CSS/JS，而應(yīng)該是一個(gè)使用多種語言的組件。當(dāng)項(xiàng)目在瀏覽器中開啟服務(wù)或編譯生產(chǎn)時(shí)，所有的 HTML 和指令都被編譯成普通的 JavaScript。如果您檢查已渲染的 HTML，您將看不到您的指令的任何標(biāo)志，也沒有任何 onclick 屬性。Vue.js 會(huì)編譯好你的組件并創(chuàng)建合適的綁定。

這也是為什么您可以從模板訪問組件的上下文的原因：因?yàn)橹噶罱壎ǖ揭晥D模型。與具有單獨(dú) HTML 的傳統(tǒng)項(xiàng)目相反，模板是組件的組成部分。

回到我們的 rate 方法。我們需要將 stars 變?yōu)?clicked 元素的索引，所以我們通過 @click 指令的索引，可以做到以下幾點(diǎn)：

去查看您的瀏覽器頁面，并嘗試點(diǎn)擊 star：它運(yùn)行成功了！

如果你打開瀏覽器開發(fā)者工具欄中的 Vue 面板并選擇 <Rating> 組件，當(dāng)你點(diǎn)擊 star 時(shí)，你會(huì)看到數(shù)據(jù)的變化。這表明你的 star 屬性是響應(yīng)性的：當(dāng)你改變它的時(shí)候，它會(huì)把它的改變指派給視圖。

 這個(gè)概念被稱為數(shù)據(jù)綁定，如果您使用過 Backbone.js 或 Knockout 之類的框架，您應(yīng)該熟悉這個(gè)概念。 不同之處在于，Vue.js 和 React 一樣，只能在一個(gè)方向上進(jìn)行：這就是所謂的單向數(shù)據(jù)綁定。不過這個(gè)話題值得寫一篇單獨(dú)的文章。

在這一點(diǎn)上，我們可以認(rèn)為已完成 —— 但我們可以做更多的工作來改善用戶體驗(yàn)。現(xiàn)在，我們實(shí)際上不能給出 0 的等級(jí)，因?yàn)辄c(diǎn)擊一個(gè) star 會(huì)將它的比率設(shè)置為它的索引。更好的方案是重新點(diǎn)擊同一顆 star，并切換至其當(dāng)前狀態(tài)，而不是保持 active 狀態(tài)。

現(xiàn)在，如果點(diǎn)擊的 star 的索引等于 star 當(dāng)前值，我們就減少它的值。 否則，我們給它分配 star 值。

如果我們想要徹底解決，我們還應(yīng)該添加一個(gè)控制層，以確保 star 從來沒有被賦予一個(gè)沒有意義的值。我們需要確保 star 永遠(yuǎn)不會(huì)小于 0，也絕不會(huì)比 maxStars 更大，而且它是一個(gè)合適的數(shù)字。

傳遞 props 屬性

現(xiàn)在，組件的數(shù)據(jù)在數(shù)據(jù)屬性中被硬編碼。如果我們希望我們的組件實(shí)際上是可用的，我們需要能夠從其實(shí)例傳遞自定義數(shù)據(jù)。在 Vue.js 中，我們用 props 做到這一點(diǎn)。

和在 main.js 文件里：

這里有三件事要注意：

首先，我們使用 v-bind 簡寫從組件實(shí)例傳遞 props 屬性：這就是 Vue.js 所謂的動(dòng)態(tài)語法。當(dāng)你想要傳遞一個(gè)字符串值時(shí)，你不需要知道它的具體值，為此，字面值語法（沒有 v-bind 的普通屬性）將起作用。但對(duì)我們而言，由于我們正在傳遞數(shù)字和布爾值，所以這很重要。

props 和數(shù)據(jù)屬性在編譯時(shí)被合并，所以我們不需要改變在視圖模型或模板中調(diào)用屬性的方式。出于同樣的原因，我們不能在 props 數(shù)據(jù)屬性中使用相同的名稱。

***，我們定義了一個(gè)級(jí)別屬性，并將其作為 star 數(shù)值屬性中的值傳遞給它。我們之所以這樣做，不是直接使用級(jí)別屬性，而是因?yàn)榧?jí)別改變，值會(huì)發(fā)生變化。在 Vue.js 中，props 從父級(jí)傳遞給子級(jí)，而不是反過來傳遞，所以你不會(huì)改變父級(jí)的狀態(tài)。這將違背 單向數(shù)據(jù)流 的原則，使事情難以調(diào)試。這就是為什么你不應(yīng)該試圖改變子組件內(nèi)的 prop。相反，定義一個(gè)使用 props 的初始值作為自聲的本地?cái)?shù)據(jù)屬性。

***的潤色

在這一天馬上過去之前，我們應(yīng)該了解 Vue.js ***一個(gè)驚奇的地方：prop 的驗(yàn)證。Vue.js 允許你在傳遞給組件之前控制 prop。您可以執(zhí)行四個(gè)主要的事情：檢查類型，要求定義一個(gè) prop 屬性，設(shè)置默認(rèn)值，并執(zhí)行自定義驗(yàn)證。

我們使用類型檢查來確保將正確類型的數(shù)據(jù)傳遞給組件。這將對(duì)我們忘記使用動(dòng)態(tài)語法來傳遞非字符串值的錯(cuò)誤特別有用。我們也確保通過要求它填寫 grade 屬性。對(duì)于其他 props 屬性，我們定義了默認(rèn)值，所以即使沒有傳遞自定義數(shù)據(jù)，組件也能正常工作。

現(xiàn)在我們可以簡單地通過執(zhí)行以下操作來實(shí)例化組件：

就是這樣！您剛剛創(chuàng)建了***個(gè) Vue.js 組件，并探索了許多概念，包括使用 vue-cli、single-file components 生成樣板程序，導(dǎo)入組件， scoped styling, directives, event handlers, computed properties, custom methods, one-way data flow, props 和 prop validation。這都是 Vue.js 所提供的表層特性！

這是一個(gè)非常詳細(xì)的教程，所以碰到不明白的地方，建議再次閱讀，在部分章節(jié)之間暫停和探索和，并嘗試擺弄下 CodeSandbox 上的源碼。 

原文鏈接：http://www.oschina.net/translate/build-your-first-vue-js-component