一、文本插值(text interpolation)
HTML
<div id="app">
{{ message }}
</div>
JS
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
二、动态绑定 DOM 元素属性
<div id="app">
<span 指令名:属性名="Vue 实例属性">
...
</span>
</div>
例如：
HTML
<div id="app3">
<span v-bind:title="titlemessage">
{{ message }}
</span>
<br/>
<a v-bind:href="url">v-bind:href demo</a>
<br/>
<button v-bind:disabled="isButtonDisabled1">Button Disabled</button>
<button v-bind:disabled="isButtonDisabled2">Button</button>
</div>
JS
var app3 = new Vue({
el: '#app3',
data: {
message: '鼠标悬停几秒钟查看此处动态绑定的提示信息！',
titlemessage: '页面加载于 ' + new Date().toLocaleString(),
url:'http://www.baidu.com',
isButtonDisabled1:true,
isButtonDisabled2:false
}
})
生成的页面如下
