使用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 相关文章推荐
用Javascript实现Sleep暂停功能代码
Sep 03 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
js操作数组函数实例小结
Dec 10 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
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
单位速度在实战中的运用
2020/03/04 星际争霸
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
php中namespace及use用法分析
2016/12/06 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
js模拟类继承小例子
2010/07/17 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
Python Trie树实现字典排序
2014/03/28 Python
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Python编程中的文件操作攻略
2015/10/16 Python
python字符串过滤性能比较5种方法
2017/06/22 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js