diff --git a/src/v2/api/index.md b/src/v2/api/index.md index 546e19d18..5ebc20885 100644 --- a/src/v2/api/index.md +++ b/src/v2/api/index.md @@ -5,7 +5,7 @@ type: api ## 全局配置 -`Vue.config` 是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改下列属性： +`Vue.config` 是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改下列 property： ### silent @@ -257,7 +257,7 @@ type: api - **用法**： - 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 `this.myObject.newProperty = 'hi'`) + 向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 `this.myObject.newProperty = 'hi'`)

注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

@@ -271,7 +271,7 @@ type: api - **用法**： - 删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它。 + 删除对象的 property。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到 property 被删除的限制，但是你应该很少会使用它。 > 在 2.2.0+ 中同样支持在数组上工作。 @@ -461,13 +461,13 @@ type: api - **详细**： - Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。**对象必须是纯粹的对象 (含有零个或多个的 key/value 对)**：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。 + Vue 实例的数据对象。Vue 将会递归将 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。**对象必须是纯粹的对象 (含有零个或多个的 key/value 对)**：浏览器 API 创建的原生对象，原型上的 property 会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。 - 一旦观察过，你就无法在根数据对象上添加响应式属性。因此推荐在创建实例之前，就声明所有的根级响应式属性。 + 一旦观察过，你就无法在根数据对象上添加响应式 property。因此推荐在创建实例之前，就声明所有的根级响应式 property。 - 实例创建之后，可以通过 `vm.$data` 访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性，因此访问 `vm.a` 等价于访问 `vm.$data.a`。 + 实例创建之后，可以通过 `vm.$data` 访问原始数据对象。Vue 实例也代理了 data 对象上所有的 property，因此访问 `vm.a` 等价于访问 `vm.$data.a`。 - 以 `_` 或 `$` 开头的属性**不会**被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 `vm.$data._property` 的方式访问这些属性。 + 以 `_` 或 `$` 开头的 property **不会**被 Vue 实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 `vm.$data._property` 的方式访问这些 property。 当一个**组件**被定义，`data` 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 `data` 仍然是一个纯粹的对象，则所有的实例将**共享引用**同一个数据对象！通过提供 `data` 函数，每次创建一个新实例后，我们能够调用 `data` 函数，从而返回初始数据的一个全新副本数据对象。 @@ -493,7 +493,7 @@ type: api }) ``` - 注意，如果你为 `data` 属性使用了箭头函数，则 `this` 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。 + 注意，如果你为 `data` property 使用了箭头函数，则 `this` 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。 ```js data: vm => ({ a: vm.myProp }) @@ -587,7 +587,7 @@ type: api } ``` -  计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是**不会**被更新的。 +  计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是**不会**被更新的。 - **示例**： @@ -651,7 +651,7 @@ type: api - **详细**： - 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 `$watch()`，遍历 watch 对象的每一个属性。 + 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 `$watch()`，遍历 watch 对象的每一个 property。 - **示例**： @@ -722,7 +722,7 @@ type: api

提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 `` 或者 `` 上。

-

如果 `render` 函数和 `template` 属性都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板，此时，必须使用 Runtime + Compiler 构建的 Vue 库。

+

如果 `render` 函数和 `template` property 都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板，此时，必须使用 Runtime + Compiler 构建的 Vue 库。

- **参考**： - [生命周期图示](../guide/instance.html#生命周期图示) @@ -789,7 +789,7 @@ type: api ## 选项 / 生命周期钩子 -

所有的生命周期钩子自动绑定 `this` 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着**你不能使用箭头函数来定义一个生命周期方法** (例如 `created: () => this.fetchTodos()`)。这是因为箭头函数绑定了父上下文，因此 `this` 与你期待的 Vue 实例不同，`this.fetchTodos` 的行为未定义。

+

所有的生命周期钩子自动绑定 `this` 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算。这意味着**你不能使用箭头函数来定义一个生命周期方法** (例如 `created: () => this.fetchTodos()`)。这是因为箭头函数绑定了父上下文，因此 `this` 与你期待的 Vue 实例不同，`this.fetchTodos` 的行为未定义。

### beforeCreate @@ -807,7 +807,7 @@ type: api - **详细**： - 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，`$el` 属性目前尚不可用。 + 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，`$el` property 目前尚不可用。 - **参考**：[生命周期图示](../guide/instance.html#生命周期图示) @@ -1063,17 +1063,17 @@ type: api 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。 - `provide` 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 `Symbol` 和 `Reflect.ownKeys` 的环境下可工作。 + `provide` 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 `Symbol` 和 `Reflect.ownKeys` 的环境下可工作。 `inject` 选项应该是： - 一个字符串数组，或 - 一个对象，对象的 key 是本地的绑定名，value 是： - 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或 - 一个对象，该对象的： - - `from` 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol) - - `default` 属性是降级情况下使用的 value + - `from` property 是在可用的注入内容中搜索用的 key (字符串或 Symbol) + - `default` property 是降级情况下使用的 value - > 提示：`provide` 和 `inject` 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 + > 提示：`provide` 和 `inject` 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。 - **示例**： @@ -1117,7 +1117,7 @@ type: api > 接下来 2 个例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时，注入的值会在 `props` 和 `data` 初始化之后得到。 - 使用一个注入的值作为一个属性的默认值： + 使用一个注入的值作为一个 property 的默认值： ```js const Child = { @@ -1155,7 +1155,7 @@ type: api } ``` - 如果它需要从一个不同名字的属性注入，则使用 `from` 来表示其源属性： + 如果它需要从一个不同名字的 property 注入，则使用 `from` 来表示其源 property： ``` js const Child = { @@ -1282,7 +1282,7 @@ type: api - **详细**： - 默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 `inheritAttrs` 到 `false`，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 `$attrs` 可以让这些 attribute 生效，且可以通过 `v-bind` 显性的绑定到非根元素上。 + 默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 `inheritAttrs` 到 `false`，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例 property `$attrs` 可以让这些 attribute 生效，且可以通过 `v-bind` 显性的绑定到非根元素上。 注意：这个选项**不影响** `class` 和 `style` 绑定。 @@ -1300,7 +1300,7 @@ type: api 当设为 `true` 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。 -## 实例属性 +## 实例 property ### vm.$data @@ -1308,7 +1308,7 @@ type: api - **详细**： - Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。 + Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象 property 的访问。 - **参考**：[选项 / 数据 - data](#data) @@ -1320,7 +1320,7 @@ type: api - **详细**： - 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。 + 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象 property 的访问。 ### vm.$el @@ -1340,7 +1340,7 @@ type: api - **详细**： - 用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处： + 用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处： ``` js new Vue({ @@ -1389,7 +1389,7 @@ type: api - **详细**： - 用来访问被[插槽分发](../guide/components.html#通过插槽分发内容)的内容。每个[具名插槽](../guide/components-slots.html#具名插槽)有其相应的属性 (例如：`v-slot:foo` 中的内容将会在 `vm.$slots.foo` 中被找到)。`default` 属性包括了所有没有被包含在具名插槽中的节点，或 `v-slot:default` 的内容。 + 用来访问被[插槽分发](../guide/components.html#通过插槽分发内容)的内容。每个[具名插槽](../guide/components-slots.html#具名插槽)有其相应的 property (例如：`v-slot:foo` 中的内容将会在 `vm.$slots.foo` 中被找到)。`default` property 包括了所有没有被包含在具名插槽中的节点，或 `v-slot:default` 的内容。 **注意：**`v-slot:foo` 在 2.6 以上的版本才支持。对于之前的版本，你可以使用[废弃了的语法](../guide/components-slots.html#废弃了的语法)。 @@ -1447,7 +1447,7 @@ type: api  `vm.$scopedSlots` 在使用[渲染函数](../guide/render-function.html)开发一个组件时特别有用。 - **注意**：从 2.6.0 开始，这个属性有两个变化： + **注意**：从 2.6.0 开始，这个 property 有两个变化： 1. 作用域插槽函数现在保证返回一个 VNode 数组，除非在返回值无效的情况下返回 `undefined`。 @@ -1960,7 +1960,7 @@ type: api - **用法**： - 根据表达式之真假值，切换元素的 `display` CSS 属性。 + 根据表达式之真假值，切换元素的 `display` CSS property。 当条件变化时该指令触发过渡效果。 @@ -2052,7 +2052,7 @@ type: api
``` - `v-for` 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊属性 `key` 来提供一个排序提示： + `v-for` 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute `key` 来提供一个排序提示： ``` html
@@ -2097,7 +2097,7 @@ type: api 用在普通元素上时，只能监听[**原生 DOM 事件**](https://developer.mozilla.org/zh-CN/docs/Web/Events)。用在自定义元素组件上时，也可以监听子组件触发的**自定义事件**。 - 在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 `$event` 属性：`v-on:click="handle('ok', $event)"`。 + 在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 `$event` property：`v-on:click="handle('ok', $event)"`。 从 `2.4.0` 开始，`v-on` 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。 @@ -2186,7 +2186,7 @@ type: api - **示例**： ```html - + @@ -2210,10 +2210,10 @@ type: api
- +
- +
@@ -2226,7 +2226,7 @@ type: api ``` - `.camel` 修饰符允许在使用 DOM 模板时将 `v-bind` 属性名称驼峰化，例如 SVG 的 `viewBox` 属性： + `.camel` 修饰符允许在使用 DOM 模板时将 `v-bind` property 名称驼峰化，例如 SVG 的 `viewBox` property： ``` html @@ -2387,7 +2387,7 @@ type: api - **预期**：`number | string` - `key` 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。 + `key` 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。 有相同父元素的子元素必须有**独特的 key**。重复的 key 会造成渲染错误。 @@ -2479,7 +2479,7 @@ type: api 用于将元素或组件表示为作用域插槽。attribute 的值应该是可以出现在函数签名的参数位置的合法的 JavaScript 表达式。这意味着在支持的环境中，你还可以在表达式中使用 ES2015 解构。它在 2.5.0+ 中替代了 [`scope`](#scope-replaced)。 - 此属性不支持动态绑定。 + 此 attribute 不支持动态绑定。 - **参考**：[作用域插槽](../guide/components-slots.html#作用域插槽) @@ -2506,7 +2506,7 @@ type: api 渲染一个“元组件”为动态组件。依 `is` 的值，来决定哪个组件被渲染。 ```html - + @@ -2597,11 +2597,11 @@ type: api - **用法**： - `` 元素作为多个元素/组件的过渡效果。`` 渲染一个真实的 DOM 元素。默认渲染 ``，可以通过 `tag` 属性配置哪个元素应该被渲染。 + `` 元素作为多个元素/组件的过渡效果。`` 渲染一个真实的 DOM 元素。默认渲染 ``，可以通过 `tag` attribute 配置哪个元素应该被渲染。 注意，每个 `` 的子节点必须有**独立的 key**，动画才能正常工作 - `` 支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它会被应用一个移动中的 CSS 类 (通过 `name` 属性或配置 `move-class` 属性自动生成)。如果 CSS `transform` 属性是“可过渡”属性，当应用移动类时，将会使用 [FLIP 技术](https://aerotwist.com/blog/flip-your-animations/)使元素流畅地到达动画终点。 + `` 支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它会被应用一个移动中的 CSS 类 (通过 `name` attribute 或配置 `move-class` attribute 自动生成)。如果 CSS `transform` property 是“可过渡”property，当应用移动类时，将会使用 [FLIP 技术](https://aerotwist.com/blog/flip-your-animations/)使元素流畅地到达动画终点。 ```html @@ -2656,7 +2656,7 @@ type: api > 2.1.0 新增 - `include` 和 `exclude` 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示： + `include` 和 `exclude` prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示： ``` html diff --git a/src/v2/cookbook/adding-instance-properties.md b/src/v2/cookbook/adding-instance-properties.md index 957f02354..a3871cb70 100644 --- a/src/v2/cookbook/adding-instance-properties.md +++ b/src/v2/cookbook/adding-instance-properties.md @@ -1,5 +1,5 @@ --- -title: 添加实例属性 +title: 添加实例 property type: cookbook order: 2 --- @@ -24,13 +24,13 @@ new Vue({ 则控制台会打印出 `My App`。就这么简单！ -## 为实例属性设置作用域的重要性 +## 为实例 property 设置作用域的重要性 你可能会好奇： > “为什么 `appName` 要以 `$` 开头？这很重要吗？它会怎样？” -这里没有什么魔法。`$` 是在 Vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。 +这里没有什么魔法。`$` 是在 Vue 所有实例中都可用的 property 的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。 > “你指的冲突是什么意思？” @@ -45,7 +45,7 @@ Vue.prototype.appName = 'My App' ``` js new Vue({ data: { - // 啊哦，`appName` *也*是一个我们定义的实例属性名！😯 + // 啊哦，`appName` *也*是一个我们定义的实例 property 名！😯 appName: 'The name of some other app' }, beforeCreate: function () { @@ -57,7 +57,7 @@ new Vue({ }) ``` -日志中会先出现 `"My App"`，然后出现 `"The name of some other app"`，因为 `this.appName` 在实例被创建之后被 `data` [覆写了](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/objects-classes/ch5.md)。我们通过 `$` 为实例属性设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定，诸如 `$_appName` 或 `ΩappName`，来避免和插件或未来的插件相冲突。 +日志中会先出现 `"My App"`，然后出现 `"The name of some other app"`，因为 `this.appName` 在实例被创建之后被 `data` [覆写了](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/objects-classes/ch5.md)。我们通过 `$` 为实例 property 设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定，诸如 `$_appName` 或 `ΩappName`，来避免和插件或未来的插件相冲突。 ## 真实的示例：通过 axios 替换 Vue Resource @@ -145,7 +145,7 @@ Uncaught TypeError: Cannot read property 'split' of undefined ## 何时避免使用这个模式 -只要你对原型属性的作用域保持警惕，那么使用这个模式就是安全的——保证了这一点，就不太会出 bug。 +只要你对原型 property 的作用域保持警惕，那么使用这个模式就是安全的——保证了这一点，就不太会出 bug。 然而，有的时候它会让其他开发者感到混乱。例如他们可能看到了 `this.$http`，然后会想“哦，我从来没见过这个 Vue 的功能”，然后他们来到另外一个项目又发现 `this.$http` 是未被定义的。或者你打算去搜索如何使用它，但是搜不到结果，因为他们并没有发现这是一个 axios 的别名。 @@ -178,11 +178,11 @@ var App = Object.freeze({ }) ``` -

如果你在好奇 `Object.freeze`，它做的事情是阻止这个对象在未来被修改。这实质上是将它的属性都设为了常量，避免在未来出现状态的 bug。

+

如果你在好奇 `Object.freeze`，它做的事情是阻止这个对象在未来被修改。这实质上是将它的 property 都设为了常量，避免在未来出现状态的 bug。

-现在这些被共享的属性的来源就更加明显了：在应用中的某个地方有一个被定义好的 `App` 对象。你只需在项目中搜索就可以找到它。 +现在这些被共享的 property 的来源就更加明显了：在应用中的某个地方有一个被定义好的 `App` 对象。你只需在项目中搜索就可以找到它。 -这样做的另一个好处是 `App` 可以在你代码的*任何地方*使用，不管它是否是 Vue 相关的。包括向实例选项直接附加一些值而不必进入一个函数去访问 `this` 上的属性来得到这些值： +这样做的另一个好处是 `App` 可以在你代码的*任何地方*使用，不管它是否是 Vue 相关的。包括向实例选项直接附加一些值而不必进入一个函数去访问 `this` 上的 property 来得到这些值： ``` js new Vue({ diff --git a/src/v2/cookbook/avoiding-memory-leaks.md b/src/v2/cookbook/avoiding-memory-leaks.md index f71c07202..a7ce2b07d 100644 --- a/src/v2/cookbook/avoiding-memory-leaks.md +++ b/src/v2/cookbook/avoiding-memory-leaks.md @@ -82,7 +82,7 @@ new Vue({ ## 解决这个内存泄漏问题 -在上述的示例中，我们可以用 `hide()` 方法在将选择框从 DOM 中移除之前做一些清理工作，来解决内存泄露问题。为了做到这一点，我们会在 Vue 实例的数据对象中保留一个属性，并会使用 [Choices API 中的](https://github.com/jshjohnson/Choices) `destroy()` 方法将其清除。 +在上述的示例中，我们可以用 `hide()` 方法在将选择框从 DOM 中移除之前做一些清理工作，来解决内存泄露问题。为了做到这一点，我们会在 Vue 实例的数据对象中保留一个 property，并会使用 [Choices API 中的](https://github.com/jshjohnson/Choices) `destroy()` 方法将其清除。 通过这个[更新之后的 CodePen 示例](https://codepen.io/freeman-g/pen/mxWMor)可以再重新看看内存的使用情况。 diff --git a/src/v2/cookbook/creating-custom-scroll-directives.md b/src/v2/cookbook/creating-custom-scroll-directives.md index 037603d5d..3bad6c83e 100644 --- a/src/v2/cookbook/creating-custom-scroll-directives.md +++ b/src/v2/cookbook/creating-custom-scroll-directives.md @@ -51,7 +51,7 @@ new Vue({

记住！指令必须在 Vue 实例之前注册好。

-我们可能还需要一个样式属性来对中间值做过渡，在这个例子中： +我们可能还需要一个样式 property 来对中间值做过渡，在这个例子中： ```css .box { diff --git a/src/v2/cookbook/debugging-in-vscode.md b/src/v2/cookbook/debugging-in-vscode.md index 44f5f51b7..039fbba3e 100644 --- a/src/v2/cookbook/debugging-in-vscode.md +++ b/src/v2/cookbook/debugging-in-vscode.md @@ -25,15 +25,15 @@ order: 8 在可以从 VS Code 调试你的 Vue 组件之前，你需要更新 webpack 配置以构建 source map。做了这件事之后，我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试，即便你的资源已经被 webpack 优化过了也没关系。 -打开 `config/index.js` 并找到 `devtool` 属性。将其更新为： +打开 `config/index.js` 并找到 `devtool` property。将其更新为： -如果你使用的是 Vue CLI 2，请设置并更新 `config/index.js` 内的 `devtool` 属性： +如果你使用的是 Vue CLI 2，请设置并更新 `config/index.js` 内的 `devtool` property： ```json devtool: 'source-map', ``` -如果你使用的是 Vue CLI 3，请设置并更新 `vue.config.js` 内的 `devtool` 属性： +如果你使用的是 Vue CLI 3，请设置并更新 `vue.config.js` 内的 `devtool` property： ```js module.exports = { @@ -101,7 +101,7 @@ module.exports = { ### Vue Devtools -我们还有一些其它的调试方法，复杂度不尽相同。其中最流行和简单的是使用非常棒的 [Chrome 版本](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) 和 [Firefox 版本](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)的 Vue.js devtools。使用 devtools 有很多好处，比如它可以让你能够实时编辑数据属性并立即看到其反映出来的变化。另一个主要的好处是能够为 Vuex 提供时间旅行式的调试体验。 +我们还有一些其它的调试方法，复杂度不尽相同。其中最流行和简单的是使用非常棒的 [Chrome 版本](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)和 [Firefox 版本](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)的 Vue.js devtools。使用 devtools 有很多好处，比如它可以让你能够实时编辑数据 property 并立即看到其反映出来的变化。另一个主要的好处是能够为 Vuex 提供时间旅行式的调试体验。 ![Devtools Timetravel Debugger](/images/devtools-timetravel.gif) diff --git a/src/v2/cookbook/editable-svg-icons.md b/src/v2/cookbook/editable-svg-icons.md index e96c2c47f..8650b39a5 100644 --- a/src/v2/cookbook/editable-svg-icons.md +++ b/src/v2/cookbook/editable-svg-icons.md @@ -185,4 +185,4 @@ export default { * [svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader) * [svgo-loader](https://github.com/rpominov/svgo-loader) -这些工具会在编译时打包 SVG，但是在运行时编辑它们会有一些麻烦，因为 `` 标签在处理一些复杂的事情时存在浏览器兼容问题。同时它们会给你两个嵌套的 `viewBox` 属性，这是两套坐标系。所以实现上稍微复杂了一些。 +这些工具会在编译时打包 SVG，但是在运行时编辑它们会有一些麻烦，因为 `` 标签在处理一些复杂的事情时存在浏览器兼容问题。同时它们会给你两个嵌套的 `viewBox` property，这是两套坐标系。所以实现上稍微复杂了一些。 diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index fcfd33095..a43e44e6d 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -283,7 +283,7 @@ const app = new Vue({ ``` -这组输入框覆盖了五个不同的部件。注意这里为 `v-model` 特性添加了 `.number`。它会告诉 Vue 将其值作为数字来使用。不过这里有一个小小的 bug，那就是当其值为空的时候，它会回到字符串格式，稍后你将会看到变通的办法。为了让用户使用起来更方便，我们添加展示了一个当前的总和，这样我们就能够实时的看到它们一共花掉了多少钱。现在我们来看看 JavaScript。 +这组输入框覆盖了五个不同的部件。注意这里为 `v-model` attribute 添加了 `.number`。它会告诉 Vue 将其值作为数字来使用。不过这里有一个小小的 bug，那就是当其值为空的时候，它会回到字符串格式，稍后你将会看到变通的办法。为了让用户使用起来更方便，我们添加展示了一个当前的总和，这样我们就能够实时的看到它们一共花掉了多少钱。现在我们来看看 JavaScript。 ``` js const app = new Vue({ diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index 42513a910..4ba08cbf8 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -10,7 +10,7 @@ order: 9 在本次实践中，我们会使用 [CoinDesk API](https://www.coindesk.com/api/) 来完成展示比特币价格且每分钟更新的工作。首先，我们要通过 npm/Yarn 或一个 CDN 链接安装 axios。 -我们有很多种方式可以从 API 请求信息，但是最好首先确认这些数据看起来长什么样，以便进一步确定如何展示它。为此，我们会调用一次这个 API 并输出结果，以便我们能够看清楚它。如 CoinDesk 的 API 文档所述，请求会发送到 `https://api.coindesk.com/v1/bpi/currentprice.json`。所以，我们首先创建一个 data 里的属性以最终放置信息，然后将会在 `mounted` 生命周期钩子中获取数据并赋值过去： +我们有很多种方式可以从 API 请求信息，但是最好首先确认这些数据看起来长什么样，以便进一步确定如何展示它。为此，我们会调用一次这个 API 并输出结果，以便我们能够看清楚它。如 CoinDesk 的 API 文档所述，请求会发送到 `https://api.coindesk.com/v1/bpi/currentprice.json`。所以，我们首先创建一个 data 里的 property 以最终放置信息，然后将会在 `mounted` 生命周期钩子中获取数据并赋值过去： ```js new Vue({ diff --git a/src/v2/examples/elastic-header.md b/src/v2/examples/elastic-header.md index 994bb1947..2e8b9f4b5 100644 --- a/src/v2/examples/elastic-header.md +++ b/src/v2/examples/elastic-header.md @@ -4,4 +4,4 @@ type: examples order: 7 --- - + \ No newline at end of file diff --git a/src/v2/examples/hackernews.md b/src/v2/examples/hackernews.md index bd481eea1..1f9215276 100644 --- a/src/v2/examples/hackernews.md +++ b/src/v2/examples/hackernews.md @@ -4,7 +4,7 @@ type: examples order: 12 --- -> HackerNews 克隆是基于 HN 的官方 firebase API 、Vue 2.0 、Vue Router 和 Vuex 来构建的，使用服务器端渲染。 +> HackerNews 克隆是基于 HN 的官方 firebase API、Vue 2.0、Vue Router 和 Vuex 来构建的，使用服务器端渲染。 {% raw %}
diff --git a/src/v2/examples/modal.md b/src/v2/examples/modal.md index 347286d8a..f52bc07da 100644 --- a/src/v2/examples/modal.md +++ b/src/v2/examples/modal.md @@ -4,6 +4,6 @@ type: examples order: 6 --- -> 使用到的特性：组件，prop 传递，内容插入(content insertion)，过渡 (transitions)。 +> 使用到的特性：组件，prop 传递，内容插入 (content insertion)，过渡 (transitions)。 diff --git a/src/v2/guide/class-and-style.md b/src/v2/guide/class-and-style.md index 731293218..4f8628113 100644 --- a/src/v2/guide/class-and-style.md +++ b/src/v2/guide/class-and-style.md @@ -4,7 +4,7 @@ type: guide order: 6 --- -操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 `v-bind` 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 `v-bind` 用于 `class` 和 `style` 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 +操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 `v-bind` 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 `v-bind` 用于 `class` 和 `style` 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 ## 绑定 HTML Class @@ -17,9 +17,9 @@ order: 6 ``` html
``` -上面的语法表示 `active` 这个 class 存在与否将取决于数据属性 `isActive` 的 [truthiness](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy)。 +上面的语法表示 `active` 这个 class 存在与否将取决于数据 property `isActive` 的 [truthiness](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy)。 -你可以在对象中传入更多属性来动态切换多个 class。此外，`v-bind:class` 指令也可以与普通的 class 属性共存。当有如下模板： +你可以在对象中传入更多字段来动态切换多个 class。此外，`v-bind:class` 指令也可以与普通的 class attribute 共存。当有如下模板： ``` html
这个章节假设你已经对 [Vue 组件](components.html)有一定的了解。当然你也可以先跳过这里，稍后再回过头来看。 -当在一个自定义组件上使用 `class` 属性时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。 +当在一个自定义组件上使用 `class` property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。 例如，如果你声明了这个组件： @@ -158,7 +158,7 @@ HTML 将被渲染为： ### 对象语法 -`v-bind:style` 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名： +`v-bind:style` 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名： ``` html @@ -199,13 +199,13 @@ data: { ### 自动添加前缀 -当 `v-bind:style` 使用需要添加[浏览器引擎前缀](https://developer.mozilla.org/zh-CN/docs/Glossary/Vendor_Prefix)的 CSS 属性时，如 `transform`，Vue.js 会自动侦测并添加相应的前缀。 +当 `v-bind:style` 使用需要添加[浏览器引擎前缀](https://developer.mozilla.org/zh-CN/docs/Glossary/Vendor_Prefix)的 CSS property 时，如 `transform`，Vue.js 会自动侦测并添加相应的前缀。 ### 多重值 > 2.3.0+ -从 2.3.0 起你可以为 `style` 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如： +从 2.3.0 起你可以为 `style` 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如： ``` html
diff --git a/src/v2/guide/comparison.md b/src/v2/guide/comparison.md index b7dc98545..c34fba72b 100644 --- a/src/v2/guide/comparison.md +++ b/src/v2/guide/comparison.md @@ -86,7 +86,7 @@ Vue 的整体思想是拥抱经典的 Web 技术，并在其上进行扩展。 ``` -这个可选 `scoped` 属性会自动添加一个唯一的属性 (比如 `data-v-21e5b78`) 为组件内 CSS 指定作用域，编译的时候 `.list-container:hover` 会被编译成类似 `.list-container[data-v-21e5b78]:hover`。 +这个可选 `scoped` attribute 会自动添加一个唯一的 attribute (比如 `data-v-21e5b78`) 为组件内 CSS 指定作用域，编译的时候 `.list-container:hover` 会被编译成类似 `.list-container[data-v-21e5b78]:hover`。 最后，Vue 的单文件组件里的样式设置是非常灵活的。通过 [vue-loader](https://github.com/vuejs/vue-loader)，你可以使用任意预处理器、后处理器，甚至深度集成 [CSS Modules](https://vue-loader.vuejs.org/en/features/css-modules.html)——全部都在 `