后台数据的获取与推送
前言
关于vue的相关学习过程,在这里做下记录,方便以后查看。
因为公司需求,需要学习点前端的东西,看完HTML和CSS。然后学到JS和jQuery的时候,看到vue的口碑很不错,正好自己也觉得这个东西很有意思,就学习下。
基础的介绍语法什么的就不在这里啰嗦了,不知道或忘记的话去官网查看:vue官网通道
好了,下面正式开始学习。
一、开始—hello vue
跟随大多数语言学习的方式,从hello XXX开始学习vue
<div id="app">
<input v-model="name">
<h2>{{ product }} are in stock.</h2>
<p>{{ name }}</p>
</div>
const app = new Vue({
el: '#app',
data: {
product : 'boots',
name : 'jhon'
},
});
就能看到结果了
修改input框中的内容jhon,下面的jhon也会随之改变,体现vue的双向数据绑定特性。
二、从后台获取数据,然后遍历获取到的数据
HTML部分
<table id="tb">
<tr v-for="item in list">
<td>{{ item.id}}</td>
<td>{{ item.name }}</td>
<td>{{ item.sex }}</td>
</tr>
</table>
JavaScript(Vue)部分
const tb = new Vue({
el: '#tb',
data:{
list: []
},
created:function(){
this.$http.get('http://localhost/tp5/mytp5/public/index/ts').then(function (res) {
// console.log(res.body);
this.list = JSON.parse(res.body);//解析获取到的json数据
},function () {
console.log('error');
})
}
})
得到结果