Skip to content

docs: 替换教程中所有“特性”为 attribute #1050

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 15, 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
4 changes: 2 additions & 2 deletions src/v2/guide/components-custom-events.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ this.$emit('myEvent')

> 2.2.0+ 新增

一个组件上的 `v-model` 默认会利用名为 `value` 的 prop 和名为 `input` 的事件,但是像单选框、复选框等类型的输入控件可能会将 `value` 特性用于[不同的目的](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Value)。`model` 选项可以用来避免这样的冲突:
一个组件上的 `v-model` 默认会利用名为 `value` 的 prop 和名为 `input` 的事件,但是像单选框、复选框等类型的输入控件可能会将 `value` attribute 用于[不同的目的](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Value)。`model` 选项可以用来避免这样的冲突:

```js
Vue.component('base-checkbox', {
Expand Down Expand Up @@ -129,7 +129,7 @@ Vue.component('base-input', {
})
```

现在 `<base-input>` 组件是一个**完全透明的包裹器**了,也就是说它可以完全像一个普通的 `<input>` 元素一样使用了:所有跟它相同的特性和监听器的都可以工作
现在 `<base-input>` 组件是一个**完全透明的包裹器**了,也就是说它可以完全像一个普通的 `<input>` 元素一样使用了:所有跟它相同的 attribute 和监听器的都可以工作

## `.sync` 修饰符

Expand Down
2 changes: 1 addition & 1 deletion src/v2/guide/components-dynamic-async.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ order: 105

## 在动态组件上使用 `keep-alive`

我们之前曾经在一个多标签的界面中使用 `is` 特性来切换不同的组件
我们之前曾经在一个多标签的界面中使用 `is` attribute 来切换不同的组件

{% codeblock lang:html %}
<component v-bind:is="currentTabComponent"></component>
Expand Down
6 changes: 3 additions & 3 deletions src/v2/guide/components-edge-cases.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ var map = this.$parent.map || this.$parent.$parent.map

### 访问子组件实例或子元素

尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的,你可以通过 `ref` 特性为这个子组件赋予一个 ID 引用。例如:
尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的,你可以通过 `ref` 这个 attribute 为子组件赋予一个 ID 引用。例如:

```html
<base-input ref="usernameInput"></base-input>
Expand Down Expand Up @@ -320,7 +320,7 @@ components: {

### 内联模板

当 `inline-template` 这个特殊的特性出现在一个子组件上时,这个组件将会使用其里面的内容作为模板,而不是将其作为被分发的内容。这使得模板的撰写工作更加灵活。
当 `inline-template` 这个特殊的 attribute 出现在一个子组件上时,这个组件将会使用其里面的内容作为模板,而不是将其作为被分发的内容。这使得模板的撰写工作更加灵活。

``` html
<my-component inline-template>
Expand Down Expand Up @@ -369,7 +369,7 @@ x-template 需要定义在 Vue 所属的 DOM 元素外。

### 通过 `v-once` 创建低开销的静态组件

渲染普通的 HTML 元素在 Vue 中是非常快速的,但有的时候你可能有一个组件,这个组件包含了**大量**静态内容。在这种情况下,你可以在根元素上添加 `v-once` 特性以确保这些内容只计算一次然后缓存起来,就像这样:
渲染普通的 HTML 元素在 Vue 中是非常快速的,但有的时候你可能有一个组件,这个组件包含了**大量**静态内容。在这种情况下,你可以在根元素上添加 `v-once` attribute 以确保这些内容只计算一次然后缓存起来,就像这样:

``` js
Vue.component('terms-of-service', {
Expand Down
28 changes: 14 additions & 14 deletions src/v2/guide/components-slots.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ order: 104

> 该页面假设你已经阅读过了[组件基础](components.html)。如果你还对组件不太了解,推荐你先阅读它。

> 在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 `v-slot` 指令)。它取代了 `slot` 和 `slot-scope` 这两个目前已被废弃但未被移除且仍在[文档中](#废弃了的语法)的特性。新语法的由来可查阅这份 [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md)。
> 在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 `v-slot` 指令)。它取代了 `slot` 和 `slot-scope` 这两个目前已被废弃但未被移除且仍在[文档中](#废弃了的语法)的 attribute。新语法的由来可查阅这份 [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md)。

## 插槽内容

Expand Down Expand Up @@ -130,7 +130,7 @@ Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 [Web C

## 具名插槽

> 自 2.6.0 起有所更新。已废弃的使用 `slot` 特性的语法在[这里](#废弃了的语法)。
> 自 2.6.0 起有所更新。已废弃的使用 `slot` attribute 的语法在[这里](#废弃了的语法)。

有时我们需要多个插槽。例如对于一个带有如下模板的 `<base-layout>` 组件:

Expand All @@ -148,7 +148,7 @@ Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 [Web C
</div>
```

对于这样的情况,`<slot>` 元素有一个特殊的特性:`name`。这个特性可以用来定义额外的插槽
对于这样的情况,`<slot>` 元素有一个特殊的 attribute:`name`。这个 attribute 可以用来定义额外的插槽

``` html
<div class="container">
Expand Down Expand Up @@ -221,11 +221,11 @@ Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 [Web C
</div>
```

注意 **`v-slot` 只能添加在 `<template>` 上** (只有[一种例外情况](#独占默认插槽的缩写语法)),这一点和已经废弃的 [`slot` 特性](#废弃了的语法)不同。
注意 **`v-slot` 只能添加在 `<template>` 上** (只有[一种例外情况](#独占默认插槽的缩写语法)),这一点和已经废弃的 [`slot` attribute](#废弃了的语法)不同。

## 作用域插槽

> 自 2.6.0 起有所更新。已废弃的使用 `slot-scope` 特性的语法在[这里](#废弃了的语法)。
> 自 2.6.0 起有所更新。已废弃的使用 `slot-scope` attribute 的语法在[这里](#废弃了的语法)。

有时让插槽内容能够访问子组件中才有的数据是很有用的。例如,设想一个带有如下模板的 `<current-user>` 组件:

Expand All @@ -245,7 +245,7 @@ Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 [Web C

然而上述代码不会正常工作,因为只有 `<current-user>` 组件可以访问到 `user` 而我们提供的内容是在父级渲染的。

为了让 `user` 在父级的插槽内容中可用,我们可以将 `user` 作为 `<slot>` 元素的一个特性绑定上去
为了让 `user` 在父级的插槽内容中可用,我们可以将 `user` 作为 `<slot>` 元素的一个 attribute 绑定上去

``` html
<span>
Expand All @@ -255,7 +255,7 @@ Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 [Web C
</span>
```

绑定在 `<slot>` 元素上的特性被称为**插槽 prop**。现在在父级作用域中,我们可以使用带值的 `v-slot` 来定义我们提供的插槽 prop 的名字:
绑定在 `<slot>` 元素上的 attribute 被称为**插槽 prop**。现在在父级作用域中,我们可以使用带值的 `v-slot` 来定义我们提供的插槽 prop 的名字:

``` html
<current-user>
Expand Down Expand Up @@ -449,13 +449,13 @@ function (slotProps) {

## 废弃了的语法

> `v-slot` 指令自 Vue 2.6.0 起被引入,提供更好的支持 `slot` 和 `slot-scope` 特性的 API 替代方案。`v-slot` 完整的由来参见这份 [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md)。在接下来所有的 2.x 版本中 `slot` 和 `slot-scope` 特性仍会被支持,但已经被官方废弃且不会出现在 Vue 3 中。
> `v-slot` 指令自 Vue 2.6.0 起被引入,提供更好的支持 `slot` 和 `slot-scope` attribute 的 API 替代方案。`v-slot` 完整的由来参见这份 [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md)。在接下来所有的 2.x 版本中 `slot` 和 `slot-scope` attribute 仍会被支持,但已经被官方废弃且不会出现在 Vue 3 中。

### 带有 `slot` 特性的具名插槽
### 带有 `slot` attribute 的具名插槽

> 自 2.6.0 起<abbr title="在所有 Vue 2.x 版本中仍被支持,但不再推荐使用。">被废弃</abbr>。新推荐的语法请查阅[这里](#具名插槽)。

在 `<template>` 上使用特殊的 `slot` 特性,可以将内容从父级传给具名插槽 (把[这里](#具名插槽)提到过的 `<base-layout>` 组件作为示例):
在 `<template>` 上使用特殊的 `slot` attribute,可以将内容从父级传给具名插槽 (把[这里](#具名插槽)提到过的 `<base-layout>` 组件作为示例):

```html
<base-layout>
Expand All @@ -472,7 +472,7 @@ function (slotProps) {
</base-layout>
```

或者直接把 `slot` 特性用在一个普通元素上
或者直接把 `slot` attribute 用在一个普通元素上

``` html
<base-layout>
Expand Down Expand Up @@ -502,11 +502,11 @@ function (slotProps) {
</div>
```

### 带有 `slot-scope` 特性的作用域插槽
### 带有 `slot-scope` attribute 的作用域插槽

> 自 2.6.0 起<abbr title="在所有 Vue 2.x 版本中仍被支持,但不再推荐使用。">被废弃</abbr>。新推荐的语法请查阅[这里](#作用域插槽)。

在 `<template>` 上使用特殊的 `slot-scope` 特性,可以接收传递给插槽的 prop (把[这里](#作用域插槽)提到过的 `<slot-example>` 组件作为示例):
在 `<template>` 上使用特殊的 `slot-scope` attribute,可以接收传递给插槽的 prop (把[这里](#作用域插槽)提到过的 `<slot-example>` 组件作为示例):

``` html
<slot-example>
Expand All @@ -528,7 +528,7 @@ function (slotProps) {
</slot-example>
```

`slot-scope` 特性也可以直接用于非 `<template>` 元素 (包括组件):
`slot-scope` attribute 也可以直接用于非 `<template>` 元素 (包括组件):

``` html
<slot-example>
Expand Down
16 changes: 8 additions & 8 deletions src/v2/guide/render-function.md
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ createElement(

### 深入数据对象

有一点要注意:正如 `v-bind:class` 和 `v-bind:style` 在模板语法中会被特别对待一样,它们在 VNode 数据对象中也有对应的顶层字段。该对象也允许你绑定普通的 HTML 特性,也允许绑定如 `innerHTML` 这样的 DOM 属性 (这会覆盖 `v-html` 指令)。
有一点要注意:正如 `v-bind:class` 和 `v-bind:style` 在模板语法中会被特别对待一样,它们在 VNode 数据对象中也有对应的顶层字段。该对象也允许你绑定普通的 HTML attribute,也允许绑定如 `innerHTML` 这样的 DOM 属性 (这会覆盖 `v-html` 指令)。

``` js
{
Expand All @@ -181,7 +181,7 @@ createElement(
color: 'red',
fontSize: '14px'
},
// 普通的 HTML 特性
// 普通的 HTML attribute
attrs: {
id: 'foo'
},
Expand Down Expand Up @@ -516,7 +516,7 @@ Vue.component('my-component', {
})
```

> 注意:在 2.3.0 之前的版本中,如果一个函数式组件想要接收 prop,则 `props` 选项是必须的。在 2.3.0 或以上的版本中,你可以省略 `props` 选项,所有组件上的特性都会被自动隐式解析为 prop。
> 注意:在 2.3.0 之前的版本中,如果一个函数式组件想要接收 prop,则 `props` 选项是必须的。在 2.3.0 或以上的版本中,你可以省略 `props` 选项,所有组件上的 attribute 都会被自动隐式解析为 prop。
>
> 当使用函数式组件时,该引用将会是 HTMLElement,因为他们是无状态的也是无实例的。

Expand Down Expand Up @@ -584,25 +584,25 @@ Vue.component('smart-list', {
})
```

### 向子元素或子组件传递特性和事件
### 向子元素或子组件传递 attribute 和事件

在普通组件中,没有被定义为 prop 的特性会自动添加到组件的根元素上,将已有的同名特性进行替换或与其进行[智能合并](class-and-style.html)。
在普通组件中,没有被定义为 prop 的 attribute 会自动添加到组件的根元素上,将已有的同名 attribute 进行替换或与其进行[智能合并](class-and-style.html)。

然而函数式组件要求你显式定义该行为:

```js
Vue.component('my-functional-button', {
functional: true,
render: function (createElement, context) {
// 完全透传任何特性、事件监听器、子节点等。
// 完全透传任何 attribute、事件监听器、子节点等。
return createElement('button', context.data, context.children)
}
})
```

通过向 `createElement` 传入 `context.data` 作为第二个参数,我们就把 `my-functional-button` 上面所有的特性和事件监听器都传递下去了。事实上这是非常透明的,以至于那些事件甚至并不要求 `.native` 修饰符。
通过向 `createElement` 传入 `context.data` 作为第二个参数,我们就把 `my-functional-button` 上面所有的 attribute 和事件监听器都传递下去了。事实上这是非常透明的,以至于那些事件甚至并不要求 `.native` 修饰符。

如果你使用基于模板的函数式组件,那么你还需要手动添加特性和监听器。因为我们可以访问到其独立的上下文内容,所以我们可以使用 `data.attrs` 传递任何 HTML 特性,也可以使用 `listeners` *(即 `data.on` 的别名)* 传递任何事件监听器。
如果你使用基于模板的函数式组件,那么你还需要手动添加 attribute 和监听器。因为我们可以访问到其独立的上下文内容,所以我们可以使用 `data.attrs` 传递任何 HTML attribute,也可以使用 `listeners` *(即 `data.on` 的别名)* 传递任何事件监听器。

```html
<template functional>
Expand Down
Loading