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 EasyUI API 中文文档 - Form表单
Oct 06 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
php操作redis缓存方法分享
2015/06/03 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
cookie的secure属性详解
2015/04/08 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
使用Python的PEAK来适配协议的教程
2015/04/14 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
外贸采购员求职的自我评价
2013/11/26 职场文书
初中生自我鉴定
2014/02/04 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
学风建设演讲稿
2014/09/12 职场文书
完整版商业计划书
2014/09/15 职场文书
高二语文教学反思
2016/02/16 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python