Vue- und Axios-Tutorials, die auch Anfänger erlernen können, um Ihnen den Einstieg in die Frontend-Entwicklung zu erleichtern

Vue- und Axios-Tutorials, die auch Anfänger erlernen können, helfen Ihnen beim Einstieg in die Frontend-Entwicklung

1 Einführung in Vue

Vue ist ein Frontend-Entwicklungsframework, das uns beim Erstellen interaktiver Benutzeroberflächen helfen kann. Im Vergleich zu anderen Frameworks ist Vue leichter, einfacher zu erlernen und zu verwenden und eignet sich für die Projektentwicklung jeder Größe.

1.1 Vue-Installation

Zuerst müssen wir Vue installieren. Sie können es auf folgende Arten installieren:

1.1.1 Installation mit dem Paketverwaltungstool

Verwenden Sie npm oder Yarn in der Befehlszeile, um Vue zu installieren:

npm install vue

oder

yarn add vue

1.1.2 Verwenden Sie CDN zum Importieren

Fügen Sie der HTML-Datei den folgenden Code hinzu:

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

1.2 Hello World

Fügen Sie einen Container in der HTML-Datei hinzu:

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

Fügen Sie den folgenden Code in der JavaScript-Datei hinzu:

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

Öffnen Sie den Browser und Sie sehen die Worte „ Hallo Welt!“

2. Einführung in Axios

Axios ist ein Promise-basierter HTTP-Client, der zum Senden von HTTP-Anfragen in Browsern und Node.js verwendet wird. Es kann Daten domänenübergreifend auf verschiedenen Plattformen anfordern und unterstützt das Abfangen von Anfragen, Antworten und anderen Funktionen.

2.1 Installation von Axios druckt die Rückgabedaten aus.

2.3 Senden Sie eine POST-Anfrage

Fügen Sie den folgenden Code in der JavaScript-Datei hinzu:

npm install axios

Der obige Code sendet eine POST-Anfrage und übergibt ein JSON-Objekt als Anforderungstext.

3. Kombination von Vue und Axios

Nun verwenden wir Vue und Axios zusammen.

3.1 Vuex installieren

Vuex ist ein Zustandsverwaltungsmuster, das speziell für Vue.js-Anwendungen entwickelt wurde. Verwenden Sie den folgenden Befehl, um Vuex zu installieren: „

yarn add axios

“ oder „

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

“ Die Methode „setUsers“ ist zum Aktualisieren des Benutzerwerts definiert, und „actions“ definiert eine Methode namens „getUsers“ zum Senden einer GET-Anfrage und zum Aktualisieren des Benutzerwerts.

3.3 Store verwenden

Fügen Sie den folgenden Code in die JavaScript-Datei ein:

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

Der obige Code importiert den Store, verwendet den Store in der Vue-Instanz und ruft die getUsers-Methode im gemounteten Hook auf, um die erhaltenen Daten darin zu speichern Binden Sie dann Benutzer über berechnete Eigenschaften an die Vorlage der Komponente.

Aktualisieren Sie nun die Seite und Sie sehen die aus dem Hintergrund erhaltenen Benutzerdaten.

Fazit

Durch dieses Tutorial haben Sie gelernt, eine einfache Front-End-Anwendung mit Vue und Axios zu erstellen. Ich hoffe, dieser Artikel hilft Ihnen und vermittelt Ihnen ein tieferes Verständnis für die Verwendung von Vue und Axios sowie deren Anwendungsszenarien in der Frontend-Entwicklung. Ich wünsche Ihnen viel Spaß beim Lernen und Spaß bei der Frontend-Entwicklung!

Das obige ist der detaillierte Inhalt vonVue- und Axios-Tutorials, die auch Anfänger erlernen können, um Ihnen den Einstieg in die Frontend-Entwicklung zu erleichtern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!