使用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英文日期(有时间)选择器
May 02 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
Angular5.1新功能分享
Dec 21 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
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
source.php查看源文件
2006/12/09 PHP
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
python实现博客文章爬虫示例
2014/02/26 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
python实现感知机模型的示例
2020/09/30 Python
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
附答案的Java面试题
2012/11/19 面试题
商务英语专业应届毕业生求职信
2013/10/28 职场文书
医学生自我评价
2014/01/27 职场文书
授权委托书格式范文
2014/08/02 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
质量保证书格式
2015/02/27 职场文书