Skip to content

Commit 3889093

Browse files
authored
Synced recent (docs) updates (#699)
* synced docs updates except /guide/components* and /cookbook * Update render-function.md
1 parent dd6ab16 commit 3889093

File tree

7 files changed

+48
-26
lines changed

7 files changed

+48
-26
lines changed

src/v2/api/index.md

+23-13
Original file line numberDiff line numberDiff line change
@@ -456,7 +456,11 @@ type: api
456456
})
457457
```
458458

459-
<p class="tip">注意,__不应该对 `data` 属性使用箭头函数__ (例如`data: () => { return { a: this.myProp }}`)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,`this.myProp` 将是 undefined。</p>
459+
注意,如果你为 `data` 属性使用了箭头函数,则 `this` 不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。
460+
461+
```js
462+
data: vm => ({ a: vm.myProp })
463+
```
460464

461465
### props
462466

@@ -528,7 +532,13 @@ type: api
528532

529533
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
530534

531-
<p class="tip">注意,__不应该使用箭头函数来定义计算属性函数__ (例如 `aDouble: () => this.a * 2`)。理由是箭头函数绑定了父级作用域的上下文,所以 `this` 将不会按照期望指向 Vue 实例,`this.a` 将是 undefined。</p>
535+
注意如果你为一个计算属性使用了箭头函数,则 `this` 不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。
536+
537+
```js
538+
computed: {
539+
aDouble: vm => vm.a * 2
540+
}
541+
```
532542

533543
 计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是__不会__被更新的。
534544

@@ -1393,7 +1403,7 @@ type: api
13931403
13941404
- **详细**:
13951405
1396-
 一个对象,持有已注册过 `ref` 的所有子组件
1406+
一个对象,持有注册过 [`ref` 特性](#ref) 的所有 DOM 元素和组件实例
13971407
13981408
- **参考**:
13991409
- [子组件引用](../guide/components.html#子组件索引)
@@ -1419,7 +1429,7 @@ type: api
14191429
14201430
- **详细**:
14211431
1422-
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (`class``style` 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (`class``style` 除外),并且可以通过 `v-bind="$attrs"` 传入内部组件——在创建更高层次的组件时非常有用
1432+
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (`class``style` 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (`class``style` 除外),并且可以通过 `v-bind="$attrs"` 传入内部组件——在创建透明的包裹组件时非常有用
14231433
14241434
### vm.$listeners
14251435
@@ -1852,21 +1862,18 @@ type: api
18521862
18531863
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。
18541864
1855-
从 `2.4.0` 开始,`v-on` 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时,是不支持任何修饰器的。
1856-
1857-
用在普通元素上时,只能监听 **原生 DOM 事件**。用在自定义元素组件上时,也可以监听子组件触发的**自定义事件**。
1865+
用在普通元素上时,只能监听[**原生 DOM 事件**](https://developer.mozilla.org/zh-CN/docs/Web/Events)。用在自定义元素组件上时,也可以监听子组件触发的**自定义事件**。
18581866
18591867
在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个 `$event` 属性:`v-on:click="handle('ok', $event)"`。
18601868
1869+
从 `2.4.0` 开始,`v-on` 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时,是不支持任何修饰器的。
1870+
18611871
- **示例**:
18621872
18631873
```html
18641874
<!-- 方法处理器 -->
18651875
<button v-on:click="doThis"></button>
18661876
1867-
<!-- 对象语法 (2.4.0+) -->
1868-
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
1869-
18701877
<!-- 内联语句 -->
18711878
<button v-on:click="doThat('hello', $event)"></button>
18721879
@@ -1893,6 +1900,9 @@ type: api
18931900
18941901
<!-- 点击回调只会触发一次 -->
18951902
<button v-on:click.once="doThis"></button>
1903+
1904+
<!-- 对象语法 (2.4.0+) -->
1905+
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
18961906
```
18971907
18981908
在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器):
@@ -2113,11 +2123,11 @@ type: api
21132123
`ref` 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 `$refs` 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:
21142124
21152125
``` html
2116-
<!-- vm.$refs.p will be the DOM node -->
2126+
<!-- `vm.$refs.p` will be the DOM node -->
21172127
<p ref="p">hello</p>
21182128
2119-
<!-- vm.$refs.child will be the child comp instance -->
2120-
<child-comp ref="child"></child-comp>
2129+
<!-- `vm.$refs.child` will be the child component instance -->
2130+
<child-component ref="child"></child-component>
21212131
```
21222132
21232133
当 `v-for` 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。

src/v2/guide/index.md

+9-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ order: 2
88

99
Vue (读音 /vjuː/,类似于 **view**) 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与[现代化的工具链](single-file-components.html)以及各种[支持类库](https://github.com/vuejs/awesome-vue#libraries--plugins)结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
1010

11-
如果你想在深入学习 Vue 之前对它有更多了解,我们<a id="modal-player" href="javascript:;">制作了一个视频</a>,带您了解其核心概念和一个示例工程。
11+
如果你想在深入学习 Vue 之前对它有更多了解,我们<a id="modal-player" href="#">制作了一个视频</a>,带您了解其核心概念和一个示例工程。
1212

1313
如果你已经是有经验的前端开发者,想知道 Vue 与其它库/框架有哪些区别,请查看[对比其它框架](comparison.html)
1414

@@ -19,6 +19,14 @@ Vue (读音 /vjuː/,类似于 **view**) 是一套用于构建用户界面的**
1919
尝试 Vue.js 最简单的方法是使用 [JSFiddle 上的 Hello World 例子](https://jsfiddle.net/chrisvfritz/50wL7mdz/)。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。或者你也可以<a href="https://gist.githubusercontent.com/chrisvfritz/7f8d7d63000b48493c336e48b3db3e52/raw/ed60c4e5d5c6fec48b0921edaed0cb60be30e87c/index.html" target="_blank" download="index.html">创建一个 <code>.html</code> 文件<a/>,然后通过如下方式引入 Vue:
2020

2121
``` html
22+
<!-- 开发环境版本,包含了用帮助的命令行警告 -->
23+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
24+
```
25+
26+
或者:
27+
28+
``` html
29+
<!-- 生产环境版本,优化了尺寸和速度 -->
2230
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2331
```
2432

src/v2/guide/instance.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ new Vue({
9696
<div id="app">
9797
<p>{{ foo }}</p>
9898
<!-- 这里的 `foo` 不会更新! -->
99-
<button @click="foo = 'baz'">Change it</button>
99+
<button v-on:click="foo = 'baz'">Change it</button>
100100
</div>
101101
```
102102

src/v2/guide/render-function.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -136,8 +136,8 @@ return createElement('h1', this.blogTitle)
136136
// @returns {VNode}
137137
createElement(
138138
// {String | Object | Function}
139-
 // 一个 HTML 标签字符串,组件选项对象,或者一个返回值
140-
// 类型为 String/Object 的函数,必要参数
139+
 // 一个 HTML 标签字符串,组件选项对象,或者
140+
// 解析上述任何一种的一个 async 异步函数,必要参数
141141
 'div',
142142

143143
// {Object}
@@ -490,7 +490,7 @@ new Vue({
490490
## 函数式组件
491491

492492
之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法。它只是一个接收参数的函数。
493-
在这个例子中,我们标记组件为 `functional`,这意味它是无状态 (没有 `data`),无实例 (没有 `this` 上下文)。
493+
在这个例子中,我们标记组件为 `functional`,这意味它是无状态 (没有[响应式数据](../api/#选项-数据)),无实例 (没有 `this` 上下文)。
494494
一个 **函数式组件** 就像这样:
495495

496496
``` js
@@ -519,12 +519,12 @@ Vue.component('my-component', {
519519

520520
组件需要的一切都是通过上下文传递,包括:
521521

522-
- `props`提供 props 的对象
522+
- `props`提供所有 prop 的对象
523523
- `children`: VNode 子节点的数组
524-
- `slots`: slots 对象
525-
- `data`:传递给组件的 data 对象
524+
- `slots`: 返回所有插槽的对象的函数
525+
- `data`:传递给组件的[数据对象](#深入-data-对象),并将这个组件作为第二个参数传入 `createElement`
526526
- `parent`:对父组件的引用
527-
- `listeners`: (2.3.0+) 一个包含了组件上所注册的 `v-on` 侦听器的对象。这只是一个指向 `data.on` 的别名。
527+
- `listeners`: (2.3.0+) 一个包含了所有在父组件上注册的事件侦听器的对象。这只是一个指向 `data.on` 的别名。
528528
- `injections`: (2.3.0+) 如果使用了 [`inject`](../api/#provide-inject) 选项,则该对象包含了应当被注入的属性。
529529

530530
在添加 `functional: true` 之后,锚点标题组件的 render 函数之间简单更新增加 `context` 参数,`this.$slots.default` 更新为 `context.children`,之后`this.level` 更新为 `context.props.level`
@@ -597,7 +597,7 @@ Vue.component('my-functional-button', {
597597
<template functional>
598598
<button
599599
class="btn btn-primary"
600-
v-bind="data.attrs"
600+
v-bind="data.attrs"
601601
v-on="listeners"
602602
>
603603
<slot/>

src/v2/guide/state-management.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ order: 502
66

77
## 类 Flux 状态管理的官方实现
88

9-
由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长。为了解决这个问题,Vue 提供 [vuex](https://github.com/vuejs/vuex):我们有受到 Elm 启发的状态管理库。vuex 甚至集成到 [vue-devtools](https://github.com/vuejs/vue-devtools)无需配置即可访问时光旅行
9+
由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长。为了解决这个问题,Vue 提供 [vuex](https://github.com/vuejs/vuex):我们有受到 Elm 启发的状态管理库。vuex 甚至集成到 [vue-devtools](https://github.com/vuejs/vue-devtools)无需配置即可进行[时光旅行调试](https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/demo.gif)
1010

1111
### React 的开发者请参考以下信息
1212

src/v2/guide/team.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,9 @@ order: 803
280280
],
281281
reposPersonal: [
282282
'vue-2.0-simple-routing-example', 'vue-ssr-demo-simple'
283+
],
284+
links: [
285+
'https://www.patreon.com/chrisvuefritz'
283286
]
284287
},
285288
{
@@ -494,10 +497,11 @@ order: 803
494497
},
495498
reposOfficial: [
496499
'vue-devtools',
500+
'vue-cli',
497501
'vue-curated'
498502
],
499503
reposPersonal: [
500-
'vue-apollo', 'vue-meteor', 'vue-virtual-scroller'
504+
'vue-apollo', 'vue-meteor', 'vue-virtual-scroller', 'v-tooltip'
501505
]
502506
},
503507
{

src/v2/style-guide/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -739,7 +739,7 @@ components/
739739
这些组件为你的应用奠定了一致的基础样式和行为。它们可能****包括:
740740

741741
- HTML 元素
742-
- 其它带 `Base` 前缀的组件
742+
- 其它基础组件
743743
- 第三方 UI 组件库
744744

745745
但是它们**绝不会**包括全局状态 (比如来自 Vuex store)。

0 commit comments

Comments
 (0)