vue one

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已经进行了更新。

vue one

推荐阅读更多精彩内容