都说vue好用，闲里偷忙赶紧来试试手，废话不多说，开干。

引入cdn

http://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js

模块结构：

js部分

 var data={
        recordDay:'22',
        recordDate:'February 20th  2014',
        recordWeek:'Monday',
        title:'暴躁的银河',
        content:'行走，停顿，驻足，思考。',
        imgUrl:''
    }
    var vv=new Vue({
        el:'#first',
        data:data
    }) ```

el:指向绑定的元素
data: 需要的json数据

html部分

<div id="first" class="post post-text clearfix post-left">
<div class="post-date">
<span class="icon day">{{recordDay}}</span>
<span class="week">
<a href="">{{recordWeek}}</a>
</span>
<span class="date">{{recordDate}}</span>
</div>
<div class="post-content">
<div class="sprite post-main-bg">
<div class="sprite post-main">
<div class="mod-txt mod-text">
<h2>
<a href="imageinfo.html" v-bind:title="title">{{title}}</a>
</h2>
<p>{{content}}</p></div>
</div>
</div>

在设置title的时候纠结了好久，查资料发现原来直接用v-bind:title="title"  就可以啦。😵
借这个机会也查到了设置class的方法：
例如

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>

data: {
isA: true,
isB: false
}

就会被渲染为 ``` <div class="static class-a"></div> ```
当 isA 和 isB 变化时，class 列表将相应地更新。

**当然也可以用计算属性的模式**
``` <div v-bind:class="classObject"></div>
data: {
  classObject: {
    'class-a': true,
    'class-b': false
  }
}

结果是一样的。