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 相关文章推荐
jQuery中调用WebService方法小结
Mar 28 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
Element Badge标记的使用方法
Jul 27 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
php session 错误
2009/05/21 PHP
php开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
表单元素事件 (Form Element Events)
2009/07/17 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
Python如何读写二进制数组数据
2020/08/01 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
德国网上花店:Valentins
2018/08/15 全球购物
php优化查询foreach代码实例讲解
2021/03/24 PHP
大学生预备党员自我评价分享
2013/11/16 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
2015年党员自评材料
2014/12/17 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
电影开国大典观后感
2015/06/04 职场文书
开国大典观后感
2015/06/04 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
2016年教师节慰问信
2015/12/01 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书