(vue.html)
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
<script type="text/javascript">
//模擬個數據
Mock.mock(
'http://mockjs',{
"status":"200",
"message":"ok",
"data|10":[{
"id|+1":1,
"name|1-10":"*",
"age|20-80":20,
"email":"@date('yyyy-MM-dd')"
}]
});
</script>
</head>
<body>
<div id="app">
<button id="btn" v-on:click="print" type="button">click</button>
<input type="text" v-model="message" id="txt"/>
<div id="dv">{{message}}</div>
<table border="1">
<tr>
<th>編號</th>
<th>姓名</th>
<th>年齡</th>
<th>郵箱</th>
</tr>
<tr v-for="u in list">
<td>{{u.id}}</td>
<td>{{u.name}}</td>
<td>{{u.age}}</td>
<td>{{u.email}}</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
message:"我愛藍橋",
list:[{
id:"1",
name:'大藍橋',
age:25,
email:'[email protected]'
},
{
id:"2",
name:'藍橋2',
age:252,
email:'[email protected]'
}]
},
created:function () {
this.init();
},
// methods:{
// //點擊click執行的方法
// print:function () {
// alert(this.message);
// },
// //ajax調用json值
// init:function () {
// var _self=this;
// axios.get("=user.json")
// .then(function (response) {
// if(response.data.status=="200"){
// _self.list=response.data.data;
// }
// })
// .catch(function (error) {
// console.log(error);
// })
// }
// },
methods:{
//點擊click執行的方法
print:function () {
alert(this.message);
},
//ajax調用
init:function () {
var _self=this;
axios.get("http://mockjs")
.then(function (response) {
if(response.data.status=="200"){
_self.list=response.data.data;
}
})
.catch(function (error) {
console.log(error);
})
}
}
})
</script>
</html>
(user.json)
{
"status":"200",
"message":"ok",
"data": [
{
"id":"1",
"name":"小張三",
"age":35,
"email":"[email protected]"
}
]
}