vue.js,ajax渲染页面的实例


Posted in Javascript onFebruary 11, 2018

关于上次说的用vue.js,zepto,node.js,webpack等技术重构CNode。这是一个比较入门的项目,一般你学完vue就可以上手了,CNode网站有公开的API所以你可以获取这个网站的所有数据接口,然后渲染到页面上,用CSS等加工一下就可以了。起初,我一直感觉好难好难好难,虽然说不出难在哪里,就感觉好难好难好难。让我细说,不就是用ajax获取数据,然后传到组件上渲染吗,再模仿着写样式不就好了吗。是不难啊,可是为什么我心里天然觉得很难呢?

CNode是给了我们数据接口,ajax也就那么几个方法。后来我仔细想想,发现了内心恐惧的地方是ajax。是啊,给了我数据接口,我能获取到数据,但是你给了我什么啊?在没用之前,对于ajax获取到的数据我是未知的。人总对自己未知的东西感到恐惧!就像同学说的,ajax我之前以为很难的啊,后来我用起来感觉也没什么啊。我想,大部分初学者对于ajax的困惑往往就在于对他获取到的数据的未知性的恐惧。

既然恐惧它的未知性,那么我们不妨好好看看这个“数据”!这里我用的是zepto的Ajax方法(现学现用嘛)。

let data = { 
 page: 1, 
 limit: 20,//获取20个 
 tab: 'all', 
 mdrender: true 
}; 
let topics = []; 
$.get("https://cnodejs.org/api/v1/topics", data, function (res) { 
   if (res && res.data) { // 如果查到数据 
   topics = res.data; 
   } 
  })

然后在Console输入topics

ajax获取到的是Json格式,如上图所示,我们可以看到获取到了20个Json类型的“对象”,每个对象有那么多个属性。比如我要获取第一个对象的title

现在你应该看穿了ajax获取到的那个数据了吧,感觉这一小步迈出去后,整个人都轻松了。

趁热打铁,简单的用vue渲染一个页面。

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Document</title> 
 <script src="http://zeptojs.com/zepto.js"></script> 
 <script src="vue.js"></script> 
</head> 
<body> 
<div id="app"> 
 <ul> 
  <li v-for="(item,i) in items" :key="item.id">  
   <span class="index" :title="i + 1">{{(i + 1) > 9999 ? "..." : (i + 1)}}</span> 
   <span class="face"> 
     <img :src="item.author.avatar_url" alt="" :title="item.author.loginname" width="80" height="80" /> 
   </span> 
   <span class="name" :title="item.title">{{item.title}}</span></li> 
 
 </ul> 
</div> 
<script src="Ajax-demo1.js"></script> 
</body> 
</html>

JS:

new Vue({ 
 el: '#app', 
 data:{ 
  items:[], 
  scroller:null, 
  tip:{ 
    page: 1, 
    limit: 20, 
    tab: 'all', 
    mdrender: true 
  } 
 }, 
 methods:{ 
  getData(){ 
   let self = this; 
   $.get("https://cnodejs.org/api/v1/topics", this.tip, function (res) { 
    if (res && res.data) { // 如果查到数据 
    self.items = res.data; 
   } 
  }) 
  } 
 }, 
 created:function() { 
  this.getData(); 
  console.log("success"); 
 }, 
 mounted:function() { 
 
 } 
})

emmmmm,有个小问题得说下,AJAX是异步函数(关于异步可以去看我上一篇博客),它的回调函数执行环境是全局作用域,所以在getData中AJAX的this指向的是window。这有两个解决方法,一个是像我这样的用self把this存起来,还有一种就是用箭头函数this绑定。

很多时候,我们往往对未知的事物感到恐惧,而这个恐惧往往阻碍我们迈出战胜未知的那一步,这时候咬咬牙,迈出去就好了,困难永远都只存在于脑子里。

以上这篇vue.js,ajax渲染页面的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
提交表单时执行func方法实现代码
Mar 17 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
JS分页控件 可用于无刷新分页
Jul 23 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
封装属于自己的JS组件
Jan 27 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
Aug 17 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 #Javascript
vue中引用阿里字体图标的方法
Feb 10 #Javascript
Express进阶之log4js实用入门指南
Feb 10 #Javascript
Vue完整项目构建(进阶篇)
Feb 10 #Javascript
JS简单获得节点元素的方法示例
Feb 10 #Javascript
JS简单添加元素新节点的方法示例
Feb 10 #Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 #Javascript
You might like
linux命令之调试工具strace的深入分析
2013/06/03 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
小谈php正则提取图片地址
2014/03/27 PHP
PHP学习笔记(一) 简单了解PHP
2014/08/04 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
Python之用户输入的实例
2018/06/22 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
python实现代码审查自动回复消息
2021/02/01 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
两则小学生的自我评价分享
2013/11/14 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
商场租赁意向书
2014/07/30 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
电话营销开场白
2015/05/29 职场文书