使用Vue实现调用接口加载页面初始数据


Posted in Javascript onOctober 28, 2019

闲着没事写了一个电影推荐的网页,很简单,使用的是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实现调用接口加载页面初始数据就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
原生javascript获取元素样式属性值的方法
Dec 25 Javascript
Jquery 的扩展方法总结
Oct 01 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
JavaScript制作3D旋转相册
Aug 02 #Javascript
微信小程序工具函数封装
Oct 28 #Javascript
js实现3D照片墙效果
Oct 28 #Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 #Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 #Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 #Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 #Javascript
You might like
php 日期时间处理函数小结
2009/12/18 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
Vue组件化开发思考
2018/02/02 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
详解微信UnionID作用
2019/05/15 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
毕业班联欢会主持词
2014/03/27 职场文书
小学生期末评语大全
2014/04/21 职场文书
家长会标语
2014/06/24 职场文书
代领毕业证委托书
2014/08/02 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
2015年国培研修感言
2015/08/01 职场文书
听课评课活动心得体会
2016/01/15 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python