本文最初發布於 DEV 網站，經原作者授權由 InfoQ 中文站翻譯並分享。
這篇教程關注的是全新的汽車駕駛體驗。電動汽車已經是公認的未來趨勢。但很多人都關心的一個問題是，電車充滿電後究竟可以跑多遠？行駛速度、氣溫和輪轂尺寸會對續航裡程有什麼影響？在本教程中，我們會使用 Vue.js 這個容易理解的 JavaScript 框架製作一個儀錶盤，通過它可以計算特斯拉電動汽車在不同情況下的行駛距離。
作為本教程的起點，請克隆這個 Github 存儲庫：
https://github.com/petereijgermans11/workshop-reactjs-vuejs
然後轉至 vuejs-app 目錄。
cdworkshop-reactjs-vuejs/vuejs-app閱讀 README.md，了解我們要執行的任務。上圖是我們將要構建的應用程式的示例。我們先從一個有問題的應用程式開始入手，需要修復它的問題並做進一步的開發。在開始之前，首先解釋一下這個應用程式的結構。
要求
要開始學習本教程，你需要安裝以下內容：
Node 8.9 穩定版或更高版本：https://nodejs.org/en/download/Yarn：https://yarnpkg.com項目結構
這個項目的結構如下圖所示，圖上還展示了構成應用程式的各個組件。main.js 是應用程式的入口點。App.vue 是應用程式的入口組件。圖下方是 App.vue 組件。
列表 1
項目入口點
Vue 應用程式在 main.js 中啟動。在 main.js 中，你首先需要創建一個新的「root Vue 實例」。如下所示：
1. 導入 Vue：從「vue」導入 Vue。從 Vue 模塊導入 vue。
2. 導入條目組件 App.vue：
import App from "./App. vue "3. 創建一個「根 Vue 實例」：
new Vue ({....})4. 從這個「根 Vue 實例」，渲染導入的 App.vue 組件（入口組件）：
render: h => h (App)5. 這個根 Vue 實例已掛載完畢，應用程式就在這裡啟動。它會指向帶有標識#app的 HTML 元素，該元素在 App.vue 組件的 template 中定義。（參閱以下代碼段。）
列表 2
App.vue 組件
列表 3
這個 App.vue 是應用程式的入口組件，由以下部分組成。
腳本（script）：這是這個組件的 JavaScript 部分。在此示例中，name property 指示組件的名稱（名稱為「app」）。該組件使用的子組件在 components-property 中定義。在本例中，TeslaBattery 是 App.vue 組件的子組件。要使用 TeslaBattery 組件，必須首先導入它（import Tesla-Battery from 「…」）。
在 data()-function 中，你可以定義和初始化狀態變量，例如導入的 logo 和 greeting 屬性。要渲染徽標和問候語，必須在模板中定義它們。最後你得導出整個組件（export default{ }），以便將其再次導入其他組件和 main.js。
模板（template）：負責定義組件生成的輸出。Vue.js 使用基於 HTML 的模板語法。來自 data()-function 的數據可以通過數據綁定輕鬆渲染。數據綁定的最簡單形式是使用 Mustache 語法（雙括號）的文本插值：{{greeting}}
在上面的示例中，{{greeting}}替換為來自 data()-function 的值 Hello Tesla !!!。在這條問候語上方，還通過 img-tag 來渲染徽標。要將徽標分配給 img src-attribute，請使用屬性綁定。為此，可以使用v-bind、<img :src="logo">或<img v-bind:src="logo">。這個應用程式中會經常使用屬性綁定。
最後，使用<teslabattery>-tag實例化並渲染 TeslaBattery 組件。對於此標誌（也稱為「自定義元素」），必須使用 Kebab case。稍後將討論此組件的運行機制。
樣式（style）：在 Vue 中，我們使用一個 SCSS 文件對整個應用程式進行樣式設置。
分解 UI
幾乎所有 Vue 應用程式都由一系列組件組成。這個應用程式由一個條目應用組件組成，下面還有 TeslaBattery 這個子組件。TeslaBattery 組件包含以下子組件：
TeslaCar：使用車輪動畫渲染 TeslaCar 圖像。TeslaStats：用於渲染 各個 Tesla 模型的最大電池續航裡程。它包含以下型號：60、60D、75、75D、90D 和 P100D。TeslaCounter：用於手動控制速度和外部溫度。TeslaClimate：當外部溫度超過 20 度時，它會將供暖加熱改為空調製冷。TeslaWheels：用於手動將車輪尺寸從 19 英寸調整為 20 英寸，反之亦然。
用戶界面由組件樹表示，如下所示。
以下代碼塊顯示「Tesla Battery 組件」是一個容器組件。其基礎子組件是 Presentation 組件。在開發 Vue 應用程式時這個模式很好用。將組件分為兩類可以讓它們更容易重用。
列表 4
容器組件具有以下特徵：
它們可以同時包含表示和容器組件。它們負責通過「props」創建數據並將數據傳輸到子組件。它們根據傳入事件執行邏輯。它們負責管理狀態，並知道何時需要再次渲染組件。它們通常是有狀態的，因為它們傾向於充當數據源。表示組件（presentation component）的特徵如下：
它們也稱為「啞組件」（dumb component）。其重點是用戶界面。幾乎所有基本的 UI 組件都必須視為啞組件，例如按鈕、輸入、模態等。TeslaCar 也是一個啞組件，可確保渲染 TeslaCar 圖像。它們通過「props」接收數據，並通過事件將數據返回給父組件。它們通常是無狀態的，並且不依賴應用程式的其他部分。
這個方法有以下優點：
可重用性。啞組件更易測試，因為它們僅接收「props」，發出事件並返回一部分 UI。可讀性更好：你擁有的代碼越少且組織得越好，就越容易理解和調整。它提供一致性並防止代碼重複。TeslaBattery 服務
我們使用的數據是硬編碼的，存儲在 tesla-battery.service.js 中。這個服務具有用於檢索模型數據的 getModel-Data() 方法。在下面的代碼塊中查看這個模型的數據結構。
列表 5
各個 Tesla 模型的最大電池續航裡程是根據以下參數確定的：
特斯拉模型（60、60D……）車輪尺寸（19/20 英寸）氣候（開 / 關）速度溫度（-10.0……）。TeslaBattery 組件該組件負責定義、創建數據並通過「props」將數據傳遞給子組件。它還負責管理應用程式的狀態。
完全摺疊時，我們可以看到這個組件由以下屬性組成。
列表 6
components 屬性包含此組件使用的所有子組件。
computed 屬性包含已緩存的函數。也就是說，僅當一個函數依賴於特定的數據屬性，並且此屬性的狀態改變時，才執行該函數。在下面的 TeslaBattery 組件的完整版本中，stats()-function 是一個 computed 函數的示例。
此函數從模型數據中過濾每個特斯拉模型的最大電池續航裡程。下面的代碼塊是 stats()-function 的輸出示例。最大電池續航裡程基於用戶輸入，例如選定的車輪尺寸、氣候、速度和溫度。並且僅在用戶輸入更改時才執行 stats()-function。用戶輸入記錄在 tesla 對象（狀態對象）中，該對象在 data()-function 中定義。
每個型號的最大電池續航裡程：
[ {"model":"60","miles":267}, {"model":"60D","miles":271}, {"model":"75","miles":323}, {"model":"75D","miles":332}, {"model":"90D","miles":365}, {"model":"P100D","miles":409}]methods 屬性 包含所有未緩存的函數。在這裡定義 changeClimate() 函數是因為此函數由 onClick-event 觸發（並且不基於 data/state 屬性）。
列表 7
這個 TeslaBattery 組件的模板具有與列表 4 相同的結構：
列表 8
通過 props 將數據傳遞給子組件
在下圖中，stats-data（源自 stats()-function）從 TeslaBattery 組件傳遞到 TeslaStats 組件。
要將數據傳遞給子組件，必須在 TeslaBattery 組件模板中使用v-bind或:
列表 9
<template> <form> ... <tesla-stats :stats="stats" /> ... </form> </template>在 TeslaStats 組件中接收數據
該組件在腳本部分包含一個 props-property，用於接收 stats-data。這些統計信息的類型為 Array。在模板中，我們使用 Vue.js 中的 v-for 指令來遍歷統計信息。:key（在 v-for 指令中）指示此列表必須以特定順序渲染。
你可以在 filters-property 中定義自定義過濾器。例如，過濾器「lowercase」，有一個以小寫形式渲染模型名稱的管道。這裡還定義了一個自定義過濾器，用於將英裡轉換為公裡。
列表 10
小結
看過這篇文章後，你就可以開始解決項目的錯誤並執行 README.md 中描述的任務。在這個 Github 項目中還添加了一個 ppt，詳細說明了通過 v-model 指令進行雙向數據綁定、使用 @click 將 onClick 事件分配給按鈕以及創建其他組件之類的問題。
英文原文
Build a Tesla battery range calculator yourself
關注我並轉發此篇文章，私信我「領取資料」，即可免費獲得InfoQ價值4999元迷你書！