Tutoriels Vue et Axios que même les débutants peuvent apprendre pour vous aider à vous lancer dans le développement front-end

Les didacticiels Vue et Axios que même les débutants peuvent apprendre vous aideront à démarrer avec le développement front-end

1 Introduction à Vue

Vue est un framework de développement front-end qui peut nous aider à créer des interfaces utilisateur interactives. Comparé à d'autres frameworks, Vue est plus léger, facile à apprendre et à utiliser, et convient au développement de projets de toutes tailles.

Installation 1.1 de Vue

Tout d'abord, nous devons installer Vue. Vous pouvez l'installer des manières suivantes :

1.1.1 Installer à l'aide de l'outil de gestion de packages

Utilisez npm ou Yarn dans la ligne de commande pour installer Vue :

npm install vue

ou

yarn add vue

1.1.2 Utilisez CDN pour importer

Ajoutez dans le fichier HTML Le code suivant :

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

1.2 Hello World

Ajoutez un conteneur dans le fichier HTML :

<div id="app">
  {{ message }}
</div>

Ajoutez le code suivant dans le fichier JavaScript :

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

Ouvrez le navigateur et vous verrez les mots " Bonjour le monde!"

2. Introduction à Axios

Axios est un client HTTP basé sur Promise, utilisé pour envoyer des requêtes HTTP dans les navigateurs et Node.js. Il peut demander des données sur différents domaines sur différentes plates-formes et prend en charge l'interception des demandes, l'interception des réponses et d'autres fonctions.

2.1 Installation d'Axios

Utilisez la commande suivante pour installer Axios :

npm install axios

ou

yarn add axios

2.2 Envoyer une requête GET

Ajoutez le code suivant dans le fichier JavaScript :

axios.get('/api/users')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

Le code ci-dessus envoie une requête GET et imprime les données de retour.

2.3 Envoyer une requête POST

Ajoutez le code suivant dans le fichier JavaScript :

axios.post('/api/users', {
  firstName: 'John',
  lastName: 'Doe'
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

Le code ci-dessus envoie une requête POST et transmet un objet JSON comme corps de la requête.

3. Combiner Vue et Axios

Maintenant, utilisons Vue et Axios ensemble.

3.1 Installer Vuex

Vuex est un modèle de gestion d'état développé spécifiquement pour les applications Vue.js. Utilisez la commande suivante pour installer Vuex :

npm install vuex

ou

yarn add vuex

3.2 Créer un magasin

Ajoutez le code suivant dans le fichier JavaScript :

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    users: []
  },
  mutations: {
    setUsers(state, users) {
      state.users = users;
    }
  },
  actions: {
    getUsers({ commit }) {
      axios.get('/api/users')
        .then(function (response) {
          commit('setUsers', response.data);
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  }
});

export default store;

Le code ci-dessus crée un magasin Vuex, où l'état définit un état nommé utilisateurs, mutations A. La méthode nommée setUsers est définie pour mettre à jour la valeur des utilisateurs, et actions définit une méthode nommée getUsers pour envoyer une requête GET et mettre à jour la valeur des utilisateurs.

3.3 Utiliser store

Ajoutez le code suivant dans le fichier JavaScript :

import Vue from 'vue';
import store from './store';

new Vue({
  el: '#app',
  store,
  mounted() {
    this.$store.dispatch('getUsers');
  },
  computed: {
    users() {
      return this.$store.state.users;
    }
  }
});

Le code ci-dessus importera le magasin, utilisera le magasin dans l'instance Vue et appellera la méthode getUsers dans le hook monté pour enregistrer les données obtenues dans utilisateurs. Liez ensuite les utilisateurs au modèle du composant via des propriétés calculées.

Maintenant, actualisez la page et vous verrez les données utilisateur obtenues en arrière-plan.

Conclusion

Grâce à ce tutoriel, vous avez appris à créer une application front-end simple à l'aide de Vue et Axios. J'espère que cet article vous sera utile et vous permettra de mieux comprendre l'utilisation de Vue et Axios, ainsi que leurs scénarios d'application dans le développement front-end. Je vous souhaite un bon apprentissage et du plaisir avec 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!