使用Vue实现调用接口加载页面初始数据
闲着没事写了一个电影推荐的网页，很简单，使用的是Vue的实现.
let vm = new Vue({
el:'#content',
data:{
name:'',
pic:'',
actor:'',
detail:'',
link:''
},
mounted:function () {
this.getMovie();
},
methods:{
getMovie:function () {
var _this = this;
let url = '/niuren/getRecommendFilm';
axios.get(url).then(function (res) {
_this.name = res.data.data.name;
_this.pic = res.data.data.pic;
_this.actor = res.data.data.actor;
_this.detail = res.data.data.detail;
_this.link =res.data.data.link;
})
},
goLink:function () {
var _this = this;
window.location.href = _this.link;
}
},
})
因为我使用的是axios, 在get方法中的this指向的这个函数，所以要在调用之前声明this的指向为Vue实例的this，
要不然就是赋值不成功，导致无法渲染(弄了半天)
以上这篇使用Vue实现调用接口加载页面初始数据就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
时间： -10-26
问题: 就是我在接口赋值给了data的变量,然后组件的效果没有出来(我的是旋转效果) 代码如下: data() { return { slides: [] } }, mounted() { this.request() }, methods: { request() { this.$http.post('xxxxxxxxxxxx', {}, (res) => { if (is.object(res)) { if (res.status === 'succ') { this.slides = re
在使用Vue框架的时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表的高度的时候,由于数据没有加载完,获取不到准确的高度.之前在使用jquery的时候,有ready可以帮助我们实现,但是Vue不存在此类方法,我们需要结合watch和this.$nextTick()来实现. nextTick:在下次 DOM 更新循环结束之后执行延迟回调. watch:用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调. 之前我是这样子使用nex
这两天学习了vue如何从接口请求数据,所以,今天添加一点小笔记.
获取图片列表 引入vue-resource.min.js文件,就可以引入接口方法了
