Skip to content

Commit 0991bfa

Browse files
committed
update dynamic binding example in guide intro
1 parent 26ac8a9 commit 0991bfa

File tree

1 file changed

+10
-6
lines changed

1 file changed

+10
-6
lines changed

src/guide/index.md

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,34 +51,38 @@ In addition to text interpolation, we can also bind element attributes like this
5151

5252
``` html
5353
<div id="app-2">
54-
<span v-bind:id="id">Inspect me</span>
54+
<span v-bind:title="message">
55+
Hover your mouse over me for a few seconds to see my dynamically bound title!
56+
</span>
5557
</div>
5658
```
5759
``` js
5860
var app2 = new Vue({
5961
el: '#app-2',
6062
data: {
61-
id: 'inspect-me'
63+
message: 'You loaded this page on ' + new Date()
6264
}
6365
})
6466
```
6567
{% raw %}
6668
<div id="app-2" class="demo">
67-
<span v-bind:id="id">Inspect me</span>
69+
<span v-bind:title="message">
70+
Hover your mouse over me for a few seconds to see my dynamically bound title!
71+
</span>
6872
</div>
6973
<script>
7074
var app2 = new Vue({
7175
el: '#app-2',
7276
data: {
73-
id: 'inspect-me'
77+
message: 'You loaded this page on ' + new Date()
7478
}
7579
})
7680
</script>
7781
{% endraw %}
7882

79-
Here we are encountering something new. The `v-bind` attribute you are seeing is called a **directive**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here it is basically saying "bind this element's `id` attribute to the `id` property on the Vue instance."
83+
Here we are encountering something new. The `v-bind` attribute you are seeing is called a **directive**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here it is basically saying "keep this element's `title` attribute up-to-date with the `message` property on the Vue instance."
8084

81-
Use the browser devtools to inspect the element above - you should see that it has the id `inspect-me`. And yes, it would update if you modify `app2.id` in the console.
85+
If you open up your JavaScript console again and enter `app2.message = 'some new message'`, you'll once again see that the bound HTML - in this case the `title` attribute - has been updated.
8286

8387
## Conditionals and Loops
8488

0 commit comments

Comments
 (0)