Vue.js的核心是允许采用简洁的模板语法声明式的将数据渲染进DOM系统

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

此时数据和DOM已经建立关联,所有东西都是响应式的。如果打开浏览器的JavaScript控制台,修改app.message,则可以看到相应更新。

绑定元素特性

<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称为指令,上面指令表示:将元素节点的title特性和Vue实例的message属性保持一致。

results matching ""

    No results matching ""