一、Vue.js 入门
Vue（发音视图）是一个非常强大的 JavaScript 库，用于构建交互式用户界面。尽管 Vue 具有处理大型单页应用的能力，但它也非常适合为小型、单独的用例提供框架。它的小文件大小意味着它可以集成到现有的生态系统中，而不会增加太多的膨胀。
它是为了有一个简单的 API 而构建的，与竞争对手相比，它更容易入门：React 和 Angular。尽管它借用了这些库中的一些逻辑和方法，但它已经确定开发人员需要一个更简单的库来构建应用。
与 React 或 Angular 不同，Vue 的一个好处是它可以生成干净的 HTML 输出。其他 JavaScript 库倾向于让 HTML 分散在代码中，带有额外的属性和类，而 Vue 会删除这些属性和类，以生成干净的语义输出。
在本章中，我们将了解：
- 如何通过包含 JavaScript 文件开始使用 Vue
- 如何初始化第一个 Vue 实例并查看数据对象
- 检查计算函数和属性
- 了解 Vue 方法
创建工作区
要使用 Vue，我们首先需要在 HTML 中包含该库并对其进行初始化。对于本书第一节中的示例，我们将在单个 HTML 页面中构建应用。这意味着初始化和控制 Vue 的 JavaScript 将放在页面底部。这将保持我们所有的代码都包含在内，这意味着它将很容易在您的计算机上运行。打开您喜爱的文本编辑器并创建新的 HTML 页面。使用以下模板作为起点：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js App</title>
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript">
// JS Code here
</script>
</body>
</html>
您应该熟悉主要的 HTML 标记和结构。让我们看一下其他几个方面。
应用空间
这是应用的容器，并为 Vue 提供了一个工作环境。所有 Vue 代码都将放置在此标记中。实际的标记可以是任何 HTML 元素——main、section 等等。元素的 ID 必须是唯一的，但同样可以是任何您想要的。这允许您在一个页面上有多个 Vue 实例，或标识哪个 Vue 实例与哪个 Vue 代码相关：
<div id="app">
</div>
在教程中，此 ID 为的元素将被称为应用空间或视图。应该注意的是，应用的所有 HTML、标记和代码都应该放在这个容器中。
Although you can use most HTML tags for your application space, you cannot initialize Vue on the <body> or <HTML> tags - if you do so, Vue will throw a JavaScript error and will fail to initialize. You will have to use an element inside your body.
Vue 库
对于本书中的示例，我们将使用来自CDN（内容交付网络）unpkg 的 Vue.js 托管版本。这确保了我们的应用中有最新版本的 Vue，也意味着我们不需要创建和托管其他 JavaScript 文件。Unpkg 是一个独立的网站，拥有流行的图书馆。它使您能够快速、轻松地将 JavaScript 包添加到 HTML 中，而无需自行下载和托管文件：
<script src="https://unpkg.com/vue"></script>
在部署代码时，从本地文件而不是依赖 CDN 为库提供服务是一种好的做法。这确保了在当前保存的版本发布更新时，您的实现可以与当前保存的版本一起工作。它还将提高应用的速度，因为它不需要从其他服务器请求文件。
库 include 后面的script块是我们为 Vue 应用编写所有 JavaScript 的地方。
初始化 Vue 并显示第一条消息
现在我们已经设置了模板，可以使用以下代码初始化 Vue 并将其绑定到 HTML 应用空间：
const app = new Vue().$mount('#app');
此代码创建一个新的 Vue 实例，并将其装载到 ID 为app的 HTML 元素上。如果您保存文件并在浏览器中打开它，您将注意到没有发生任何事情。然而，在引擎盖下，这一行代码将div与app变量相关联，后者是 Vue 应用的一个实例。
Vue 本身有许多对象和属性，我们现在可以使用它们来构建我们的应用。您将遇到的第一个属性是el属性。使用 HTML ID，此属性告诉 Vue 它应该绑定到哪个元素以及应用将包含在哪里。这是装载 Vue 实例的最常见方式，所有 Vue 代码都应在此元素中执行：
const app = new Vue({
el: '#app'
});
当实例中未指定el属性时，Vue 将在未安装状态下初始化，这将允许您指定的任何函数或方法在安装前运行、运行和完成。准备好后，您可以独立调用 mounting 函数。在幕后，当使用el属性时，Vue 正在使用$.mount函数挂载实例。如果您确实想等待，$mount函数可以单独调用，例如：
const app = new Vue();
// When ready to mount app:
app.$mount('#app');
然而，由于我们不需要在本书中延迟挂载时间的执行，我们可以在 Vue 实例中使用el元素。使用el属性也是安装 Vue 应用的最常见方式。
除了el值之外，Vue 还有一个data对象，其中包含访问应用或应用空间所需的任何数据。在 Vue 实例中创建新的数据对象，并通过执行以下操作为属性指定值：
const app = new Vue({
el: '#app',
data: {
message: 'Hello!'
}
});
在应用空间中，我们现在可以访问message变量。为了在应用中显示数据，Vue 使用 Mustach 模板语言输出数据或变量。这是通过将变量名放在双花括号{{ variable }}之间实现的。逻辑语句，如if或foreach获取 HTML 属性，这将在本章后面介绍。
在应用空间中，添加代码以输出字符串：
<div id="app">
{{ message }}
</div>
保存文件，在浏览器中打开它，您应该会看到您的 Hello！绳子。
If you don't see any output, check the JavaScript console to see if there are any errors. Ensure the remote JavaScript file is loading correctly, as some browsers and operating systems require additional security steps before allowing some remote files to be loaded when viewing pages locally on your computer.
data对象可以处理多个键和数据类型。向数据对象添加更多的值，看看会发生什么-确保在每个值后添加逗号。数据值是简单的 JavaScript，也可以处理基本的数学运算-尝试添加新的price键并将值设置为18 + 6以查看会发生什么。或者，尝试添加 JavaScript 数组并将其打印出来：
const app = new Vue({
el: '#app',
data: {
message: 'Hello!',
price: 18 + 6,
details: ['one', 'two', 'three']
}
});
在您的应用空间中，您现在可以输出这些值中的每一个-{{ price }}和{{ details }}现在输出数据-尽管列表可能与您预期的不完全相同。我们将在第 2 章中介绍列表的使用和显示，显示、循环、搜索和过滤数据。
Vue 中的所有数据都是被动的，可以由用户或应用更新。这可以通过打开浏览器的 JavaScript 控制台并自己更新内容来测试。尝试键入app.message = 'Goodbye!';并按进入-您的应用的内容将更新。这是因为您直接引用了属性-第一个app引用了您的应用在 JavaScript 中初始化为的const app变量。句点表示其中的一个属性，message表示数据键。您还可以将app.details或price更新为您想要的任何内容！
计算值
Vue 中的data对象非常适合直接存储和检索数据，但是，有时您可能需要在将数据输出到应用之前对其进行操作。我们可以使用 Vue 中的computed对象来实现这一点。使用此技术，我们可以开始遵循MVVM（模型视图模型方法。
MVVM 是一种软件体系结构模式，您可以将应用的各个部分划分为不同的部分。模型（或数据）是您的原始数据输入—可以是来自 API、数据库或硬编码数据值。在 Vue 的上下文中，这通常是我们前面使用的data对象。
视图是应用的前端。这应该只用于从模型输出数据，不应该包含任何逻辑或数据操作，除了一些不可避免的if语句。对于 Vue 应用，这是放置在<div id="app"></div>标记中的所有代码
视图模型是两者之间的桥梁。它允许您在视图输出数据之前操作模型中的数据。例如，将字符串更改为大写或在货币符号前加前缀，从列表中筛选出折扣产品或计算数组中某个字段的总值。在 Vue 中，computed对象就是在这里出现的
计算对象可以具有所需的任意多个属性-但是，它们必须是函数。这些函数可以利用 Vue 实例上已有的数据并返回一个值，可以是一个字符串、数字或数组，然后可以在视图中使用
第一步是在 Vue 应用中创建计算对象。在本例中，我们将使用计算值将字符串转换为小写，因此将message的值设置回字符串：
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
computed: {
}
});
Don't forget to add a comma (,) after the closing curly bracket (}) of your data object so Vue knows to expect a new object.
下一步是在计算对象内创建函数。开发中最困难的部分之一是命名——确保函数的名称是描述性的。由于我们的应用非常小，操作也非常简单，我们将其命名为messageToLower：
const app = new Vue({
el: '#app',
data: {
message: 'HelLO Vue!'
},
computed: {
messageToLower() {
return 'hello vue!';
}
}
});
在前面的示例中，我将其设置为返回硬编码字符串，这是message变量内容的小写版本。计算函数的使用方式与在视图中使用数据键的方式完全相同。将视图更新为输出{{ messageToLower }}而不是{{ message }}，并在浏览器中查看结果。
然而，这段代码存在一些问题。首先，如果messageToLower的值是硬编码的，我们可以将其添加到另一个数据属性中。其次，如果message的值发生变化，小写版本现在将不正确。
在 Vue 实例中，我们可以使用this变量访问数据值和计算值—我们将更新函数以使用现有message值：
computed: {
messageToLower() {
return this.message.toLowerCase();
}
}
messageToLower函数现在引用现有的message变量，并使用本机 JavaScript 函数将字符串转换为小写。尝试在应用或 JavaScript 控制台中更新message变量，以查看其更新。
计算函数不仅限于基本功能——记住，它们的设计目的是从视图中删除所有逻辑和操作。更复杂的示例可能如下所示：
const app = new Vue({
el: '#app',
data: {
price: 25,
currency: '$',
salesTax: 16
},
computed: {
cost() {
// Work out the price of the item including
salesTax
let itemCost = parseFloat(
Math.round((this.salesTax / 100) *
this.price) + this.price).toFixed(2);
// Add text before displaying the currency and
amount
let output = 'This item costs ' +
this.currency + itemCost;
// Append to the output variable the price
without salesTax
output += ' (' + this.currency + this.price +
' excluding salesTax)';
// Return the output value
return output;
}
}
});
虽然乍一看这似乎很先进，但代码采用了固定的价格，并计算了加上销售税后的价格。price、salesTax和currency符号都作为值存储在数据对象上，并在cost()计算函数中访问。视图输出{{ cost }}，产生以下内容：
此商品价格为$29.00（$25，不含销售税）
如果用户或应用本身更新了任何数据，则计算函数将重新计算和更新。这允许我们的函数基于price和salesTax值进行动态更新。在浏览器的控制台中尝试以下命令之一：
app.salesTax = 20
app.price = 99.99
段落和价格将立即更新。这是因为计算出的函数对data对象和应用的其余部分起反应。
方法和可重用函数
在 Vue 应用中，您可能希望以一致或重复的方式计算或操作数据，或者运行不需要向视图输出的任务。例如，如果您希望计算每个价格的销售税，或者在将数据分配给某些变量之前从 API 检索某些数据。
Vue 允许您创建函数或方法，而不是每次都创建计算函数。这些函数可以在应用中声明，并且可以从任何地方访问——类似于data或computed函数。
将方法对象添加到 Vue 应用中，并注意数据对象的更新：
const app = new Vue({
el: '#app',
data: {
shirtPrice: 25,
hatPrice: 10,
currency: '$',
salesTax: 16
},
methods: {
}
});
在data对象中，price键已被替换为两个价格—shirtPrice和hatPrice。我们将创建一个方法来计算每个价格的销售税。
与为计算对象创建函数类似，创建一个名为calculateSalesTax的方法函数标题。此函数需要接受单个参数，即price。在内部，我们将使用上一个示例中的代码来计算销售税。记住仅用参数名替换this.price：price，如下所示：
methods: {
calculateSalesTax(price) {
// Work out the price of the item including
sales tax
return parseFloat(
Math.round((this.salesTax / 100) * price)
+ price).toFixed(2);
}
}
按 save 对我们的应用没有任何作用-我们需要调用函数。在您看来，更新输出以使用函数并传入shirtPrice变量：
<div id="app">
{{ calculateSalesTax(shirtPrice) }}
</div>
保存您的文档并在浏览器中检查结果-这是您所期望的吗？下一个任务是预先设置货币。我们可以通过添加第二个方法来实现这一点，该方法返回传递到函数中的参数，该参数的货币位于数字的开头：
methods: {
calculateSalesTax(price) {
// Work out the price of the item including
sales tax
return parseFloat(
Math.round((this.salesTax / 100) * price) +
price).toFixed(2);
},
addCurrency(price) {
return this.currency + price;
}
}
在我们看来，然后我们更新输出以利用这两种方法。我们可以传递第一个函数calculateSalesTax作为第二个addCurrency函数的参数，而不是分配给变量。这是因为第一种方法calculateSalesTax接受shirtPrice参数并返回新的金额。我们没有将其保存为变量并将变量传递到addCurrency方法中，而是将结果直接传递到该函数中，即计算出的金额：
{{ addCurrency(calculateSalesTax(shirtPrice)) }}
然而，每次我们需要输出价格时，必须编写这两个函数，这将开始变得令人厌烦。从这里开始，我们有两个选择：
- 我们可以创建第三个方法，名为
cost()——它接受价格参数并通过两个函数传递输入 - 创建一个计算函数，如
shirtCost，它使用this.shirtPrice而不是传入参数
或者，我们可以创建一个名为shirtCost的方法，该方法与我们的计算函数相同；但是，在这种情况下，最好练习使用 computed。
这是因为computed函数是缓存的，而method函数不是。如果您认为我们的方法比目前复杂得多，那么反复调用一个又一个函数（例如，如果我们想在多个位置显示价格）可能会对性能产生影响。对于计算函数，只要数据不变，就可以根据需要多次调用它，结果由应用缓存。如果数据确实发生了更改，则只需重新计算一次，然后重新缓存该结果。
为shirtPrice和hatPrice创建一个计算函数，以便在视图中使用这两个变量。不要忘记，要在内部调用函数，必须使用this变量，例如this.addCurrency()。使用以下 HTML 代码作为视图的模板：
<div id="app">
<p>The shirt costs {{ shirtCost }}</p>
<p>The hat costs {{ hatCost }}</p>
</div>
在与下面的代码进行比较之前，尝试一下自己创建计算函数。不要忘记，在开发过程中有很多方法，因此，如果您的代码工作正常但与以下示例不匹配，也不要担心：
const app = new Vue({
el: '#app',
data: {
shirtPrice: 25,
hatPrice: 10,
currency: '$',
salesTax: 16
},
computed: {
shirtCost() {
returnthis.addCurrency(this.calculateSalesTax(
this.shirtPrice))
},
hatCost() {
return this.addCurrency(this.calculateSalesTax(
this.hatPrice))
},
},
methods: {
calculateSalesTax(price) {
// Work out the price of the item including
sales tax
return parseFloat(
Math.round((this.salesTax / 100) * price) +
price).toFixed(2);
},
addCurrency(price) {
return this.currency + price;
}
}
});
结果虽然基本，但应如下所示：
总结
在本章中，我们学习了如何开始使用 VUEJavaScript 框架。我们检查了 Vue 实例中的data、computed和methods对象。我们介绍了如何在框架内使用每一种方法，以及如何利用每一种方法的优点。
版权属于：月萌API www.moonapi.com，转载请注明出处
