bootstrap+vue+axios+json格式
阿新 • • 發佈：2018-11-30
快捷鍵
.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> 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"/> index.js
/*自執行函式，又稱封包自執行函式，相當於java中的包
* 特點：別的js訪問不到其中的內容，防止全域性汙染*/
;(function(){
var vue=new Vue({
/*el代表在頁面上找到這個元素，被vue做成模板，參與編譯*/
el:'.container',
/*雙向繫結*/
data:{
title:'hello,vue',
/*tabs:[{"userId":"1","userName":"張三","birthday":"2019-10-10"},
{"userId":"2","userName":"李四","birthday":"2019-10-11"},
]*/
tabs:[]
},
/*vue物件建立好的一瞬間，初始化鉤子*/
created:function(){
axios.get('http://localhost:9000/init')
.then(function(res){
vue.$data.tabs=res.data;
})
}
});
})();