Skip to content

Synced recent (docs) updates #699

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 2 commits into from
Apr 6, 2018
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
36 changes: 23 additions & 13 deletions src/v2/api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -456,7 +456,11 @@ type: api
})
```

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

```js
data: vm => ({ a: vm.myProp })
```

### props

Expand Down Expand Up @@ -528,7 +532,13 @@ type: api

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

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

```js
computed: {
aDouble: vm => vm.a * 2
}
```

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

Expand Down Expand Up @@ -1393,7 +1403,7 @@ type: api

- **详细**:

 一个对象,持有已注册过 `ref` 的所有子组件
一个对象,持有注册过 [`ref` 特性](#ref) 的所有 DOM 元素和组件实例

- **参考**:
- [子组件引用](../guide/components.html#子组件索引)
Expand All @@ -1419,7 +1429,7 @@ type: api

- **详细**:

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (`class` 和 `style` 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (`class` 和 `style` 除外),并且可以通过 `v-bind="$attrs"` 传入内部组件——在创建更高层次的组件时非常有用
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (`class` 和 `style` 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (`class` 和 `style` 除外),并且可以通过 `v-bind="$attrs"` 传入内部组件——在创建透明的包裹组件时非常有用

### vm.$listeners

Expand Down Expand Up @@ -1852,21 +1862,18 @@ type: api

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。

从 `2.4.0` 开始,`v-on` 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时,是不支持任何修饰器的。

用在普通元素上时,只能监听 **原生 DOM 事件**。用在自定义元素组件上时,也可以监听子组件触发的**自定义事件**。
用在普通元素上时,只能监听[**原生 DOM 事件**](https://developer.mozilla.org/zh-CN/docs/Web/Events)。用在自定义元素组件上时,也可以监听子组件触发的**自定义事件**。

在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个 `$event` 属性:`v-on:click="handle('ok', $event)"`。

从 `2.4.0` 开始,`v-on` 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时,是不支持任何修饰器的。

- **示例**:

```html
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

Expand All @@ -1893,6 +1900,9 @@ type: api

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
```

在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器):
Expand Down Expand Up @@ -2113,11 +2123,11 @@ type: api
`ref` 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 `$refs` 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:

``` html
<!-- vm.$refs.p will be the DOM node -->
<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>

<!-- vm.$refs.child will be the child comp instance -->
<child-comp ref="child"></child-comp>
<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>
```

当 `v-for` 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。
Expand Down
10 changes: 9 additions & 1 deletion src/v2/guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ order: 2

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

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

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

Expand All @@ -19,6 +19,14 @@ Vue (读音 /vjuː/,类似于 **view**) 是一套用于构建用户界面的**
尝试 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:

``` html
<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```

或者:

``` html
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
```

Expand Down
2 changes: 1 addition & 1 deletion src/v2/guide/instance.md
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ new Vue({
<div id="app">
<p>{{ foo }}</p>
<!-- 这里的 `foo` 不会更新! -->
<button @click="foo = 'baz'">Change it</button>
<button v-on:click="foo = 'baz'">Change it</button>
</div>
```

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 @@ -136,8 +136,8 @@ return createElement('h1', this.blogTitle)
// @returns {VNode}
createElement(
// {String | Object | Function}
 // 一个 HTML 标签字符串,组件选项对象,或者一个返回值
// 类型为 String/Object 的函数,必要参数
 // 一个 HTML 标签字符串,组件选项对象,或者
// 解析上述任何一种的一个 async 异步函数,必要参数
 'div',

// {Object}
Expand Down Expand Up @@ -490,7 +490,7 @@ new Vue({
## 函数式组件

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

``` js
Expand Down Expand Up @@ -519,12 +519,12 @@ Vue.component('my-component', {

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

- `props`:提供 props 的对象
- `props`:提供所有 prop 的对象
- `children`: VNode 子节点的数组
- `slots`: slots 对象
- `data`:传递给组件的 data 对象
- `slots`: 返回所有插槽的对象的函数
- `data`:传递给组件的[数据对象](#深入-data-对象),并将这个组件作为第二个参数传入 `createElement`
- `parent`:对父组件的引用
- `listeners`: (2.3.0+) 一个包含了组件上所注册的 `v-on` 侦听器的对象。这只是一个指向 `data.on` 的别名。
- `listeners`: (2.3.0+) 一个包含了所有在父组件上注册的事件侦听器的对象。这只是一个指向 `data.on` 的别名。
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

现在的版本如何?

- `injections`: (2.3.0+) 如果使用了 [`inject`](../api/#provide-inject) 选项,则该对象包含了应当被注入的属性。

在添加 `functional: true` 之后,锚点标题组件的 render 函数之间简单更新增加 `context` 参数,`this.$slots.default` 更新为 `context.children`,之后`this.level` 更新为 `context.props.level`。
Expand Down Expand Up @@ -597,7 +597,7 @@ Vue.component('my-functional-button', {
<template functional>
<button
class="btn btn-primary"
v-bind="data.attrs"
v-bind="data.attrs"
v-on="listeners"
>
<slot/>
Expand Down
2 changes: 1 addition & 1 deletion src/v2/guide/state-management.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ order: 502

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

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

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

Expand Down
6 changes: 5 additions & 1 deletion src/v2/guide/team.md
Original file line number Diff line number Diff line change
Expand Up @@ -280,6 +280,9 @@ order: 803
],
reposPersonal: [
'vue-2.0-simple-routing-example', 'vue-ssr-demo-simple'
],
links: [
'https://www.patreon.com/chrisvuefritz'
]
},
{
Expand Down Expand Up @@ -494,10 +497,11 @@ order: 803
},
reposOfficial: [
'vue-devtools',
'vue-cli',
'vue-curated'
],
reposPersonal: [
'vue-apollo', 'vue-meteor', 'vue-virtual-scroller'
'vue-apollo', 'vue-meteor', 'vue-virtual-scroller', 'v-tooltip'
]
},
{
Expand Down
2 changes: 1 addition & 1 deletion src/v2/style-guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -739,7 +739,7 @@ components/
这些组件为你的应用奠定了一致的基础样式和行为。它们可能**只**包括:

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

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