Skip to content

Commit d5dc639

Browse files
AnHongpengJustineo
authored andcommitted
fix: 教程->基础中的所有特性替换为 attribute (#1048)
1 parent d543fcf commit d5dc639

File tree

4 files changed

+14
-14
lines changed

4 files changed

+14
-14
lines changed

src/v2/guide/components.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ Vue.component('my-component-name', {
144144

145145
早些时候,我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话,它是没有办法使用的。这也正是 prop 的由来。
146146

147-
Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题,我们可以用一个 `props` 选项将其包含在该组件可接受的 prop 列表中:
147+
Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候,它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题,我们可以用一个 `props` 选项将其包含在该组件可接受的 prop 列表中:
148148

149149
```js
150150
Vue.component('blog-post', {
@@ -155,7 +155,7 @@ Vue.component('blog-post', {
155155

156156
一个组件默认可以拥有任意数量的 prop,任何值都可以传递给任何 prop。在上述模板中,你会发现我们能够在组件实例中访问这个值,就像访问 `data` 中的值一样。
157157

158-
一个 prop 被注册之后,你就可以像这样把数据作为一个自定义特性传递进来
158+
一个 prop 被注册之后,你就可以像这样把数据作为一个自定义 attribute 传递进来
159159

160160
```html
161161
<blog-post title="My journey with Vue"></blog-post>
@@ -448,7 +448,7 @@ methods: {
448448

449449
为了让它正常工作,这个组件内的 `<input>` 必须:
450450

451-
- 将其 `value` 特性绑定到一个名叫 `value` 的 prop 上
451+
- 将其 `value` attribute 绑定到一个名叫 `value` 的 prop 上
452452
- 在其 `input` 事件被触发时,将新的值通过自定义的 `input` 事件抛出
453453

454454
写成代码之后是这样的:
@@ -589,7 +589,7 @@ new Vue({
589589
</style>
590590
{% endraw %}
591591

592-
上述内容可以通过 Vue 的 `<component>` 元素加一个特殊的 `is` 特性来实现
592+
上述内容可以通过 Vue 的 `<component>` 元素加一个特殊的 `is` attribute 来实现
593593

594594
```html
595595
<!-- 组件会在 `currentTabComponent` 改变时改变 -->
@@ -619,7 +619,7 @@ new Vue({
619619
</table>
620620
```
621621

622-
这个自定义组件 `<blog-post-row>` 会被作为无效的内容提升到外部,并导致最终渲染结果出错。幸好这个特殊的 `is` 特性给了我们一个变通的办法
622+
这个自定义组件 `<blog-post-row>` 会被作为无效的内容提升到外部,并导致最终渲染结果出错。幸好这个特殊的 `is` attribute 给了我们一个变通的办法
623623

624624
``` html
625625
<table>

src/v2/guide/events.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ Vue 还对应 [`addEventListener` 中的 `passive` 选项](https://developer.moz
248248

249249
<p class="tip">`keyCode` 的事件用法[已经被废弃了](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode)并可能不会被最新的浏览器支持。</p>
250250

251-
使用 `keyCode` 特性也是允许的
251+
使用 `keyCode` attribute 也是允许的
252252

253253
``` html
254254
<input v-on:keyup.13="submit">

src/v2/guide/forms.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ order: 10
1010

1111
你可以用 `v-model` 指令在表单 `<input>``<textarea>``<select>` 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 `v-model` 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
1212

13-
<p class="tip">`v-model` 会忽略所有表单元素的 `value`、`checked`、`selected` 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 `data` 选项中声明初始值。</p>
13+
<p class="tip">`v-model` 会忽略所有表单元素的 `value`、`checked`、`selected` attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 `data` 选项中声明初始值。</p>
1414

1515
`v-model` 在内部为不同的输入元素使用不同的属性并抛出不同的事件:
1616
- text 和 textarea 元素使用 `value` 属性和 `input` 事件;
@@ -358,7 +358,7 @@ vm.toggle === 'yes'
358358
vm.toggle === 'no'
359359
```
360360

361-
<p class="tip">这里的 `true-value` 和 `false-value` 特性并不会影响输入控件的 `value` 特性,因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交,(比如“yes”或“no”),请换用单选按钮。</p>
361+
<p class="tip">这里的 `true-value` 和 `false-value` attribute 并不会影响输入控件的 `value` attribute,因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交,(比如“yes”或“no”),请换用单选按钮。</p>
362362

363363
### 单选按钮
364364

src/v2/guide/index.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ var app = new Vue({
7676

7777
我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是**响应式的**。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 `app.message` 的值,你将看到上例相应地更新。
7878

79-
除了文本插值,我们还可以像这样来绑定元素特性
79+
除了文本插值,我们还可以像这样来绑定元素 attribute
8080

8181
``` html
8282
<div id="app-2">
@@ -109,9 +109,9 @@ var app2 = new Vue({
109109
</script>
110110
{% endraw %}
111111

112-
这里我们遇到了一点新东西。你看到的 `v-bind` 特性被称为**指令**。指令带有前缀 `v-`,以表示它们是 Vue 提供的特殊特性。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 `title` 特性和 Vue 实例的 `message` 属性保持一致”。
112+
这里我们遇到了一点新东西。你看到的 `v-bind` attribute 被称为**指令**。指令带有前缀 `v-`,以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 `title` attribute 和 Vue 实例的 `message` 属性保持一致”。
113113

114-
如果你再次打开浏览器的 JavaScript 控制台,输入 `app2.message = '新消息'`,就会再一次看到这个绑定了 `title` 特性的 HTML 已经进行了更新。
114+
如果你再次打开浏览器的 JavaScript 控制台,输入 `app2.message = '新消息'`,就会再一次看到这个绑定了 `title` attribute 的 HTML 已经进行了更新。
115115

116116
## 条件与循环
117117

@@ -148,7 +148,7 @@ var app3 = new Vue({
148148

149149
继续在控制台输入 `app3.seen = false`,你会发现之前显示的消息消失了。
150150

151-
这个例子演示了我们不仅可以把数据绑定到 DOM 文本或特性,还可以绑定到 DOM **结构**。此外,Vue 也提供一个强大的过渡效果系统,可以在 Vue 插入/更新/移除元素时自动应用[过渡效果](transitions.html)
151+
这个例子演示了我们不仅可以把数据绑定到 DOM 文本或 attribute,还可以绑定到 DOM **结构**。此外,Vue 也提供一个强大的过渡效果系统,可以在 Vue 插入/更新/移除元素时自动应用[过渡效果](transitions.html)
152152

153153
还有其它很多指令,每个都有特殊的功能。例如,`v-for` 指令可以绑定数组的数据来渲染一个项目列表:
154154

@@ -308,7 +308,7 @@ var app = new Vue(...)
308308
``` js
309309
Vue.component('todo-item', {
310310
// todo-item 组件现在接受一个
311-
// "prop",类似于一个自定义特性
311+
// "prop",类似于一个自定义 attribute
312312
// 这个 prop 名为 todo。
313313
props: ['todo'],
314314
template: '<li>{{ todo.text }}</li>'
@@ -392,7 +392,7 @@ var app7 = new Vue({
392392

393393
### 与自定义元素的关系
394394

395-
你可能已经注意到 Vue 组件非常类似于**自定义元素**——它是 [Web 组件规范](https://www.w3.org/wiki/WebComponents/)的一部分,这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md)`is` 特性。但是,还是有几个关键差别:
395+
你可能已经注意到 Vue 组件非常类似于**自定义元素**——它是 [Web 组件规范](https://www.w3.org/wiki/WebComponents/)的一部分,这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md)`is` attribute。但是,还是有几个关键差别:
396396

397397
1. Web Components 规范已经完成并通过,但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。相比之下,Vue 组件不需要任何 polyfill,并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时,Vue 组件也可以包装于原生自定义元素之内。
398398

0 commit comments

Comments
 (0)