Skip to content

Commit 74a8b5e

Browse files
AnHongpengJustineo
authored andcommitted
docs: 替换教程中所有“特性”为 attribute (#1050)
1 parent d5dc639 commit 74a8b5e

File tree

6 files changed

+42
-42
lines changed

6 files changed

+42
-42
lines changed

src/v2/guide/components-custom-events.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ this.$emit('myEvent')
2929

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

3434
```js
3535
Vue.component('base-checkbox', {
@@ -129,7 +129,7 @@ Vue.component('base-input', {
129129
})
130130
```
131131

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

134134
## `.sync` 修饰符
135135

src/v2/guide/components-dynamic-async.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ order: 105
88
99
## 在动态组件上使用 `keep-alive`
1010

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

1313
{% codeblock lang:html %}
1414
<component v-bind:is="currentTabComponent"></component>

src/v2/guide/components-edge-cases.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ var map = this.$parent.map || this.$parent.$parent.map
8585

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

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

9090
```html
9191
<base-input ref="usernameInput"></base-input>
@@ -320,7 +320,7 @@ components: {
320320

321321
### 内联模板
322322

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

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

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

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

374374
``` js
375375
Vue.component('terms-of-service', {

src/v2/guide/components-slots.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ order: 104
66

77
> 该页面假设你已经阅读过了[组件基础](components.html)。如果你还对组件不太了解,推荐你先阅读它。
88
9-
> 在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 `v-slot` 指令)。它取代了 `slot``slot-scope` 这两个目前已被废弃但未被移除且仍在[文档中](#废弃了的语法)的特性。新语法的由来可查阅这份 [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md)
9+
> 在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 `v-slot` 指令)。它取代了 `slot``slot-scope` 这两个目前已被废弃但未被移除且仍在[文档中](#废弃了的语法)的 attribute。新语法的由来可查阅这份 [RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md)
1010
1111
## 插槽内容
1212

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

131131
## 具名插槽
132132

133-
> 自 2.6.0 起有所更新。已废弃的使用 `slot` 特性的语法在[这里](#废弃了的语法)
133+
> 自 2.6.0 起有所更新。已废弃的使用 `slot` attribute 的语法在[这里](#废弃了的语法)
134134
135135
有时我们需要多个插槽。例如对于一个带有如下模板的 `<base-layout>` 组件:
136136

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

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

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

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

226226
## 作用域插槽
227227

228-
> 自 2.6.0 起有所更新。已废弃的使用 `slot-scope` 特性的语法在[这里](#废弃了的语法)
228+
> 自 2.6.0 起有所更新。已废弃的使用 `slot-scope` attribute 的语法在[这里](#废弃了的语法)
229229
230230
有时让插槽内容能够访问子组件中才有的数据是很有用的。例如,设想一个带有如下模板的 `<current-user>` 组件:
231231

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

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

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

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

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

260260
``` html
261261
<current-user>
@@ -449,13 +449,13 @@ function (slotProps) {
449449

450450
## 废弃了的语法
451451

452-
> `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 中。
452+
> `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 中。
453453
454-
### 带有 `slot` 特性的具名插槽
454+
### 带有 `slot` attribute 的具名插槽
455455

456456
> 自 2.6.0 起<abbr title="在所有 Vue 2.x 版本中仍被支持,但不再推荐使用。">被废弃</abbr>。新推荐的语法请查阅[这里](#具名插槽)
457457
458-
`<template>` 上使用特殊的 `slot` 特性,可以将内容从父级传给具名插槽 (把[这里](#具名插槽)提到过的 `<base-layout>` 组件作为示例):
458+
`<template>` 上使用特殊的 `slot` attribute,可以将内容从父级传给具名插槽 (把[这里](#具名插槽)提到过的 `<base-layout>` 组件作为示例):
459459

460460
```html
461461
<base-layout>
@@ -472,7 +472,7 @@ function (slotProps) {
472472
</base-layout>
473473
```
474474

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

477477
``` html
478478
<base-layout>
@@ -502,11 +502,11 @@ function (slotProps) {
502502
</div>
503503
```
504504

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

507507
> 自 2.6.0 起<abbr title="在所有 Vue 2.x 版本中仍被支持,但不再推荐使用。">被废弃</abbr>。新推荐的语法请查阅[这里](#作用域插槽)
508508
509-
`<template>` 上使用特殊的 `slot-scope` 特性,可以接收传递给插槽的 prop (把[这里](#作用域插槽)提到过的 `<slot-example>` 组件作为示例):
509+
`<template>` 上使用特殊的 `slot-scope` attribute,可以接收传递给插槽的 prop (把[这里](#作用域插槽)提到过的 `<slot-example>` 组件作为示例):
510510

511511
``` html
512512
<slot-example>
@@ -528,7 +528,7 @@ function (slotProps) {
528528
</slot-example>
529529
```
530530

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

533533
``` html
534534
<slot-example>

src/v2/guide/render-function.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ createElement(
165165

166166
### 深入数据对象
167167

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

170170
``` js
171171
{
@@ -181,7 +181,7 @@ createElement(
181181
color: 'red',
182182
fontSize: '14px'
183183
},
184-
// 普通的 HTML 特性
184+
// 普通的 HTML attribute
185185
attrs: {
186186
id: 'foo'
187187
},
@@ -516,7 +516,7 @@ Vue.component('my-component', {
516516
})
517517
```
518518

519-
> 注意:在 2.3.0 之前的版本中,如果一个函数式组件想要接收 prop,则 `props` 选项是必须的。在 2.3.0 或以上的版本中,你可以省略 `props` 选项,所有组件上的特性都会被自动隐式解析为 prop。
519+
> 注意:在 2.3.0 之前的版本中,如果一个函数式组件想要接收 prop,则 `props` 选项是必须的。在 2.3.0 或以上的版本中,你可以省略 `props` 选项,所有组件上的 attribute 都会被自动隐式解析为 prop。
520520
>
521521
> 当使用函数式组件时,该引用将会是 HTMLElement,因为他们是无状态的也是无实例的。
522522
@@ -584,25 +584,25 @@ Vue.component('smart-list', {
584584
})
585585
```
586586

587-
### 向子元素或子组件传递特性和事件
587+
### 向子元素或子组件传递 attribute 和事件
588588

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

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

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

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

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

607607
```html
608608
<template functional>

0 commit comments

Comments
 (0)