Vue.js的核心是一個允許采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進DOM的系統(tǒng):
<div id="app">
{{message}}
</div>
var app=new Vue({
el:'#app',
data:{
message:'hello kathy'
}
})
除了文本插值客峭,還可以像下面這樣來綁定元素特性:
<div id="app-2">
<span v-bind:title="message">
鼠標懸停幾秒鐘查看此處動態(tài)綁定的提示信息夜涕!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '頁面加載于 ' + new Date().toLocaleString()
}
})
上面這一段代碼里所看到的v-bind特性被稱為指令朗兵。指令帶有前綴v-痊剖,以表示它們是Vue提供的特殊特性衍腥。它們會在渲染的DOM上應(yīng)用特殊的響應(yīng)式行為蚪缀。在這里指令的意思是:“將這個元素節(jié)點的title特性和Vue實例的message屬性保持一致”
通過Javascript控制臺疹启,輸入app.message=‘新消息’,就會再次看到這個綁定了title特性的HTML已經(jīng)進行了更新煎殷。