VUE初级教程

使用Vue.js和Axios从第三方API获取请求数据

axios之Vue请求初始化数据放在Created还是Mounted?

axios介绍

基于Promise的HTTP客户端,用于浏览器和node.js axios-github

  • 制作的XMLHttpRequest从浏览器
  • HTTP从node.js的请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • JSON数据的自动转换
  • 客户端支持以防止XSRF

vue的初始化过程

lifecycle

1
var app = new Vue({        el: "#app",        data: {            num: 0        },        beforeCreate() {                console.log("创建前")        },        created() {            console.log("创建")        },        beforeMount() {            console.log("计数前")        },        mounted() {            console.log("计数了")        },    })

之前赋值不到vue的data里

最开始放在 created(),mounted()都可以赋值过去

1
2
var mydata="" ;var app = new Vue({        el: "#app",        data: {            num: 0,            tableDataA:mydata        },        beforeCreate() {                console.log("创建前")        },        created() {            console.log("创建")        },        beforeMount() {            console.log("计数前")        },        mounted() {            console.log("计数了")        },    })
axios.get('http://localhost:8081/BackSpace/test') .then(function (response) { // mydata=response.data 刚开始使用的这个 但是一直赋值不过去 //这个方法也不行,this不能指代当前这个app对象 this.tableDataA=response.data}) .catch(function (error) { console.log(error);});

成功的版本

1
axios.get('http://localhost:8081/BackSpace/test').then(response => {this.tableDataA=response.data}).catch(function (error) {console.log(error);});