快捷键
.container>.row.text-center>h1{用户数据}
<div class="container">
<div class="row text-center">
<h1>用户数据</h1>
</div>
</div>
.row>.col-xs-offset-3.col-xs-6>table.table.table-striped.table-bordered.table-hover>(tr>th*3)+(tr>td*3)
<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<table class="table table-striped table-bordered table-hover">
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="row text-center">
<h1>{{title}}</h1>
</div>
<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<table class="table table-striped table-bordered table-hover">
<tr>
<th>id</th>
<th>姓名</th>
<th>生日</th>
</tr>
<tr v-for="employee in tabs">
<td>{{employee.employeeId}}</td>
<td>{{employee.employeeNo}}</td>
<td>{{employee.birthday}}</td>
</tr>
</table>
</div>
</div>
</div>
<script src="lib/vue/vue.min.js" type="application/javascript"></script>
<script src="lib/vue/axios.min.js" type="application/javascript"></script>
<script src="js/index.js" type="application/javascript"></script>
</body>
</html>
index.js
;(function(){
var vue=new Vue({
el:'.container',
data:{
title:'hello,vue',
tabs:[]
},
created:function(){
axios.get('http://localhost:9000/init')
.then(function(res){
vue.$data.tabs=res.data;
})
}
});
})();