+
+ +
+
+
+
+
+
+
Ask a yes/no question: @@ -197,7 +202,7 @@ For example:
Ask a yes/no question: @@ -271,6 +277,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() @@ -293,6 +300,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 ) } @@ -300,6 +309,13 @@ 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`的设置允许我们执行异步操作（访问一个接口），限制我们多久执行该操作，并在我们获取最终结果时立刻设置状态。这是计算属性无法做到的。 + +关于`watch` 选项，可看API文档[vm.$watch API](/api/#vm-watch)。 + +*** + +> 原文：http://rc.vuejs.org/guide/computed.html + +*** -In addition to the `watch` option, you can also use the imperative [vm.$watch API](/api/#vm-watch). diff --git a/src/guide/conditional.md b/src/guide/conditional.md index 7c8166aa59..abd3894453 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}}
注意 `v-show` 不支持 `` 语法。
+ + +## v-else -You can use the `v-else` directive to indicate an "else block" for `v-if`: +可以用 `v-else` 指令给 `v-if` 或 `v-show` 添加一个 "else 块"： ``` html这可能也是一个组件
``` -The difference is that an element with `v-show` will always be rendered and remain in the DOM; `v-show` simply toggles the `display` CSS property of the element. +用另一个 `v-show` 替换 `v-else`： + +```html +这可能也是一个组件
+``` -Note that `v-show` doesn't support the `` syntax, nor does it work with `v-else`.
+这样就可以达到 `v-if` 的效果。 ## v-if vs. v-show -`v-if` is "real" conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles. +在切换 `v-if` 块时，Vue.js 有一个局部编译/卸载过程，因为 `v-if` 之中的模板也可能包括数据绑定或子组件。`v-if` 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。 + +`v-if` 也是**惰性的**：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。 + +相比之下，`v-show` 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。 + +一般来说，`v-if` 有更高的切换消耗而 `v-show` 有更高的初始渲染消耗。因此，如果需要频繁切换 `v-show` 较好，如果在运行时条件不大可能改变 `v-if` 较好。 + -`v-if` is also **lazy**: if the condition is false on initial render, it will not do anything - the conditional block won't be rendered until the condition becomes true for the first time. +*** -In comparison, `v-show` is much simpler - the element is always rendered regardless of initial condition, with just simple CSS-based toggling. +> 原文：http://rc.vuejs.org/guide/conditional.html -Generally speaking, `v-if` has higher toggle costs while `v-show` has higher initial render costs. So prefer `v-show` if you need to toggle something very often, and prefer `v-if` if the condition is unlikely to change at runtime. +*** diff --git a/src/guide/custom-directive.md b/src/guide/custom-directive.md index 55bf700013..ed9fd28cd0 100644 --- a/src/guide/custom-directive.md +++ b/src/guide/custom-directive.md @@ -1,12 +1,12 @@ --- -title: Custom Directives +title: 自定义指令 type: guide order: 16 --- -## Intro +## 简介 -In addition to the default set of directives shipped in core (`v-model` and `v-show`), Vue also allows you to register your own custom directives. Note that in Vue 2.0, the primary form of code reuse and abstraction is components - however there may be cases where you just need some low-level DOM access on plain elements, and this is where custom directives would still be useful. An example would be focusing on an input element, like this one: +除了默认设置的核心指令(`v-model`和`v-show`),Vue也允许注册自定义指令。注意，在vue2.0里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯DOM元素进行底层操作,这时候就会用到自定义指令。下面这个例子聚焦一个input元素，像这样： {% raw %}Apart from `el`, you should treat these arguments as read-only and never modify them. If you need to share information across hooks, it is recommended to do so through element's [dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset).
+除了 `el` 之外, 其它参数都应该是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的 [dataset] 来进行。(https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset).
-An example of a custom directive using some of these properties: +一个使用了这些参数的自定义钩子样例： ``` html @@ -138,19 +139,18 @@ new Vue({ {% endraw %} -## Function Shorthand +## 函数简写 -In many cases, you may want the same behavior on `bind` and `update`, but don't care about the other hooks. For example: +大多数情况下，只需要在 `bind` 和 `update` 钩子中做重复动作，而不关心其它钩子函数。可以这样写: ``` js Vue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value }) ``` +## 对象常量 -## Object Literals - -If your directive needs multiple values, you can also pass in a JavaScript object literal. Remember, directives can take any valid JavaScript expression. +如果自定义指令需要复杂的值，也可以传递 javascript 对象。要知道，指令函数能够接受所有类型的 javascript 常量。 ``` html diff --git a/src/guide/events.md b/src/guide/events.md index 9b705db645..2937b3e9a1 100644 --- a/src/guide/events.md +++ b/src/guide/events.md @@ -1,19 +1,19 @@ --- -title: Event Handling +title: 事件处理器 type: guide order: 9 --- -## Listening to Events +## 监听事件 -We can use the `v-on` directive to listen to DOM events and run some JavaScript when they're triggered. +可以用 `v-on` 指令监听 DOM 事件来触发一些JavaScript代码。 -For example: +示例: ``` htmlThe button above has been clicked {{ counter }} times.
+ +这个按钮被点击了 {{ counter }} 次。
The button above has been clicked {{ counter }} times.
+ +这个按钮被点击了 {{ counter }} 次。
`v-model` doesn't care about the initial value provided to an input or a textarea. It will always treat the Vue instance data as the source of truth.
- -### Text +### 文本 ``` html @@ -32,7 +30,7 @@ new Vue({ {% endraw %} -### Multiline text +### 多行文本 ``` html Multiline message is: @@ -57,14 +55,9 @@ new Vue({ {% endraw %} +### 复选框 -{% raw %} -Interpolation on textareas (<textarea>{{text}}</textarea>) won't work. Use v-model instead.