2020-06-24 19:18:10

181dc208 · wizardforcel · 215cbcf7 · 181dc208 · 181dc208 · 181dc208
15 changed file
--- a/docs/106.md
+++ b/docs/106.md
@@ -27,7 +27,7 @@

 1.  根据测试用例打开 IE / Chrome 浏览器。
 2.  导航到“<https://www.google.com/>”
-3.  在控制台中显示“`Hello World”`消息。
+3.  在控制台中显示“`Hello World`消息。
 4.  关闭浏览器。

 **首先让我们看看“`HelloWorld_IE.java`”类的代码**

--- a/docs/120.md
+++ b/docs/120.md
@@ -13,7 +13,7 @@

 好消息是，对于这两种文本框类型，都可以使用相同的命令输入所需的值。

-**示例**：让我们在“名字”中输入“`testFirst`”，在“创建密码”字段中输入“`test1234!”`。
+**示例**：让我们在“名字”中输入“`testFirst`”，在“创建密码”字段中输入“`test1234!`。

 **说明**：通过 **id** 找到所需的元素，然后使用`sendKeys("value")`方法输入相应的值。


--- a/docs/121.md
+++ b/docs/121.md
@@ -6,7 +6,7 @@

 *准备开始*

-**单选按钮**：在一组单选按钮中，一次只能选择一个。 在 HTML 中，它们使用`<input>`标签表示，并带有`type`属性，称为“`radio”`。
+**单选按钮**：在一组单选按钮中，一次只能选择一个。 在 HTML 中，它们使用`<input>`标签表示，并带有`type`属性，称为“`radio`。

 **复选框**：在一组复选框中，每个复选框都单独运行，用户可以根据需要选择多个复选框。 在 HTML 中，使用`<input>`标签并将`type`属性称为“`checkbox`”来表示复选框。


--- a/docs/145.md
+++ b/docs/145.md
@@ -68,7 +68,7 @@ Vue 也可用于 unpkg，
 </html>
 ```

-代码很简单。 我们给页面命名为“Hello Vue!”。 以及`<head>`部分中使用带有`<script>`标签的 CDN 的 vue.js 的开发版本。 我们正在显示“Hello World!” `<body>`部分中带有`id=”app”`的`<div>`元素内`<h1>`标签内的消息。
+代码很简单。 我们给页面命名为“Hello Vue!”。 以及`<head>`部分中使用带有`<script>`标签的 CDN 的 vue.js 的开发版本。 我们正在显示“Hello World!” `<body>`部分中带有`id=”app`的`<div>`元素内`<h1>`标签内的消息。

 Chrome 浏览器中的当前输出如下，


--- a/docs/150.md
+++ b/docs/150.md
@@ -8,7 +8,7 @@

 ![Attribute binding with template syntax](img/1ed51c59dd82a5d6011f7e594f0eb2cc.png)

-失望了吗？这是发生了什么事。 正如预期的那样，“Vue 官方网站”文本已显示为超链接。 单击它会打开一个新选项卡，因为我们使用了`_blank`作为目标（这里没什么疯狂的）。 现在，查看地址栏中的 URL。 不会像在 Vue 实例的数据对象中指定的那样导航到 [https://vuejs.org/v2/guide/index.html](https://vuejs.org/v2/guide/index.html) ，而是处理`href`属性的双引号内的值 作为字符串并解析为 URL `“{{ vueLink }}”`。 这就是普通 HTML `href`属性的工作方式，这就是您在新打开的标签页的地址栏中看到的内容。 显然，绑定从未发生过。
+失望了吗？这是发生了什么事。 正如预期的那样，“Vue 官方网站”文本已显示为超链接。 单击它会打开一个新选项卡，因为我们使用了`_blank`作为目标（这里没什么疯狂的）。 现在，查看地址栏中的 URL。 不会像在 Vue 实例的数据对象中指定的那样导航到 [https://vuejs.org/v2/guide/index.html](https://vuejs.org/v2/guide/index.html) ，而是处理`href`属性的双引号内的值 作为字符串并解析为 URL `{{ vueLink }}`。 这就是普通 HTML `href`属性的工作方式，这就是您在新打开的标签页的地址栏中看到的内容。 显然，绑定从未发生过。

 因此，这就是 Vue 的工作方式。 我们不能将模板语法/大括号括起来用于 HTML 属性绑定。 但是，如果我们仍然想将某些东西动态绑定到属性上怎么办？ 不要担心！ Vue 附带了另一个用于此目的的指令`v-bind`。 只要我们花时间寻找指令，指令就在我们周围。

@@ -16,7 +16,7 @@

 ### **语法，**

-`v-bind:html_attribute=”data_to_be_bound”`
+`v-bind:html_attribute=”data_to_be_bound`

 ### **示例，**

@@ -51,7 +51,7 @@

 是时候做同样的歌舞了！

-在 Vue 实例的数据对象中，让我们拥有`“isInputDisabled”`属性，并将其值设置为`true`
+在 Vue 实例的数据对象中，让我们拥有`isInputDisabled`属性，并将其值设置为`true`

 ```javascript
 isInputDisabled: true
@@ -67,7 +67,7 @@ isInputDisabled: true

 ![v-bind input disabled](img/1360c77ec1d6e0f9343d6ac614a06dd7.png)

-现在让我们将`“isInputDisabled”`的值更改为`false`。
+现在让我们将`isInputDisabled`的值更改为`false`。

 ```javascript
 isInputDisabled: false

--- a/docs/151.md
+++ b/docs/151.md
-# 7.条件渲染第 1 部分（v-if，v-else，v-else-if）
+# 7.条件渲染第 1 部分（`v-if`，`v-else`，`v-else-if`）

 > 原文： [https://javabeginnerstutorial.com/vue-js/7-conditional-rendering-part-1/](https://javabeginnerstutorial.com/vue-js/7-conditional-rendering-part-1/)


--- a/docs/152.md
+++ b/docs/152.md
-# 8.条件渲染第 2 部分（v-if 和 v-show）
+# 8.条件渲染第 2 部分（`v-if`和`v-show`）

 > 原文： [https://javabeginnerstutorial.com/vue-js/8-conditional-rendering-part-2/](https://javabeginnerstutorial.com/vue-js/8-conditional-rendering-part-2/)


--- a/docs/153.md
+++ b/docs/153.md
@@ -2,7 +2,7 @@

 > 原文： [https://javabeginnerstutorial.com/vue-js/9-rendering-lists-part-1/](https://javabeginnerstutorial.com/vue-js/9-rendering-lists-part-1/)

-我们日复一日地处理清单。 在我们的应用中，我们经常遇到这样的情况，即我们必须将数组显示为列表，其项会动态变化。 因此，在我们的 HTML 中对数组项进行硬编码并不是真正的选择。 重要的是，我们知道如何使用 Vue 处理这些动态变化的数组，这并不奇怪，为此，我们还有另一个指令！ 多田，是对的 v！ 与往常一样，我们将深入研究大量示例，以便于清楚理解。
+我们日复一日地处理清单。 在我们的应用中，我们经常遇到这样的情况，即我们必须将数组显示为列表，其项会动态变化。 因此，在我们的 HTML 中对数组项进行硬编码并不是真正的选择。 重要的是，我们知道如何使用 Vue 处理这些动态变化的数组，这并不奇怪，为此，我们还有另一个指令！ 对，是`v-for`！ 与往常一样，我们将深入研究大量示例，以便于清楚理解。

 ## 遍历数组

@@ -14,7 +14,7 @@ data: {
 }
 ```

-在我们的`index.html`文件中，让我们将`v-for`指令添加到`<li>`元素中，以动态地呈现 greetings 数组的内容，如下所示：
+在我们的`index.html`文件中，让我们将`v-for`指令添加到`<li>`元素中，以动态地呈现`greetings`数组的内容，如下所示：

 ```java
 

--- a/docs/154.md
+++ b/docs/154.md
@@ -2,7 +2,7 @@

 > 原文： [https://javabeginnerstutorial.com/vue-js/10-rendering-lists-part-2/](https://javabeginnerstutorial.com/vue-js/10-rendering-lists-part-2/)

-希望您已经知道[使用 v-for 指令遍历数组元素](https://javabeginnerstutorial.com/vue-js/9-rendering-lists-part-1/)。 在我们的应用中，我们处理的对象与数组一样多。 因此，不用费劲，让我们了解如何迭代对象的各种属性。 我听到你说：“*那么对象数组呢？*”我懂了。 我们也会处理这种情况！
+希望您已经知道[使用`v-for`指令遍历数组元素](https://javabeginnerstutorial.com/vue-js/9-rendering-lists-part-1/)。 在我们的应用中，我们处理的对象与数组一样多。 因此，不用费劲，让我们了解如何迭代对象的各种属性。 我听到你说：“*那么对象数组呢？*”我懂了。 我们也会处理这种情况！

 ## 遍历对象


--- a/docs/155.md
+++ b/docs/155.md
@@ -39,16 +39,16 @@ var app = new Vue({

 地球上最著名的按钮事件是`click`事件。 假设我们要在单击“说你好”按钮时将消息“嗨”更改为“你好”。 知道我们如何通过 Vue 实现这一目标吗？

-亲们，人民，Vue 为此又有另一个指令，v-on！ 我们始终可以使用 v-on 监听 DOM 事件，例如，
+亲们，人民，Vue 为此又有另一个指令，`v-on`！ 我们始终可以使用`v-on`监听 DOM 事件，例如，

-*   鼠标事件 – 单击，dblclick，mousemove，mouseover 等。
-*   键盘事件-按键，按键，按键等。
-*   表单事件 – 提交，聚焦，模糊等
+*   鼠标事件 – `click`，`dblclick`，`mousemove`，`mouseover`等。
+*   键盘事件 - `keypress`，`keyup`，`keydown`等。
+*   表单事件 – `submit`，`focus`，`blur`等
 *   还有很多

 ## 监听点击事件

-因此，我们现在的任务是监听按钮“Say Hello”上发生点击事件时，将消息文本从“Hi”更改为“Hello”。 一件事很清楚。 我们必须将`v-on`指令添加到将要监听 click 事件的 button 元素中。
+因此，我们现在的任务是监听按钮“Say Hello”上发生点击事件时，将消息文本从“`Hi`”更改为“`Hello`”。 一件事很清楚。 我们必须将`v-on`指令添加到将要监听`click`事件的`button`元素中。

 ```java
 <button v-on:click="message='Hello'">Say Hello</button>
@@ -58,9 +58,9 @@ var app = new Vue({

 *   `v-on` – Vue 知道我们正在使用此指令来监听事件
 *   `click` – 指定在冒号之后我们正在监听的事件的类型
-*   `“”` – 在等号后，指定触发事件时我们要执行的方法名称或 JavaScript 代码。
+*   `=` – 在等号后，指定触发事件时我们要执行的方法名称或 JavaScript 代码。

-我们正在从 Vue 实例的数据对象访问`message`属性，并将其设置为“Hello”。 输出如下，
+我们正在从 Vue 实例的数据对象访问`message`属性，并将其设置为“`Hello`”。 输出如下，

 ![click event](img/8d4cd9791d942ea8222e5da810bcf76c.png)

@@ -70,9 +70,9 @@ var app = new Vue({

 ### 使用方法

-上面提到的大脑拖曳问题的答案是使用方法。 就像`“data”`对象一样，我们的 Vue 实例有一个可选的`“methods”`对象，我们可以在其中定义所有方法。
+上面提到的大脑拖曳问题的答案是使用方法。 就像`data`对象一样，我们的 Vue 实例有一个可选的`methods`对象，我们可以在其中定义所有方法。

-现在，在`v-on`的双引号中，只需提及方法的名称，然后**传递所需的参数**（如果有）。 然后，在 Vue 实例的`“methods”`对象中定义方法，该方法将在每次`click`事件发生时触发。
+现在，在`v-on`的双引号中，只需提及方法的名称，然后**传递所需的参数**（如果有）。 然后，在 Vue 实例的`methods`对象中定义方法，该方法将在每次`click`事件发生时触发。

 #### `Index.html`（代码段）

@@ -98,11 +98,11 @@ var app = new Vue({
 });
 ```

-您注意到`this`关键字的用法了吗？ 为了从 HTML 引用`data`对象的属性，我们可以直接使用它们，因为我们使用`‘el’`关键字将特定的 HTML 部分与 Vue 实例挂钩。 但是，在`methods`内部，我们必须使用`‘this’`关键字指向 Vue 实例，然后访问`data`对象的属性。
+您注意到`this`关键字的用法了吗？ 为了从 HTML 引用`data`对象的属性，我们可以直接使用它们，因为我们使用`el`关键字将特定的 HTML 部分与 Vue 实例挂钩。 但是，在`methods`内部，我们必须使用`‘this’`关键字指向 Vue 实例，然后访问`data`对象的属性。

 ![click event with method](img/4226a5eb01a26b79a17a0465adc3b6af.png)

-单击该按钮，“说声你好”触发了`greet(‘howdy’)`方法，并且该方法中的代码被执行，从而向网页呈现“Howdy”。
+单击该按钮，“说声你好”触发了`greet('howdy')`方法，并且该方法中的代码被执行，从而向网页呈现“Howdy”。

 ## 事件修饰符

@@ -136,7 +136,7 @@ methods: {
 <button v-on:click.once="addOne">Add 1</button>
 ```

-使用事件修饰符`.once`，`click`事件将仅触发一次。 这意味着，无论单击按钮多少次，只要将`counter`的值增加到 1，`“addOne”`方法将仅被调用。
+使用事件修饰符`.once`，`click`事件将仅触发一次。 这意味着，无论单击按钮多少次，只要将`counter`的值增加到 1，`addOne`方法将仅被调用。

 ![.once event modifier](img/ecfa020fb75663bf3465034cc7d2100a.png)


--- a/docs/156.md
+++ b/docs/156.md
@@ -58,15 +58,15 @@ new Vue({

 但是，记住密码还是一直找 Google 麻烦吗？ 不用担心 就像`.once`，`.prevent`，`.self`等事件修饰符一样，Vue 为我们提供了用于大多数常用键的**键修饰符**。 清单是这样的

-*   。输入
-*   。标签
-*   .delete（同时捕获“删除”和“退格”键）
-*   。退出
-*   。空间
-*   .up
-*   。下
-*   。剩下
-*   。对
+*   `.enter`
+*   `.tab`
+*   `.delete`（同时捕获“删除”和“退格”键）
+*   `.esc`
+*   `.space`
+*   `.up`
+*   `.down`
+*   `.left`
+*   `.right`

 现在，您可以安全地用键修饰符`.enter`替换键码`13`，它将像超级按钮一样工作。 专注于按钮并单击键盘上的`Enter`，将显示一条警告消息，显示为`Hi`。

@@ -88,7 +88,7 @@ Vue.config.keyCodes.a = 65;
 <button v-on:keyup.a="greet">greet</button>
 ```

-在此，释放键“a”时，将触发键代码为`65`的`keyup`事件，并调用方法“`greet()`”。 Cakewalk！
+在此，释放键“`a`”时，将触发键代码为`65`的`keyup`事件，并调用方法“`greet()`”。 Cakewalk！

 ## 更多关于鼠标事件的例子！


--- a/docs/157.md
+++ b/docs/157.md
@@ -41,7 +41,7 @@ new Vue({
 });
 ```

-## v-bind 的简写
+## `v-bind`的简写

 让我们使用`v-bind`属性将 HTML `<a>`标记的`href`属性绑定到“`https://www.google.com`” URL，


--- a/docs/158.md
+++ b/docs/158.md
-# 14.使用 v 模型进行双向数据绑定
+# 14.使用`v-model`进行双向数据绑定

 > 原文： [https://javabeginnerstutorial.com/vue-js/14-two-way-binding-v-model/](https://javabeginnerstutorial.com/vue-js/14-two-way-binding-v-model/)

@@ -8,12 +8,12 @@

 *双向数据绑定*：这只是模型（Vue 实例中的`data`对象）和视图之间的关系。 对视图所做的任何更改（例如，由用户执行）将立即反映在基础 Vue 模型中，并将在视图中呈现此数据的所有位置进行更新。 换一种说法，

-1.  使用对 data 属性（模型）所做的更改来更新视图
+1.  使用对`data`属性（模型）所做的更改来更新视图
 2.  并且，只要在视图中进行更改，数据属性（模型）就会更新

 你的头在旋转吗？ 别担心！ 我们将通过一个例子来理解这个概念。

-## v-model 指令
+## `v-model`指令

 通常使用表单输入和控件创建这种双向绑定。 而`v-model`是用于实现该目标的指令！ 具体来说，以下是`v-model`所使用的确切 HTML 元素，

@@ -24,10 +24,10 @@

 ## 演练示例

-让我们以`<input>`元素为例，在网页上显示一个文本字段。 让我们在 Vue 实例的`data`对象中也具有“message”属性，该属性用作我们的 Vue 模型，并具有`<p>`标签以使用胡须语法（文本插值）呈现值。 现在，我们要
+让我们以`<input>`元素为例，在网页上显示一个文本字段。 让我们在 Vue 实例的`data`对象中也具有“`message`”属性，该属性用作我们的 Vue 模型，并具有`<p>`标签以使用胡须语法（文本插值）呈现值。 现在，我们要

-1.  用`message`属性的值填充文本字段，例如“hi”，即使用模型更新视图。
-2.  每当用户在文本字段中更改值“hi”时，都必须在数据属性`message`中进行更新，在我们的示例中，即使用视图和视图的更改来更新模型
+1.  用`message`属性的值填充文本字段，例如“`hi`”，即使用模型更新视图。
+2.  每当用户在文本字段中更改值“`hi`”时，都必须在数据属性`message`中进行更新，在我们的示例中，即使用视图和视图的更改来更新模型
 3.  同时将其呈现在`<p>`标签中

 通过将`v-model`指令添加到`<input>`标记并将“`message`”属性绑定到它，可以完成所有这三个步骤，

--- a/docs/159.md
+++ b/docs/159.md
@@ -2,7 +2,7 @@

 > 原文： [https://javabeginnerstutorial.com/vue-js/15-form-input-bindings/](https://javabeginnerstutorial.com/vue-js/15-form-input-bindings/)

-欢迎参加有约束力的讨论！ 现在我们已经了解了这个超级巨星`v-model`，它用于在表单元素上实现[双向数据绑定](https://javabeginnerstutorial.com/vue-js/14-two-way-binding-v-model/)，让我们通过选择正确的更新方式来直观地了解 Vue 如何在引擎盖下神奇地工作 基于是单选按钮还是复选框还是 select 元素的特定 HTML 元素。
+欢迎参加有约束力的讨论！ 现在我们已经了解了这个超级巨星`v-model`，它用于在表单元素上实现[双向数据绑定](https://javabeginnerstutorial.com/vue-js/14-two-way-binding-v-model/)，让我们通过选择正确的更新方式来直观地了解 Vue 如何在引擎盖下神奇地工作 基于是单选按钮还是复选框还是`select`元素的特定 HTML 元素。

 今天，我们将讨论以下内容，

@@ -51,7 +51,7 @@ new Vue({

 看下面的代码片段，

-index.html（代码段）
+`index.html`（代码段）

 ```java
 <div>
@@ -62,7 +62,7 @@ index.html（代码段）
 </div>
 ```

-index.js
+`index.js`

 ```java
 new Vue({
@@ -180,7 +180,7 @@ data: {

 ## 多选下拉菜单

-在这里，我们可以从下拉菜单中选择多个选项，因此 Vue 实例的 data 属性中`multiselect`变量的初始值是一个空数组。
+在这里，我们可以从下拉菜单中选择多个选项，因此 Vue 实例的`data`属性中`multiselect`变量的初始值是一个空数组。

 `index.html` （代码段）


--- a/docs/160.md
+++ b/docs/160.md
@@ -61,7 +61,7 @@ style.css

 使用 Vue，通过将其作为对象传递给`v-bind:class`来动态切换此类非常容易。

-index.html（代码段）
+`index.html`（代码段）

 ```java
 <div id="app">
@@ -78,7 +78,7 @@ index.html（代码段）

 快捷方式`:`用于此处的指令`v-bind`。

-index.js
+`index.js`

 ```java
 new Vue({