Vue.js是当下很火的一个JavaScript MVVM（Model-View-ViewModel）库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
上一期简单讲解了vue的基本语法，这一次我们做一个小项目，搭建一个简单的图书管理平台，能够让我们更深刻的理解这门语言的妙用。
1、DEMO样式
首先我们需要搭建一个简单的demo样式，推荐大家使用bootstrap，可以很快的搭建出一个清晰简洁的页面。
给大家分享一段我的代码吧。
<div class="container">
<div class="col-md-6 col-md-offset-3">
<h1>Vue demo</h1>
<div id="app">
<table class="table table-hover ">
<caption></caption>
<thead>
<tr>
<th>序号</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
</table>
<div id="add-book">
<legend>添加书籍</legend>
<div class="form-group">
<label for="group">书名</label>
<input type="text" class="form-control" id="group">
</div>
<div class="form-group">
<label for="author">作者</label>
<input type="text" class="form-control" id="author">
</div>
<div class="form-group">
<label for="price">价格</label>
<input type="text" class="form-control" id="price">
</div>
<button class="btn btn-primary btn-block">添加</button>
<button class="btn btn-primary btn-block">查询</button>
</div>
<div id="update-book">
<legend>修改书籍</legend>
<div class="form-group">
<label for="group1">书名</label>
<input type="text" class="form-control" id="group1">
</div>
<div class="form-group">
<label for="author1">作者</label>
<input type="text" class="form-control" id="author1">
</div>
<div class="form-group">
<label for="price1">价格</label>
<input type="text" class="form-control" id="price1">
</div>
<button class="btn btn-primary btn-block">完成</button>
</div>
</div>
</div>
</div>
运用了bootstrap的栅格系统，和一些简单的组件，不光简单快捷，还能自动实现响应式呢。
而且做出来的效果也不难看，挺整洁的。
给大家看下刚开始的效果图。
如果对这个CSS框架没有了解的话，自己写一下样式也没关系。