Maison > Article > interface Web > Guide de développement front-end basé sur Vue et Axios pour vous aider à démarrer rapidement

Guide de développement front-end basé sur Vue et Axios pour vous aider à démarrer rapidement

PHPzoriginal: 2023-07-17 16:48:071218parcourir

Le développement front-end est aujourd'hui l'un des postes les plus populaires dans l'industrie Internet. En tant que développeur front-end, l'utilisation des bons outils et frameworks peut améliorer l'efficacité du travail et la qualité du développement. Dans le développement front-end actuel, Vue et Axios sont deux outils populaires.

Vue.js est un framework frontal JavaScript populaire qui nous aide à créer des interfaces utilisateur complexes et efficaces en fournissant une API et un système de composants faciles à utiliser. Axios est une puissante bibliothèque de requêtes HTTP permettant d'envoyer des requêtes HTTP asynchrones dans les navigateurs et Node.js.

Dans cet article, nous explorerons comment utiliser Vue et Axios pour le développement front-end, avec quelques exemples de code pour vous aider à approfondir votre compréhension.

1. Installation
Tout d'abord, nous devons ajouter Vue et Axios à notre projet. Vous pouvez l'installer via l'outil de gestion de packages npm ou Yarn.

Commande d'installation npm :

npm install vue axios

commande d'installation yarn :

yarn add vue axios

2. Initialiser l'application Vue
Avant de commencer à utiliser Vue et Axios, nous devons initialiser une application Vue. Ajoutez le code suivant à votre page HTML :

<!DOCTYPE html>
<html>
<head>
  <title>Vue Axios Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
  <script src="app.js"></script>
</body>
</html>

Ensuite, créez le fichier app.js dans le même répertoire et ajoutez-y le code suivant :

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

De cette façon, nous avons initialisé une simple application Vue, et le message est lié au titre de la page HTML.

3. Envoyer une requête HTTP
Tout d'abord, nous devons importer le module Axios. Ajoutez le code suivant au fichier app.js :

import Axios from 'axios';

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    data: null
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      try {
        const response = await Axios.get('https://api.example.com/data');
        this.data = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
});

Dans ce code, nous envoyons une requête GET à l'aide d'Axios et lions les données renvoyées à la propriété data de l'application Vue.

4. Afficher les données
Nous avons obtenu les données avec succès et nous devons maintenant les afficher sur notre page. Ajoutez le code suivant au HTML :

<div id="app">
  <h1>{{ message }}</h1>
  <div v-if="data">
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
  <div v-else>
    Loading...
  </div>
</div>

Dans ce code, nous utilisons le rendu conditionnel de Vue (v-if et v-else) pour afficher des données ou des invites de chargement selon que la valeur des données est vide ou non.

5. Exécutez l'application
Maintenant, nous avons terminé l'écriture du code. Ouvrez votre navigateur et visitez notre application. Vous verrez que le titre de la page est "Bonjour Vue !" et une invite de chargement. Ensuite, Axios enverra une requête GET pour obtenir les données et les afficher sur la page.

6. Résumé
En étudiant cet article, vous devriez déjà savoir comment utiliser Vue et Axios pour le développement front-end. Vue offre de puissantes capacités de gestion des couches de vues, tandis qu'Axios fournit des fonctions de requête HTTP simples et puissantes.

Bien sûr, il y a d'autres utilisations et fonctions de Vue et Axios qui attendent que vous les découvriez et les appreniez. J'espère que cet article pourra vous aider à démarrer rapidement avec Vue et Axios et à jouer un rôle exceptionnel dans le développement front-end.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser Axios pour gérer et contrôler les autorisations des utilisateurs dans les projets VueArticle suivant：Comment utiliser Axios pour gérer et contrôler les autorisations des utilisateurs dans les projets Vue

Articles Liés

Voir plus