Rumah > hujung hadapan web > View.js > teks badan

Tutorial Vue dan Axios yang walaupun pemula boleh belajar untuk membantu anda memulakan pembangunan bahagian hadapan

WBOY
Lepaskan: 2023-07-17 22:28:36
asal
1144 orang telah melayarinya

Tutorial Vue dan Axios yang boleh dipelajari oleh pemula pun akan membantu anda memulakan pembangunan bahagian hadapan

1 Pengenalan kepada Vue

Vue ialah rangka kerja pembangunan bahagian hadapan yang boleh membantu kami membina antara muka pengguna interaktif. Berbanding dengan rangka kerja lain, Vue lebih ringan, mudah dipelajari dan digunakan serta sesuai untuk pembangunan projek dari semua saiz.

Pemasangan 1.1 Vue

Mula-mula, kita perlu memasang Vue. Anda boleh memasangnya dengan cara berikut:

1.1.1 Pasang menggunakan alat pengurusan pakej

Gunakan npm atau benang dalam baris arahan untuk memasang Vue:

npm install vue
Salin selepas log masuk

atau

yarn add vue
Salin selepas log masuk

1.1.2 Gunakan CDN untuk mengimport

Tambah dalam fail HTML Kod berikut:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Salin selepas log masuk

1.2 Hello World

Tambah bekas dalam fail HTML:

<div id="app">
  {{ message }}
</div>
Salin selepas log masuk

Tambah kod berikut dalam fail JavaScript:

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

Buka penyemak imbas dan anda akan melihat perkataan " Hello Dunia!"

2. Pengenalan kepada Axios

Axios ialah klien HTTP berasaskan Promise, digunakan untuk menghantar permintaan HTTP dalam penyemak imbas dan Node.js. Ia boleh meminta data merentas domain pada platform yang berbeza, dan menyokong pemintasan permintaan, pemintasan tindak balas dan fungsi lain.

2.1 Pemasangan Axios

Gunakan arahan berikut untuk memasang Axios:

npm install axios
Salin selepas log masuk

atau

yarn add axios
Salin selepas log masuk

2.2 Hantar permintaan GET

Tambah kod berikut dalam fail JavaScript:

Permintaan GET di atas dan hantar kod GET mencetak data pulangan.

2.3 Hantar permintaan POST

Tambah kod berikut dalam fail JavaScript:

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

Kod di atas menghantar permintaan POST dan lulus objek JSON sebagai badan permintaan.

3. Menggabungkan Vue dan Axios

Sekarang, mari gunakan Vue dan Axios bersama-sama.

3.1 Pasang Vuex

Vuex ialah corak pengurusan keadaan yang dibangunkan khusus untuk aplikasi Vue.js. Gunakan arahan berikut untuk memasang Vuex:

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

atau

npm install vuex
Salin selepas log masuk

3.2 Cipta kedai

Tambah kod berikut dalam fail JavaScript:

yarn add vuex
Salin selepas log masuk

Kod di atas mencipta kedai Vuex, di mana keadaan mentakrifkan keadaan bernama pengguna, mutasi A kaedah bernama setUsers ditakrifkan untuk mengemas kini nilai pengguna, dan tindakan mentakrifkan kaedah bernama getUsers untuk menghantar permintaan GET dan mengemas kini nilai pengguna.

3.3 Gunakan kedai

Tambah kod berikut dalam fail 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;
Salin selepas log masuk
Kod di atas akan mengimport kedai, menggunakan kedai dalam contoh Vue, dan panggil kaedah getUsers dalam cangkuk yang dipasang untuk menyimpan data yang diperoleh ke pengguna. Kemudian ikat pengguna kepada templat komponen melalui sifat yang dikira.

Sekarang, muat semula halaman dan anda akan melihat data pengguna yang diperolehi dari latar belakang.

Kesimpulan

Melalui tutorial ini, anda telah belajar membina aplikasi bahagian hadapan yang mudah menggunakan Vue dan Axios. Saya harap artikel ini akan membantu anda dan memberi anda pemahaman yang lebih mendalam tentang penggunaan Vue dan Axios, serta senario aplikasi mereka dalam pembangunan bahagian hadapan. Saya mengucapkan selamat belajar dan menyeronokkan dengan pembangunan bahagian hadapan!

Atas ialah kandungan terperinci Tutorial Vue dan Axios yang walaupun pemula boleh belajar untuk membantu anda memulakan pembangunan bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan