VUE(Vue.js教程：构建一个特斯拉汽车余电计算器)

Vue.js教程：构建一个特斯拉汽车余电盘算器

作者丨Peter Eijgermans

译者丨王强

操持丨小智

那么，特斯拉上哪去领呢？

本文最初公布于 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或:

<template>     <form>                ...             <tesla-stats :stats="stats" />                ...     </form>  </template>

列表 9

在 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 事变分派给按钮以及创建其他组件之类的成绩。

延伸阅读

https://dzone.com/articles/build-a-tesla-battery-range-calculator-yourself-it