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

网络编程 2024/11/14 佚名

3 2 1

关于上次说的用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="/UploadFiles/2021-04-02/zepto.js">

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渲染页面的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

vue.js,ajax,渲染页面

标签：

vue.js,ajax,渲染页面

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“vue.js,ajax渲染页面的实例”

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

暂无“vue.js,ajax渲染页面的实例”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2024年11月14日

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

vue.js,ajax,渲染页面

ajax请求+vue.js渲染+页面加载的示例

Node.js使用MySQL连接池的方法实例

评论“vue.js,ajax渲染页面的实例”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接