Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统:
<div id="app">
{{message}}
</div>
var app=new Vue({
el:'#app',
data:{
message:'hello kathy'
}
})
除了文本插值,还可以像下面这样来绑定元素特性:
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
上面这一段代码里所看到的v-bind特性被称为指令。指令带有前缀v-,以表示它们是Vue提供的特殊特性。它们会在渲染的DOM上应用特殊的响应式行为。在这里指令的意思是:“将这个元素节点的title特性和Vue实例的message属性保持一致”
通过Javascript控制台,输入app.message=‘新消息’,就会再次看到这个绑定了title特性的HTML已经进行了更新。
网友评论