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

2018-02-17 19:16:33来源:作者:人点击

分享

关于上次说的用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渲染页面的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持第七城市。

您可能感兴趣的文章:

  • 详解vuejs之v-for列表渲染
  • 写给vue新手们的vue渲染页面教程

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台