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
atau
yarn add vue
1.1.2 Gunakan CDN untuk mengimport
Tambah dalam fail HTML Kod berikut:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
1.2 Hello World
Tambah bekas dalam fail HTML:
<div id="app"> {{ message }} </div>
Tambah kod berikut dalam fail JavaScript:
var app = new Vue({ el: '#app', data: { message: 'Hello World!' } })
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
atau
yarn add axios
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 POSTTambah kod berikut dalam fail JavaScript:axios.get('/api/users') .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); });
axios.post('/api/users', { firstName: 'John', lastName: 'Doe' }) .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); });
npm install vuex
yarn add vuex
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;
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!