초보자라도 프런트엔드 개발을 시작하는 데 도움이 되는 Vue 및 Axios 튜토리얼

초보자도 배울 수 있는 Vue 및 Axios 튜토리얼은 프런트 엔드 개발을 시작하는 데 도움이 됩니다.

1. Vue 소개

Vue는 대화형 사용자 인터페이스를 구축하는 데 도움이 되는 프런트 엔드 개발 프레임워크입니다. 다른 프레임워크와 비교하여 Vue는 더 가볍고 배우고 사용하기 쉬우며 모든 규모의 프로젝트 개발에 적합합니다.

1.1 Vue 설치

먼저 Vue를 설치해야 합니다. 다음 방법으로 설치할 수 있습니다.

1.1.1 패키지 관리 도구를 사용하여 설치

명령줄에서 npm 또는 Yarn을 사용하여 Vue를 설치합니다.

npm install vue

또는

yarn add vue

1.1.2 CDN을 사용하여 가져오기

HTML 파일에 다음 코드 추가:

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

1.2 Hello World

HTML 파일에 컨테이너 추가:

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

JavaScript 파일에 다음 코드 추가:

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

브라우저를 열면 " 안녕하세요 월드!"

2. Axios 소개

Axios는 브라우저와 Node.js에서 HTTP 요청을 보내는 데 사용되는 Promise 기반 HTTP 클라이언트입니다. 다양한 플랫폼의 도메인 간에 데이터를 요청할 수 있으며 요청 차단, 응답 차단 및 기타 기능을 지원합니다.

2.1 Axios 설치

다음 명령을 사용하여 Axios를 설치하세요:

npm install axios

또는

yarn add axios

2.2 GET 요청 보내기

JavaScript 파일에 다음 코드를 추가하세요:

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

위 코드는 GET 요청을 보내고 반환 데이터를 인쇄합니다.

2.3 POST 요청 보내기

JavaScript 파일에 다음 코드를 추가하세요.

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

위 코드는 POST 요청을 보내고 JSON 개체를 요청 본문으로 전달합니다.

3. Vue와 Axios 결합

이제 Vue와 Axios를 함께 사용해 보겠습니다.

3.1 Vuex 설치

Vuex는 Vue.js 애플리케이션용으로 특별히 개발된 상태 관리 패턴입니다. Vuex를 설치하려면 다음 명령을 사용하세요.

npm install vuex

또는

yarn add vuex

3.2 Create store

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;

위 코드는 Vuex 스토어를 생성합니다. 여기서 state는 users, mutations A라는 상태를 정의합니다. setUsers라는 메소드는 사용자 값을 업데이트하기 위해 정의되고 actions는 GET 요청을 보내고 사용자 값을 업데이트하기 위해 getUsers라는 메소드를 정의합니다.

3.3 Store 사용

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

위 코드는 스토어를 가져오고, Vue 인스턴스에서 스토어를 사용하고, 마운트된 후크에서 getUsers 메서드를 호출하여 얻은 데이터를 그런 다음 계산된 속성을 통해 사용자를 구성 요소의 템플릿에 바인딩합니다.

이제 페이지를 새로 고치면 백그라운드에서 얻은 사용자 데이터를 볼 수 있습니다.

결론

이 튜토리얼을 통해 Vue 및 Axios를 사용하여 간단한 프런트 엔드 애플리케이션을 구축하는 방법을 배웠습니다. 이 글이 여러분에게 도움이 되기를 바라며 Vue와 Axios의 사용법은 물론 프런트엔드 개발에서의 애플리케이션 시나리오에 대해 더 깊이 이해하는 데 도움이 되기를 바랍니다. 프론트엔드 개발과 함께 즐거운 학습과 즐거움을 누리시길 바랍니다!

위 내용은 초보자라도 프런트엔드 개발을 시작하는 데 도움이 되는 Vue 및 Axios 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!