vue.js搭建用户管理系统练手（三）----http请求列表数据

上一节我们在vue.js引入bootstrap的基本框架，这节我们顺便显示列表数据：

改造Customer.vue:

<template>
  <div class="customers container">
  <h1 class="page-header">用户管理系统</h1>
  <table class="table table-striped">
    <thead>
        <tr>
            <th>姓名</th>
            <th>电话</th>
            <th>邮箱</th>
            <th></th>
        </tr>
    </thead>
     <tbody>
        <tr v-for="customer in customers">
            <td>{{customer.name}}</td>
            <td>{{customer.phone}}</td>
            <td>{{customer.email}}</td>
            <td></td>
        </tr>
     </tbody>
  </table>

  </div>
</template>

<script>
export default { 
  name: 'customers',
  data () {
    return {
        customers:[]
    }
  },
  methods:{
    fetchCustomers(){
        this.$http.get("http://localhost:3000/users")
            .then(function(response){
               //console.log(response);
               this.customers = response.body;
            })
    }
  },
    created(){
        this.fetchCustomers();
    }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

• 在实例被创建的时候就调用fetchCustomers方法获取数据放入到customers 中
• 引入bootstrap的container样式，通过v-for指令将获取到的json数组数据循环显示

ps;如果没有注册 vue-resource ，需要通过npm install vue-resource –save命令来注册该插件，该插件用于http请求获取数据！