Skip to content

Commit 091c03c

Browse files
authored
Merge pull request #98 from shupande/2.0-cn
声明式渲染v-指令部分的例子不对,翻译也比较机械。
2 parents eb913f6 + a3321a0 commit 091c03c

File tree

1 file changed

+6
-4
lines changed

1 file changed

+6
-4
lines changed

src/guide/index.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,14 +53,16 @@ var app = new Vue({
5353

5454
``` html
5555
<div id="app-2">
56-
<span v-bind:id="id">Inspect me</span>
56+
<span v-bind:title="message">
57+
Hover your mouse over me for a few seconds to see my dynamically bound title!
58+
</span>
5759
</div>
5860
```
5961
``` js
6062
var app2 = new Vue({
6163
el: '#app-2',
6264
data: {
63-
id: 'inspect-me'
65+
message: 'You loaded this page on ' + new Date()
6466
}
6567
})
6668
```
@@ -80,9 +82,9 @@ var app2 = new Vue({
8082
</script>
8183
{% endraw %}
8284

83-
这里我们遇到新东西。你看到的 `v-bind` 特性被称为**指令**。指令带有前缀 `v-`以指示它们是 Vue.js 提供的特殊属性。并且如你所想象的,它们会在渲染过的 DOM 上应用特殊的响应式行为。这个指令的简单含义是说:将该元素的 id 属性绑定到 Vue 实例的 id 属性上
85+
这里我们遇到点新东西。你看到的 `v-bind` 属性被称为**指令**。指令带有前缀 `v-`以表示它们是 Vue.js 提供的特殊属性。可能你已经猜到了,它们会在渲染过的 DOM 上应用特殊的响应式行为。这个指令的简单含义是说:将这个元素节点的 `title` 属性和 Vue 实例的 `message` 属性绑定到一起
8486

85-
用浏览器的开发者工具去监测以上元素 - 你会发现这个元素的 id 为 `inspect-me`。是的,如果你在控制台里更改 `app2.id`,那么该元素的 id 也会随之更新
87+
你再次打开浏览器的控制台输入 `app2.message = 'some new message'`,你就会再一次看到这个绑定了`title`属性的HTML已经进行了更新
8688

8789
## 条件与循环
8890

0 commit comments

Comments
 (0)