Home > Developer > JavaScript
Example of vue. js, ajax rendering page, vue. jsajax
We used vue. js, zepto, node. js, webpack and other technologies to reconstruct CNode. This is a relatively beginner project. Generally, you can get started after learning vue. The CNode website has open APIs, so you can get all the data interfaces of the website and render them to the page, you can simply process it with CSS. At first, I always felt so difficult, and difficult. Although I could not tell where the difficulties were, I felt so difficult. Let me explain in detail, isn't it just to use ajax to get data, then upload it to the component for rendering, and then imitate the writing style. It's not hard, but why do I naturally find it difficult?
CNode provides the data interface, and ajax also provides several methods. Later, I thought about it and found that ajax is the heart of fear. Yes, I gave the data interface. I can get the data, but what did you give me? Before it is useless, I am unknown about the data obtained by ajax. People are always afraid of what they know! As my classmates said, I thought it was very difficult to use ajax. Later I felt nothing. I think most beginners often get confused about ajax in the fear of the unknown data they have obtained.
Since we are afraid of its unknowns, let's take a good look at this "data "! Here I am using the zepto Ajax method (I want to learn how to use it now ).
Let data = {page: 1, limit: 20, // obtain 20 tabs: 'all', mdrender: true}; let topics = []; $. get ("https://cnodejs.org/api/v1/topics", data, function (res) {if (res & res. data) {// if you find the data topics = res. data ;}})
Enter topics on the Console.
Ajax obtains the Json format, as shown in. We can see that 20 "objects" of the Json type are obtained. Each object has so many attributes. For example, I want to obtain the title of the first object.
Now you should have read through the data obtained by ajax. It seems that this small step is easy for the whole person.
When it hits the heat, it simply uses vue to render a page.
HTML:
<!DOCTYPE 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) {// if you find the data self. items = res. data ;}}}, created: function () {this. getData (); console. log ("success") ;}, mounted: function (){}})Emmmmm has a small problem. AJAX is an asynchronous function (you can refer to my previous blog about Asynchronization), and its callback function execution environment is global scope, therefore, in getData, AJAX points to window. There are two solutions: one is to use self to store this, and the other is to bind this with the arrow function.
In many cases, we often feel fear of unknown things, which often hinders us from taking the step to defeat the unknown. At this time, we just need to bite our teeth and take a step, difficulties always exist in your mind.
The above example of vue. js and ajax rendering page is all the content shared by Alibaba Cloud xiaobian. I hope to give you a reference and support for the customer's house.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
