From aceaea07c26698852628d6b8c1e09ea7c3a39202 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=81=E4=B8=80=E9=B8=A3?= <315129552@qq.com> Date: Sat, 13 Aug 2016 21:05:53 +0800 Subject: [PATCH 01/78] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=89=8D=E5=8D=8A?= =?UTF-8?q?=E9=83=A8=E5=88=86=E7=BF=BB=E8=AF=91=E7=9A=84=E4=B8=AD=E6=96=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/guide/class-and-style.md | 64 ++++++++++---------- src/guide/computed.md | 64 ++++++++++---------- src/guide/conditional.md | 44 +++++++------- src/guide/index.md | 30 +++++----- src/guide/installation.md | 55 +++++++++--------- src/guide/instance.md | 53 +++++++++-------- src/guide/overview.md | 51 ++++++++-------- src/guide/syntax.md | 109 +++++++++++++++++------------------ 8 files changed, 237 insertions(+), 233 deletions(-) diff --git a/src/guide/class-and-style.md b/src/guide/class-and-style.md index b95af975a8..585874baf4 100644 --- a/src/guide/class-and-style.md +++ b/src/guide/class-and-style.md @@ -1,42 +1,45 @@ --- -title: Class and Style Bindings +title: Class 与 Style 绑定 type: guide order: 6 --- -A common need for data binding is manipulating an element's class list and its inline styles. Since they are both attributes, we can use `v-bind` to handle them: we just need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue provides special enhancements when `v-bind` is used with `class` and `style`. In addition to strings, the expressions can also evaluate to objects or arrays. +数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 `v-bind` 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 `v-bind` 用于 `class` 和 `style` 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。 -## Binding HTML Classes +## 绑定 HTML Class -### Object Syntax +

尽管可以用 Mustache 标签绑定 class，比如 `{% raw %}class="{{ className }}"{% endraw %}`，但是我们不推荐这种写法和 `v-bind:class` 混用。两者只能选其一！

-We can pass an object to `v-bind:class` to dynamically toggle classes: +### 对象语法 -``` html +我们可以传给 `v-bind:class` 一个对象，以动态地切换 class。 + +```html
``` -``` js + +```js data: { isActive: true, hasEror: false } ``` -The `v-bind:class` directive can also co-exist with the plain `class` attribute: +`v-bind:class` 指令可以与普通的 `class` 特性共存： ``` html
``` -This will render: +渲染为： ``` html
``` -When `isActive` or `hasError` changes, the class list will be updated accordingly. For example, if `hasError` becomes `true`, the class list will become `"static active text-danger"`. +当 `isActive` 和 `hasError` 变化时，class 列表将相应地更新。例如，如果 `hasError` 变为 `true`，class 列表将变为 `"static active text-danger"`。 -You can also directly bind to an object: +你也可以直接绑定数据里的一个对象： ``` html
@@ -50,12 +53,13 @@ data: { } ``` -This will render the same result. We can also bind to a [computed property](computed.html) that returns an object. This is a common and powerful pattern: +我们也可以在这里绑定一个返回对象的[计算属性](computed.html)。这是一个常用且强大的模式。 -``` html +```html
``` -``` js + +```js data: { isActive: true, error: null @@ -70,13 +74,14 @@ computed: { } ``` -### Array Syntax +### 数组语法 -We can pass an array to `v-bind:class` to apply a list of classes: +我们可以把一个数组传给 `v-bind:class`，以应用一个 class 列表： ``` html
``` + ``` js data: { activeClass: 'active', @@ -84,31 +89,32 @@ data: { } ``` -Which will render: +渲染为： ``` html
``` -If you would like to also toggle a class in the list conditionally, you can do it with a ternary expression: +如果你也想根据条件切换列表中的 class，可以用三元表达式： ``` html
``` -This will always apply `errorClass`, but will only apply `activeClass` when `isActive` is `true`. +此例始终添加 `errorClass`，但是只有在 `isActive` 是 `true` 时添加 `activeClass` 。 -However, this can be a bit verbose if you have multiple conditional classes. That's why it's also possible to use the object syntax inside array syntax: +不过，当有多个条件 class 时这样写有些繁琐。这就是为什么可以在数组语法中使用对象语法： ``` html
``` -## Binding Inline Styles -### Object Syntax +## 绑定内联样式 + +### 对象语法 -The object syntax for `v-bind:style` is pretty straightforward - it looks almost like CSS, except it's a JavaScript object. You can use either camelCase or kebab-case for the CSS property names: +`v-bind:style` 的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）： ``` html
@@ -120,7 +126,7 @@ data: { } ``` -It is often a good idea to bind to a style object directly so that the template is cleaner: +直接绑定到一个样式对象通常更好，让模板更清晰： ``` html
@@ -134,16 +140,16 @@ data: { } ``` -Again, the object syntax is often used in conjunction with computed properties that return objects. +同样的，对象语法常常结合返回对象的计算属性使用。 -### Array Syntax +### 数组语法 -The array syntax for `v-bind:style` allows you to apply multiple style objects to the same element: +`v-bind:style` 的数组语法可以将多个样式对象应用到一个元素上： ``` html
``` -### Auto-prefixing +### 自动添加前缀 -When you use a CSS property that requires vendor prefixes in `v-bind:style`, for example `transform`, Vue will automatically detect and add appropriate prefixes to the applied styles. +当 `v-bind:style` 使用需要厂商前缀的 CSS 属性时，如 `transform`，Vue.js 会自动侦测并添加相应的前缀。 diff --git a/src/guide/computed.md b/src/guide/computed.md index 8e6631927c..fe8bf7b26d 100644 --- a/src/guide/computed.md +++ b/src/guide/computed.md @@ -1,24 +1,21 @@ --- -title: Computed Properties and Watchers +title: 计算属性 type: guide order: 5 --- -## Computed Properties - -In-template expressions are very convenient, but they are really only meant for simple operations. Putting too much logic into your templates can make them bloated and hard to maintain. For example: - -``` html +在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。例如： +```html
{{ message.split('').reverse().join('') }}
``` -At this point, the template is no longer simple and declarative. You have to look at it for a second before realizing that it displays `message` in reverse. The problem is made worse when you want to include the reversed message in your template more than once. +在这种情况下，模板不在简单和清晰。你不得不停留下意识到显示的是反向的`message`。这个问题在你不止一次反转message的时候变得更加糟糕。 -That's why for any complex logic, you should use a **computed property**. +这就是为什么任何复杂逻辑，你都应当使用**计算属性**。 -### Basic Example +### 基础例子 ``` html
@@ -43,10 +40,10 @@ var vm = new Vue({ }) ``` -Result: +结果： {% raw %} -
+

Original message: "{{ message }}"

Computed reversed message: "{{ reversedMessage }}"

@@ -57,7 +54,9 @@ var vm = new Vue({ message: 'Hello' }, computed: { + // a computed getter reversedMessage: function () { + // `this` points to the vm instance return this.message.split('').reverse().join('') } } @@ -65,7 +64,7 @@ var vm = new Vue({ {% endraw %} -Here we have declared a computed property `reversedMessage`. The function we provided will be used as the getter function for the property `vm.reversedMessage`: +这里我们声明了一个计算属性 `reversedMessage`。我们提供的函数将用作属性 `vm.reversedMessage`的 getter。 ``` js console.log(vm.reversedMessage) // -> 'olleH' @@ -73,13 +72,13 @@ vm.message = 'Goodbye' console.log(vm.reversedMessage) // -> 'eybdooG' ``` -You can open the console and play with the example vm yourself. The value of `vm.reversedMessage` is always dependent on the value of `vm.message`. +你可以打开浏览器的控制台，修改 vm。`vm.reversedMessage` 的值始终取决于 `vm.message` 的值。 -You can data-bind to computed properties in templates just like a normal property. Vue is aware that `vm.reversedMessage` depends on `vm.message`, so it will update any bindings that depend on `vm.reversedMessage` when `vm.message` changes. And the best part is that we've created this dependency relationship declaratively: the computed getter function is pure and has no side effects, which makes it easy to test and reason about. +你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 `vm.reversedMessage` 依赖于 `vm.message`，因此当 `vm.message` 发生改变时，依赖于 `vm.reversedMessage` 的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系：计算属性的 getter 是干净无副作用的，因此也是易于测试和理解的。 -### Computed vs Watched Property +### 计算属性 vs. $watch -Vue does provide a more generic way to observe and react to data changes on a Vue instance: **watch properties**. When you have some data that needs to change based on some other data, it is tempting to overuse `watch` - especially if you are coming from an AngularJS background. However, it is often a better idea to use a computed property rather than an imperative `watch` callback. Consider this example: +Vue.js 提供了一个方法 `$watch`，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， `$watch` 很诱人 —— 特别是如果你来自 AngularJS。不过，通常更好的办法是使用计算属性而不是一个命令式的 `$watch` 回调。考虑下面例子： ``` html
{{ fullName }}
@@ -104,7 +103,7 @@ var vm = new Vue({ }) ``` -The above code is imperative and repetitive. Compare it with a computed property version: +上面代码是命令式的重复的。跟计算属性对比： ``` js var vm = new Vue({ @@ -121,11 +120,11 @@ var vm = new Vue({ }) ``` -Much better, isn't it? +这样更好，不是吗？ -### Computed Setter +### 计算 setter -Computed properties are by default getter-only, but you can also provide a setter when you need it: +计算属性默认只是 getter，不过在需要时你也可以提供一个 setter： ``` js // ... @@ -146,17 +145,17 @@ computed: { // ... ``` -Now when you run `vm.fullName = 'John Doe'`, the setter will be invoked and `vm.firstName` and `vm.lastName` will be updated accordingly. +现在在调用 `vm.fullName = 'John Doe'` 时，setter 会被调用，`vm.firstName` 和 `vm.lastName` 也会有相应更新。 -The technical details behind how computed properties are updated are discussed in [another section](reactivity.html#Inside-Computed-Properties) dedicated to the reactivity system. +关于计算属性背后的原理和技术细节详见[计算属性的奥秘](http://rc.vuejs.org/guide/reactivity.html#Inside-Computed-Properties)。 -## Watchers +## 观察 Watchers -While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. That's why Vue provides a more generic way to react to data changes through the `watch` option. This is most useful when you want to perform asynchronous or expensive operations in response to changing data. +当计算属性使用在大多数场景下时，有时候也很需要一个自定义的数watcher.这是为什么Vue提供一个更通用的方法通过`watch`的设置，来反应数据的变化。在你想要执行异步操作或需要响应不断变化昂贵的数据操作时这很有用。 -For example: +例如： -``` html +```html

Ask a yes/no question: @@ -166,7 +165,7 @@ For example:

``` -``` html +```html @@ -220,10 +219,11 @@ var watchExampleVM = new Vue({ ``` -Result: + +结果： {% raw %} -
+

Ask a yes/no question: @@ -240,6 +240,7 @@ var watchExampleVM = new Vue({ answer: 'I cannot give you an answer until you ask a question!' }, watch: { + // whenever question changes, this function will run question: function (newQuestion) { this.answer = 'Waiting for you to stop typing...' this.getAnswer() @@ -262,6 +263,8 @@ var watchExampleVM = new Vue({ vm.answer = 'Error! Could not reach the API. ' + error }) }, + // This is the number of milliseconds we wait for the + // user to stop typing. 500 ) } @@ -269,4 +272,5 @@ var watchExampleVM = new Vue({ {% endraw %} -In this case, using the `watch` option allows us to perform an asynchronous operation (accessing an API), limit how often we perform that operation, and set intermediary states until we get a final answer. None of that would be possible with a computed property. + +在这个示例中，使用watch的设置允许我们执行异步操作（访问一个接口），限制我们多久执行该操作，并在我们获取最终结果时立刻设置状态。这是计算属性无法做到的。 diff --git a/src/guide/conditional.md b/src/guide/conditional.md index de4b35b746..b1c5c23908 100644 --- a/src/guide/conditional.md +++ b/src/guide/conditional.md @@ -1,36 +1,36 @@ --- -title: Conditional Rendering +title: 条件渲染 type: guide order: 7 --- ## v-if -In string templates, for example Handlebars, we would write a conditional block like this: +在字符串模板中，如 Handlebars，我们得像这样写一个条件块： ``` html - + {{#if ok}}

Yes

{{/if}} ``` -In Vue, we use the `v-if` directive to achieve the same: +在 Vue.js，我们使用 `v-if` 指令实现同样的功能： ``` html

Yes

``` -It is also possible to add an "else" block with `v-else`: +也可以用 `v-else` 添加一个 "else" 块： ``` html

Yes

No

``` -## Template v-if +## template v-if -Because `v-if` is a directive, it has to be attached to a single element. But what if we want to toggle more than one element? In this case we can use `v-if` on a `