vue.js，ajax渲染页面

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

Meikongggg

8128人浏览 · 2017-11-28 13:45:43

Meikongggg · 2017-11-28 13:45:43 发布

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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^