量化接口-vue2x 使用jQuery方法获取api接口中的数据并渲染到页面上附api接口获取渠道

环境配置

初始化vue项目

文件结构如所示：

安装jQuery

plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery'
    })
  ]

vue2x 使用jQuery方法获取api接口中的数据并渲染到页面上附api接口获取渠道

之后重新运行程序，这一步很重要！！！！

jQuery获取api接口

语法：

$.get('api接口地址', function (apidata, status) {});

其中apidata就是接口内返回的数据，status是获取接口的状态，如果得到了接口数据则显示为success

 data() {
    return {
      dataapi: [],
    };
  },
 created() {
    this.getapi();
  },
 methods: {
    getapi() {
    //回调函数中的this已经改变，因此无法访问到response中的data数据，所以需要重新设置一个变量将this保存起来
      var that = this; 
      $.get(
        'http://jsonplaceholder.typicode.com/posts',
        function (apidata, status) {
          if (status == 'success') {
          
            that.dataapi = apidata;
            console.log(this.dataapi);
          }
        }
      );
    },
  },

注意：一定要重新设置变量把this存起来，否则数据无法渲染到页面上；

接口数据渲染到页面上

由于apidata返回的是一个object，所以调用时直接使用“xxx.属性名”的方式来获取属性值