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

关于上次说的用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渲染页面教程
赞 (0)

相关推荐

  • 详解vuejs之v-for列表渲染

    详解vuejs之v-for列表渲染

    Vue.js是一个构建数据驱动的web界面的库.重点集中在MVVM模式的ViewModel层,因此非常容易与其它库或已有项目整合 Vue.js 的核心是一个响应的数据绑定系统,它让数据与DOM保持同步非常简单 如下列表展示,当我们从后端接口或者json文件使用ajax获取数据之后现实到页面,我们有n中方式去把数据渲染到页面 1.使用js的for循环去遍历填充 2.ng的ng-repeat 今天我们使用vue.js的v-for 一.html <div class="shop_list_box

  • 写给vue新手们的vue渲染页面教程

    写给vue新手们的vue渲染页面教程

    前言 本文主要给各位vue的新手们分享了关于vue渲染页面的教程,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. vue渲染页面 路径图 index.html App.vue router.js main.js 效果图: 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对我们的支持.

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

    关于上次说的用vue.js,zepto,node.js,webpack等技术重构CNode.这是一个比较入门的项目,一般你学完vue就可以上手了,CNode网站有公开的API所以你可以获取这个网站的所有数据接口,然后渲染到页面上,用CSS等加工一下就可以了.起初,我一直感觉好难好难好难,虽然说不出难在哪里,就感觉好难好难好难.让我细说,不就是用ajax获取数据,然后传到组件上渲染吗,再模仿着写样式不就好了吗.是不难啊,可是为什么我心里天然觉得很难呢? CNode是给了我们数据接口,ajax也就那

  • vue服务端渲染页面缓存和组件缓存的实例详解

    vue缓存分为页面缓存.组建缓存.接口缓存,这里我主要说到了页面缓存和组建缓存 页面缓存: 在server.js中设置 const LRU = require('lru-cache') const microCache = LRU({ max: 100, // 最大缓存的数目 maxAge: 1000 // 重要提示:条目在 1 秒后过期. }) const isCacheable = req => { //判断是否需要页面缓存 if (req.url && req.url ===

  • 在vue中把含有html标签转为html渲染页面的实例

    在vue中把含有html标签转为html渲染页面的实例

    在标签内部添加v-html指令即可 使用pug的写法: 这个content表示的是一个含标签的变量 输入content为:<p>我是p标签</p> 输出结果是:我是p标签 普通用户一样: 同上理 加v-html就行了 以上这篇在vue中把含有html标签转为html渲染页面的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue.js进行查询操作的实例详解

    Vue.js进行查询操作的实例详解

    Vue.js进行查询操作的实例详解 实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../lib/vue.min.js" type="text/javascript" ></script> <title>字符转换</title> </head>

  • 解决vue.js 数据渲染成功仍报错的问题

    最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错.很是郁闷!data函数如下 export default { name: 'hello', data() { return { card:{} } } } 返回的数据如下: { "object":{ "subObject":"123", ... } } 报错的原因是在data函数return的card里没有二级

  • Vue.js实现拖放效果的实例

    Vue.js实现拖放效果的实例

    页面效果如下所示: 代码请看这里,当当当当: html: <template> <div class='drag-content'> <div class='project-content'> <div class='select-item' draggable='true' @dragstart='drag($event)' v-for='pjdt in projectdatas'>{{pjdt.name}}</div> </div>

  • Vue.js框架路由使用方法实例详解

    Vue.js框架路由使用方法实例详解

    Vue.js框架路由使用方法实例详解 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width,initial-

  • Vue.js实现输入框绑定的实例代码

    Vue.js实现输入框绑定的实例代码

    实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动态编辑</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type=

  • vue.js自定义组件directives的实例代码

    自定义指令:以v开头,如:v-mybind. 代码示例: <input v-mybind /> directives:{ mybind:{ bind:function (el) { el.value = "this is mybind-bind" } }} 这时页面初始化时,input中会显示this is mybind-bind. 通过directives注册自定义指令mybind,每一个自定义指令中又提供若干钩子,如示例中的bind,bind的作用是定义一个在绑定时执行

  • Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)

    Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)

    1.前阶段做了这个地址管理页面,实现的过程中遇到了很多的问题,好在最后实现了,在此记录一下: 首先是加载页面阶段ajax从数据库中获取数据,然后动态的显示在页面中,随后可以点击单个的编辑或删除进行相关操作,可以单击默认地址按钮进行样式切换,默认地址可以没有(单击选中和取消),但是如果设置默认地址则只能设置一个,好,下面我们来一步一步的实现. 2.我这里使用的是Vue.js,页面加载阶段很简单,直接在mounted声明一个方法,然后在方法中调用ajax请求访问数据然后通过v-for循环将数据放入到

随机推荐