Comment utiliser ajax pour afficher une page dans vue.js-js tutoriel-php.cn

Comment utiliser ajax pour afficher une page dans vue.js

亚连

Libérer： 2018-06-06 11:17:14

original

2873 Les gens l'ont consulté

Ci-dessous, je vais partager avec vous un exemple de pages de rendu vue.js et ajax. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Concernant ce que j'ai mentionné la dernière fois, utiliser vue.js, zepto, node.js, webpack et d'autres technologies pour reconstruire CNode. Il s'agit d'un projet relativement introductif. Généralement, vous pouvez commencer après avoir appris Vue. Le site Web CNode dispose d'une API publique, vous pouvez donc obtenir toutes les interfaces de données de ce site Web, puis les restituer sur la page et les traiter avec CSS. Au début, j’ai toujours senti que c’était très difficile, très difficile, très difficile. Même si je ne pouvais pas dire où était la difficulté, j’avais juste l’impression que c’était très difficile, très difficile, très difficile. Permettez-moi de développer, n'est-il pas simplement d'utiliser ajax pour obtenir les données, puis de les transmettre au composant pour le rendu, puis de les imiter et d'écrire le style. Ce n'est pas difficile, mais pourquoi est-ce que je trouve naturellement cela difficile ?

CNode nous donne une interface de données, et ajax n'a que quelques méthodes. Plus tard, j'y ai réfléchi attentivement et j'ai découvert que la place de la peur dans mon cœur était ajax. Oui, vous m'avez donné l'interface de données et je peux obtenir les données, mais qu'est-ce que vous m'avez donné ? Avant de l'utiliser, je ne connaissais pas les données obtenues par ajax. Les gens ont toujours peur de ce qu’ils ne connaissent pas ! Comme mes camarades de classe l'ont dit, je pensais qu'Ajax était difficile avant, mais plus tard, j'ai découvert que c'était bien lorsque je l'utilisais. Je pense que la confusion de la plupart des débutants à propos d'Ajax réside souvent dans leur peur de la nature inconnue des données qu'ils obtiennent.

Puisqu'on a peur de son caractère inconnu, autant bien regarder ces "données" ! Ici, j'utilise la méthode Ajax de zepto (apprenez-la maintenant et utilisez-la maintenant).

let data = { 
 page: 1, 
 limit: 20,//获取20个 
 tab: &#39;all&#39;, 
 mdrender: true 
}; 
let topics = []; 
$.get("https://cnodejs.org/api/v1/topics", data, function (res) { 
   if (res && res.data) { // 如果查到数据 
   topics = res.data; 
   } 
  })

Copier après la connexion

Entrez ensuite les sujets dans la console

ajax obtient le format Json, comme le montre l'image ci-dessus, nous pouvons voir que 20 "objets" de type Json sont obtenus, chaque objet a tant de propriétés. Par exemple, je veux obtenir le titre du premier objet

Maintenant, vous auriez dû voir à travers les données obtenues par ajax, je sens qu'après avoir fait ce petit pas, toute la personne se sent détendue.

Frappez pendant que le fer est chaud, utilisez simplement vue pour afficher une 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="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> 
</p> 
<script src="Ajax-demo1.js"></script> 
</body> 
</html>

Copier après la connexion

JS :

new Vue({ 
 el: &#39;#app&#39;, 
 data:{ 
  items:[], 
  scroller:null, 
  tip:{ 
    page: 1, 
    limit: 20, 
    tab: &#39;all&#39;, 
    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() { 
 
 } 
})

Copier après la connexion

emmmmm, j'ai une petite question. AJAX est une fonction asynchrone (vous pouvez lire mon dernier blog sur l'asynchronie). Son environnement d'exécution de fonction de rappel est la portée globale, donc dans getData, celui d'AJAX pointe vers window. Il existe deux solutions à cela, l'une consiste à utiliser self pour enregistrer ceci comme moi, et l'autre consiste à utiliser la fonction flèche pour le lier.

Souvent, nous avons souvent peur de l'inconnu, et cette peur nous empêche souvent de faire le pas pour vaincre l'inconnu. À ce moment-là, mordez la balle et faites un pas en avant. existent dans l'esprit à l'intérieur.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment implémenter le principe de vue basée sur les données via vuejs

Comment utiliser les composants parents pour appeler le composant enfant événements dans Vue

Comment implémenter la fonction de commutation d'affichage/masquage du mot de passe dans vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!