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 相关文章推荐
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
实现变速回到顶部的JavaScript代码
May 09 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
es5 类与es6中class的区别小结
Nov 09 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
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
smarty section简介与用法分析
2008/10/03 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
Python生成验证码实例
2014/08/21 Python
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
python同时遍历两个list用法说明
2020/05/02 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
原装进口全世界:天猫国际
2016/08/03 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
建龙钢铁面试总结
2014/04/15 面试题
大学生个人求职信范文
2013/09/21 职场文书
承办会议欢迎词
2014/01/17 职场文书
庆国庆活动总结
2014/08/28 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
党支部意见范文
2015/06/02 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers