diff --git a/src/v2/api/index.md b/src/v2/api/index.md index c25bd6495..81cf2682d 100644 --- a/src/v2/api/index.md +++ b/src/v2/api/index.md @@ -456,7 +456,11 @@ type: api }) ``` -

注意,__不应该对 `data` 属性使用箭头函数__ (例如`data: () => { return { a: this.myProp }}`)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,`this.myProp` 将是 undefined。

+ 注意,如果你为 `data` 属性使用了箭头函数,则 `this` 不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。 + + ```js + data: vm => ({ a: vm.myProp }) + ``` ### props @@ -528,7 +532,13 @@ type: api 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。 -

注意,__不应该使用箭头函数来定义计算属性函数__ (例如 `aDouble: () => this.a * 2`)。理由是箭头函数绑定了父级作用域的上下文,所以 `this` 将不会按照期望指向 Vue 实例,`this.a` 将是 undefined。

+ 注意如果你为一个计算属性使用了箭头函数,则 `this` 不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。 + + ```js + computed: { + aDouble: vm => vm.a * 2 + } + ```  计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是__不会__被更新的。 @@ -1393,7 +1403,7 @@ type: api - **详细**: -  一个对象,持有已注册过 `ref` 的所有子组件。 + 一个对象,持有注册过 [`ref` 特性](#ref) 的所有 DOM 元素和组件实例。 - **参考**: - [子组件引用](../guide/components.html#子组件索引) @@ -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 @@ -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 - - - @@ -1893,6 +1900,9 @@ type: api + + + ``` 在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器): @@ -2113,11 +2123,11 @@ type: api `ref` 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 `$refs` 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例: ``` html - +

hello

- - + + ``` 当 `v-for` 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。 diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 5915f5569..4edbcc8cd 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -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 之前对它有更多了解,我们制作了一个视频,带您了解其核心概念和一个示例工程。 +如果你想在深入学习 Vue 之前对它有更多了解,我们制作了一个视频,带您了解其核心概念和一个示例工程。 如果你已经是有经验的前端开发者,想知道 Vue 与其它库/框架有哪些区别,请查看[对比其它框架](comparison.html)。 @@ -19,6 +19,14 @@ Vue (读音 /vjuː/,类似于 **view**) 是一套用于构建用户界面的** 尝试 Vue.js 最简单的方法是使用 [JSFiddle 上的 Hello World 例子](https://jsfiddle.net/chrisvfritz/50wL7mdz/)。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件,然后通过如下方式引入 Vue: ``` html + + +``` + +或者: + +``` html + ``` diff --git a/src/v2/guide/instance.md b/src/v2/guide/instance.md index b187f597d..1ac868c71 100644 --- a/src/v2/guide/instance.md +++ b/src/v2/guide/instance.md @@ -96,7 +96,7 @@ new Vue({

{{ foo }}

- +
``` diff --git a/src/v2/guide/render-function.md b/src/v2/guide/render-function.md index ec85294bb..054434701 100644 --- a/src/v2/guide/render-function.md +++ b/src/v2/guide/render-function.md @@ -136,8 +136,8 @@ return createElement('h1', this.blogTitle) // @returns {VNode} createElement( // {String | Object | Function} -  // 一个 HTML 标签字符串,组件选项对象,或者一个返回值 - // 类型为 String/Object 的函数,必要参数 +  // 一个 HTML 标签字符串,组件选项对象,或者 + // 解析上述任何一种的一个 async 异步函数,必要参数。  'div', // {Object} @@ -490,7 +490,7 @@ new Vue({ ## 函数式组件 之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法。它只是一个接收参数的函数。 -在这个例子中,我们标记组件为 `functional`,这意味它是无状态 (没有 `data`),无实例 (没有 `this` 上下文)。 +在这个例子中,我们标记组件为 `functional`,这意味它是无状态 (没有[响应式数据](../api/#选项-数据)),无实例 (没有 `this` 上下文)。 一个 **函数式组件** 就像这样: ``` js @@ -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` 的别名。 - `injections`: (2.3.0+) 如果使用了 [`inject`](../api/#provide-inject) 选项,则该对象包含了应当被注入的属性。 在添加 `functional: true` 之后,锚点标题组件的 render 函数之间简单更新增加 `context` 参数,`this.$slots.default` 更新为 `context.children`,之后`this.level` 更新为 `context.props.level`。 @@ -597,7 +597,7 @@ Vue.component('my-functional-button', {