Skip to content

docs: 教程->基础中的所有“特性”替换为 attribute #1048

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from Jan 14, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/v2/guide/components.md
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ Vue.component('my-component-name', {

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

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

```js
Vue.component('blog-post', {
Expand All @@ -155,7 +155,7 @@ Vue.component('blog-post', {

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

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

```html
<blog-post title="My journey with Vue"></blog-post>
Expand Down Expand Up @@ -448,7 +448,7 @@ methods: {

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

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

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

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

```html
<!-- 组件会在 `currentTabComponent` 改变时改变 -->
Expand Down Expand Up @@ -619,7 +619,7 @@ new Vue({
</table>
```

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

``` html
<table>
Expand Down
2 changes: 1 addition & 1 deletion src/v2/guide/events.md
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ Vue 还对应 [`addEventListener` 中的 `passive` 选项](https://developer.moz

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

使用 `keyCode` 特性也是允许的
使用 `keyCode` attribute 也是允许的

``` html
<input v-on:keyup.13="submit">
Expand Down
4 changes: 2 additions & 2 deletions src/v2/guide/forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ order: 10

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

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

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

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

### 单选按钮

Expand Down
12 changes: 6 additions & 6 deletions src/v2/guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ var app = new Vue({

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

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

``` html
<div id="app-2">
Expand Down Expand Up @@ -109,9 +109,9 @@ var app2 = new Vue({
</script>
{% endraw %}

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

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

## 条件与循环

Expand Down Expand Up @@ -148,7 +148,7 @@ var app3 = new Vue({

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

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

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

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

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

你可能已经注意到 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` 特性。但是,还是有几个关键差别:
你可能已经注意到 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。但是,还是有几个关键差别:

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

Expand Down