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

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

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

入門指南

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

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

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

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

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

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

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

我們做到了嗎？

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

你的***個組件

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

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

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

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

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

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

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

模板

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

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

好吧，讓我們慢一點，解釋一下。

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

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

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

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

旁注：你有沒有注意到我們在 HTML 中添加了一個<div>標簽？這是因為我們還在根級別的<span>中添加了一個計數(shù)器，Vue.js 中的組件模板只接受一個根元素。如果你不遵守，會得到一個編譯錯誤。

樣式

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

于是發(fā)明了像 BEM 這樣的方法來繞過這個問題，并且通過命名空間類來保持低的特異性。有一段時間，這是編寫干凈和可擴展的 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 樣式：

看到那個scoped屬性了嗎？ 這是告訴 Vue.js 去范圍化樣式，所以他們作用范圍不會涵蓋到其他地方。 如果您在 index.html 中正確地復制/粘貼 HTML 代碼，您將注意到您的樣式不適用：這是因為它們的作用域是組件。

那么預處理器呢？

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

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

行為

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

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

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

我們的 data 工廠返回兩個屬性：stars，當前“活動”的 star 數(shù)和 maxStars，還有一個就是組件中 star 的總數(shù)。因為我們會適配我們的模板規(guī)則，所以它反映了組件的實際狀態(tài)。

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

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

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

那計數(shù)器呢？

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

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

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

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

交互

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

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

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

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

這也是為什么您可以從模板訪問組件的上下文的原因：因為指令綁定到視圖模型。與具有單獨 HTML 的傳統(tǒng)項目相反，模板是組件的組成部分。

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

去查看您的瀏覽器頁面，并嘗試點擊 star：它運行成功了！

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

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

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

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

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

傳遞 props 屬性

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

和在 main.js 文件里：

這里有三件事要注意：

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

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

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

***的潤色

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

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

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

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

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

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