Guide de développement front-end basé sur Vue et Axios pour vous aider à démarrer rapidement-Voir.js-php.cn

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

PHPz

Libérer： 2023-07-17 16:48:07

original

1216 Les gens l'ont consulté

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

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

Copier après la connexion

commande d'installation yarn :

yarn add vue axios

Copier après la connexion

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>

Copier après la connexion

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!'
  }
})

Copier après la connexion

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);
      }
    }
  }
});

Copier après la connexion

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>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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