{{firstName}} {{lastName}} aka {{alias}}
', data: function () { @@ -120,82 +120,82 @@ type: api } } }) - // create an instance of Profile and mount it on an element + // 创建 Profile 实例，并挂载到一个元素上。 new Profile().$mount('#mount-point') ``` - Will result in: + 结果如下： ``` htmlWalter White aka Heisenberg
``` -- **See also:** [Components](/guide/components.html) +- **参考：** [组件](/guide/components.html)Note that __you should not use an arrow function with the `data` property__ (e.g. `data: () => { return { a: this.myProp }}`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.myProp` will be undefined.
+注意，__不应该对 `data` 属性使用箭头函数__ (例如`data: () => { return { a: this.myProp }}`)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，`this.myProp` 将是 undefined。
-- **See also:** [Reactivity in Depth](/guide/reactivity.html) +- **另见:** [深入响应式原理](/guide/reactivity.html) ### props -- **Type:** `ArrayNote that __you should not use an arrow function to define a computed property__ (e.g. `aDouble: () => this.a * 2`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.a` will be undefined.
+注意，__不应该使用箭头函数来定义计算属性函数__ (例如 `aDouble: () => this.a * 2`)。理由是箭头函数绑定了父级作用域的上下文，所以 `this` 将不会按照期望指向 Vue 实例，`this.a` 将是 undefined。
- Computed properties are cached, and only re-computed on reactive dependency changes. + 计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。 -- **Example:** +- **示例:** ```js var vm = new Vue({ data: { a: 1 }, computed: { - // get only, just need a function + // 仅读取，值只须为函数 aDouble: function () { return this.a * 2 }, - // both get and set + // 读取和设置 aPlus: { get: function () { return this.a + 1 @@ -451,20 +453,20 @@ type: api vm.aDouble // -> 4 ``` -- **See also:** - - [Computed Properties](/guide/computed.html) +- **另见:** + - [计算属性](/guide/computed.html) ### methods -- **Type:** `{ [key: string]: Function }` +- **类型:** `{ [key: string]: Function }` -- **Details:** +- **详细:** - Methods to be mixed into the Vue instance. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their `this` context automatically bound to the Vue instance. + methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 `this` 自动绑定为 Vue 实例。 -Note that __you should not use an arrow function to define a method__ (e.g. `plus: () => this.a++`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.a` will be undefined.
+注意，__不应该使用箭头函数来定义 method 函数__ (例如 `plus: () => this.a++`)。理由是箭头函数绑定了父级作用域的上下文，所以 `this` 将不会按照期望指向 Vue 实例，`this.a` 将是 undefined。
-- **Example:** +- **示例:** ```js var vm = new Vue({ @@ -479,17 +481,17 @@ type: api vm.a // 2 ``` -- **See also:** [Methods and Event Handling](/guide/events.html) +- **另见:** [方法与事件处理器](/guide/events.html) ### watch -- **Type:** `{ [key: string]: string | Function | Object }` +- **类型:** `{ [key: string]: string | Function | Object }` -- **Details:** +- **详细:** - An object where keys are expressions to watch and values are the corresponding callbacks. The value can also be a string of a method name, or an Object that contains additional options. The Vue instance will call `$watch()` for each entry in the object at instantiation. + 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 `$watch()`，遍历 watch 对象的每一个属性。 -- **Example:** +- **示例:** ``` js var vm = new Vue({ @@ -502,9 +504,9 @@ type: api a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, - // string method name + // 方法名 b: 'someMethod', - // deep watcher + // 深度 watcher c: { handler: function (val, oldVal) { /* ... */ }, deep: true @@ -514,9 +516,9 @@ type: api vm.a = 2 // -> new: 2, old: 1 ``` -Note that __you should not use an arrow function to define a watcher__ (e.g. `searchQuery: newValue => this.updateAutocomplete(newValue)`). The reason is arrow functions bind the parent context, so `this` will not be the Vue instance as you expect and `this.updateAutocomplete` will be undefined.
+注意，__不应该使用箭头函数来定义 watcher 函数__ (例如 `searchQuery: newValue => this.updateAutocomplete(newValue)`)。理由是箭头函数绑定了父级作用域的上下文，所以 `this` 将不会按照期望指向 Vue 实例，`this.updateAutocomplete` 将是 undefined。
-- **See also:** [Instance Methods - vm.$watch](#vm-watch) +- **另见:** [实例方法 - vm.$watch](#vm-watch) ## 选项 / DOM @@ -695,65 +697,64 @@ type: api - **另见：** [生命周期图示](/guide/instance.html#Lifecycle-Diagram) -## Options / Assets +## 选项 / 资源 ### directives -- **Type:** `Object` +- **类型:** `Object` -- **Details:** +- **详细:** - A hash of directives to be made available to the Vue instance. +一个 用于 Vue 实例 的带 hash 的指令。 -- **See also:** - - [Custom Directives](/guide/custom-directive.html) - - [Assets Naming Convention](/guide/components.html#Assets-Naming-Convention) +- **另见:** + - [自定义指令](/guide/custom-directive.html) + - [资源命名约定](/guide/components.html#Assets-Naming-Convention) ### filters -- **Type:** `Object` +- **类型:** `Object` -- **Details:** +- **详细:** - A hash of filters to be made available to the Vue instance. +一个 用于 Vue 实例 的带 hash 的过滤器。 -- **See also:** +- **另见:** - [`Vue.filter`](#Vue-filter) ### components -- **Type:** `Object` +- **类型:** `Object` -- **Details:** +- **详细:** - A hash of components to be made available to the Vue instance. +一个 用于 Vue 实例 的带 hash 的组件。 -- **See also:** - - [Components](/guide/components.html) +- **另见:** + - [组件](/guide/components.html) -## Options / Misc +## 选项 / 杂项 ### parent -- **Type:** `Vue instance` +- **类型:** `Vue instance` -- **Details:** +- **详细:** - Specify the parent instance for the instance to be created. Establishes a parent-child relationship between the two. The parent will be accessible as `this.$parent` for the child, and the child will be pushed into the parent's `$children` array. + 指定实例的父实例，在两者之间建立父子关系。子实例可以用 `this.$parent` 访问父实例，子实例被推入父实例的 `$children` 数组中。 -Use `$parent` and `$children` sparringly - they mostly serve as an escape-hatch. Prefer using props and events for parent-child communication.
+同时使用 `$parent` 和 `$children` 有冲突 - 他们作为同一个入口 。更推荐用 props 和 events 实现父子组件通信
### mixins -- **Type:** `Array