Below I will share with you an example of vue.js and ajax rendering pages. It has a good reference value and I hope it will be helpful to everyone.
About what I mentioned last time, we use vue.js, zepto, node.js, webpack and other technologies to reconstruct CNode. This is a relatively entry-level project. Generally, you can get started after learning Vue. The CNode website has a public API, so you can obtain all the data interfaces of this website, then render them on the page and process them with CSS. At first, I always felt that it was very difficult, very difficult, very difficult. Although I couldn’t tell where the difficulty was, I just felt that it was very difficult, very difficult, very difficult. Let me elaborate, isn't it just to use ajax to get the data, then pass it to the component for rendering, and then imitate it and write the style. It's not difficult, but why do I naturally find it difficult?
CNode gives us a data interface, and ajax only has a few methods. Later, I thought about it carefully and found that the place of fear in my heart was ajax. Yes, you gave me the data interface and I can get the data, but what did you give me? Before using it, I didn't know the data obtained by ajax. People are always afraid of what they don’t know! As my classmates said, I thought ajax was difficult before, but later I found it was fine when I used it. I think most beginners' confusion about ajax often lies in their fear of the unknown nature of the data they obtain.
Since we are afraid of its unknown nature, we might as well take a good look at this "data"! Here I am using zepto’s Ajax method (learn it now and use it now).
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;
}
})Then enter topics in the Console
ajax obtains the Json format. As shown in the figure above, we can see that 20 "objects" of the Json type are obtained. Each object has So many attributes. For example, I want to get the title of the first object
Now you should have seen through the data obtained by ajax. I feel that after taking this small step, the whole person feels relaxed.
Strike while the iron is hot and simply use vue to render a page.
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>
<p 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="/static/imghwm/default1.png" data-src="item.author.avatar_url" class="lazy" : alt="" :title="item.author.loginname" style="max-width:90%" style="max-width:90%" />
</span>
<span class="name" :title="item.title">{{item.title}}</span></li>
</ul>
</p>
<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, There is a small problem that I have to mention. AJAX is an asynchronous function (you can read my last blog about asynchrony). Its callback function execution environment is the global scope, so in getData, this of AJAX points to the window. There are two solutions to this, one is to use self to save this like me, and the other is to use the arrow function to bind this.
Many times, we are often afraid of the unknown, and this fear often prevents us from taking the step to defeat the unknown. At this time, just bite the bullet and take a step forward. Difficulties will always only exist in the mind. inside.
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to implement the data-driven view principle through vuejs
##How to use parent components to call child component events in Vue
How to implement the password display and hide switching function in vue
The above is the detailed content of How to use ajax to render a page in vue.js. For more information, please follow other related articles on the PHP Chinese website!
总结分享几个 VueUse 最佳组合，快来收藏使用吧！Jul 20, 2022 pm 08:40 PMVueUse 是 Anthony Fu 的一个开源项目，它为 Vue 开发人员提供了大量适用于 Vue 2 和 Vue 3 的基本 Composition API 实用程序函数。本篇文章就来给大家分享几个我常用的几个 VueUse 最佳组合，希望对大家有所帮助！
聊聊Vue3+qrcodejs如何生成二维码并添加文字描述Aug 02, 2022 pm 09:19 PMVue3如何更好地使用qrcodejs生成二维码并添加文字描述？下面本篇文章给大家介绍一下Vue3+qrcodejs生成二维码并添加文字描述，希望对大家有所帮助。
Github 上 8 个不可错过的 Vue 项目，快来收藏！！Jun 17, 2022 am 10:37 AM本篇文章给大家整理分享8个GitHub上很棒的的 Vue 项目，都是非常棒的项目，希望当中有您想要收藏的那一个。
如何使用VueRouter4.x？快速上手指南Jul 13, 2022 pm 08:11 PM如何使用VueRouter4.x？下面本篇文章就来给大家分享快速上手教程，介绍一下10分钟快速上手VueRouter4.x的方法，希望对大家有所帮助！
聊聊vue指令中的修饰符，常用事件修饰符总结May 09, 2022 am 11:07 AM本篇文章带大家聊聊vue指令中的修饰符，对比一下vue中的指令修饰符和dom事件中的event对象，介绍一下常用的事件修饰符，希望对大家有所帮助！
如何覆盖组件库样式？React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM如何覆盖组件库样式？下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法，希望对大家有所帮助！
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
SublimeText3 English version
Recommended: Win version, supports code prompts!
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
