开发者学堂课程【Vue.js 入门与实战：品牌列表-从数据库获取列表】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8159
品牌列表-从数据库获取列表
一、Vue-resource 改造品牌列表案例
基于之前学习的 vue-resource 学习品牌管理改造，之前是在本地创建数据，现在使用 vue-resource 请求远端数据库。
（首先需要学会使用查看 api 接口，可以学习到，所有的 api 域名，http://vue.studyit.io 如果后面文档中，有的域名地址与这个不一致，应与这个保持一致。）
1.第一步：导入
在 vue 包下导入 vue-resource
<script src=”./lib/vue-2.4.0.js”></scipt><script src=”./lib/vue-resource1.3.4.js”></scipt>
2. 画框
导入之后，在 vm 上， name 就可以请求数据了
<link rel =”stylesheet”href=”./lib/bootstrap-3.3.7.css”>
3. 填入表格内容
<div id=”app”>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>ctime</th>
<th>operation</th>
el:’#app’,
Data:(
List:(
{id:1,name:’五菱宏光’,ctime:new date()}
{id:1,name:’众泰’,ctime:new date()}
<tr v-for=’item in list’=key=”item.id”>
<tr v-for="item in list":key="item.id"> //key 只接受字符串或者 number
<td> {{item.id}} </td>
<td> {{item.name}} </td>
<td> {{item.ctime}} </td>
<td><td>
<td><td>
<tr>
</tbody>
</table>
此时，右键浏览结果显示如下：
<Div class="panel panel-primary>
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline’’>
//是为了能够让所有内容在一行显示
<label>
Name:
<input type="text" v-model="name"class="form-control">
</label>
<input type="button" value="添加”@click="add"class="btn btn-prima">
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>ctime</th>
<th>operation</th>
</tr>
</thead>
<Tbody>
<tr v-for="item in list":key="item.id"> //key 只接受字符串或者 number
<td> {{item.id}} </td>
<td> {{item.name}} </td>
<td> {{item.ctime}} </td>
<td><td>
<td><td>
<tr>
</tbody>
</table>
此时，显示结果如下图：
<script>
//创建 Vue 实例，得到 ViewMode1
var Vm = new Vue {{
el: ‘#app'
data:{
name:’’,
list:[ //存放所有品牌列表的数组
{id:1,name:’五菱宏光’，ctime:new Date() },
{id:2, name:’众泰',ctime:new Date() }
]
}
created() {
//当 vm 实例的 data 和 methods 初始化完毕后，vm 实例会自动执行 created 这个生命周期函数.
this.getA11List()
},
methods: {
add() {}
getAllList() {//获取所有的品牌列表
//分析：
由于已经导入了 Vue-resource 包，所以，可以直接通过 this.$http 发起数据请求，根据接口 API 文档，获取列表应该发起 get 请求。this.$http.get('ur1').then(function(result){})当通过 then 指定回调函数之后，在回调函数中，可以拿到数据服务器返回的 result 先判断result.status 是否等于0，如果等于0，就表示成功，可以把 result.message 赋值给 this.list ；如果不等于0，可以弹框提醒，获取数据失败！在整个 new 的过程中会执行一系列的生命周期函数。
这时候调用 getAllList()方法，就会发起请求，同时，实例继续向后执行。在编译阶段数据就已经请求过来了，只要页面一被挂载上去，就可以看到数据，所以应该尽早发送请求。this.$http.get('http://vue.studyit.io/api/getprodlist').then(result→{
//注意：通过 $http 获取到的数据，都储存在 result.body 中
Var result result.body
if (result.status===0) {
//成功
this.list result.message
} else {
//失败
alert("获取数据失败！’)
