Vue教程（四）加载后台数据

在Vue实例化时，写一个方法调用后台接口，加载后台数据。

1 安装一个npm包vue-resource：

• npm install vue-resource

安装vue-resource

• npm install vue-resource
  vue-resource版本

2 写方法调用后台接口

• 首先引用上面安装vue-resource包
• 在Vue组件里写方法调用接口，再此调用自己写的WebAPI接口，跨域同源问题，已在后台处理。对于WebAPI接口可参考先前文章
  Asp.net WebAPI+Dapper搭建API服务接口
  Vue.use(VueResource) ;
  使用$http.get方法请求数据

<template>
  <div id="app" class="dd">
    <!-- <img src="./assets/logo.png"> -->
    <h1>凌云木Vue</h1>       
          <router-link to="/">主页</router-link>
          <router-link to="/About">详情</router-link>      
    <router-view/>
  </div>
</template>
 
<script>
import Vue from 'vue';
import VueResource from 'vue-resource';
Vue.use(VueResource) ;
export default {
  name: 'App',
  mounted() {
            this.drawLine();
        },
  methods: {
            drawLine: function () {
                console.log("OK");
                this.$http.get('http://192.168.0.89:10111/api/Values/GetUserData').then((data) => { 
                console.log(data.body);
                 });                                                  
            }
        }
}
</script>

打印后台数据

结束：以上都是我自学研究的结果，水平有限，欢迎指正。