都说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
}
}
结果是一样的。
