본문 바로가기
반응형

vuejs21

Vue.js 완벽가이드 : (5) 라우터 고급 5. 라우터 실전 5-1. User 상세 페이지 구현 사용자를 클릭했을 때 사용자 상세정보를 확인하는 기능을 추가하겠습니다. Dynamic Route Matching을 알아봅니다. 우선 api/index.js에 API를 추가합니다. import axios from 'axios'; // 1. HTTP Request & Response와 관련된 기본 설정 const config = { baseUrl: 'https://api.hnpwa.com/v0/' } // 2. API 함수들을 정리 function fetchNewsList() { // return axios.get(config.baseUrl + 'news/1.json'); // ES6 스타일 return axio.. 2020. 4. 23.
Vue.js 완벽가이드 : (4) Store 4. 스토어 & 중간정리 4-1. Vuex 설치 및 Vuex가 적용된 앱 구조 소개 지금까지 수행한 프로젝트는 API에서 바로 View로 데이터를 전달하였습니다. Vuex를 설치하여 API -> Vuex -> View 로 데이터 전달 과정을 알아보겠습니다. 터미널에서 npm i vuex를 입력하여 vuex를 설치합니다. 4-2. Vuex 모듈화 및 state 적용 컴포넌트가 많은 프로젝트의 경우 하나의 컴포넌트가 갖고 있는 data를 다른 컴포넌트에 공유할 일이 발생합니다. ./src/store/index.js 파일을 생성합니다. index.js에 다음과 같이 코드를 작성합니다. import Vue from 'vue'; import Vuex from 'vuex'; Vue.us.. 2020. 4. 23.
Vue.js 완벽가이드 : (3) API 구현 3. API 구현 3-1. axios를 이용한 API 호출 npm i axios --save 를 이용하여 axios를 설치하고 dependencies를 확인합니다. NewsView.vue 에서 axios를 이용하여 데이터를 수신하는 코드를 작성합니다. {{ user }} 3-2. API함수 구조화 방법 ./src/index.js파일을 생성하여 API를 작성합니다. import axios from 'axios'; // 1. HTTP Request & Response와 관련된 기본 설정 const config = { baseUrl: 'https://api.hnpwa.com/v0/', } // 2. API 함수들을 정리 function fetchNewsList() { // return axios.get(con.. 2020. 4. 23.
Vue.js 완벽가이드 : (2) 라우터 기본 2. 라우터 기본 2-1. 라우터 설치 및 구현 터미널을 열어 npm i vue-router --save를 입력해봅시다. package.json에서 dependencies항목에 vue-router을 확인 할 수 있습니다. main.js 코드 내 router을 추가할 수 있습니다. import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router'; Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') const router = new VueRouter({ routes: [ ] }) new Vue({ render: h => h(Ap.. 2020. 4. 23.
Vue.js 시작하기 : (5) Single File Component & 최종 정리 싱글 파일 컴포넌트 & 최종정리 7. 싱글 파일 컴포넌트 빈 vue 파일을 생성 후 scf(scaffold)키워드로 자동완성으로 기본 템플릿 코드를 작성할 수 있습니다. 에는 하나의 만 선언이 가능합니다. components 폴더 하위에 컴포넌트를 생성하게 되는데, 보통 두 단어 이상으로 구성하길 권장합니다. html에 존재하는 기존 tag와 중복될 수 있기 때문입니다. App.vue appHeader.vue {{ propsdata }} send 8. 최종 프로젝트 다음 명령어를 수행하여 새로운 프로젝트를 생성하고 실행합니다. vue create vue-form cd vue-form npm run serve 간단하게 마크업 구조를 잡아보겠습니다. App.vue id: pw: login username과 .. 2020. 4. 23.
Vue.js 시작하기 : (4) Templete Syntax & Vue-cli 템플릿 문법 & Vue-CLI 7. 템플릿 뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미합니다. 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나누어집니다. 데이터 바인딩 데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법입니다. 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)입니다. {{ message}} new Vue({ message = 'hello world' }) 디렉티브 디렉티브는 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법입니다. 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있습니다. 예를 들어 아래와 같이 특정 속성 값에 따라 화면의 영역을 표시하거나 표시하지 않을 수 있습니다. 속성 중 v- 로 .. 2020. 4. 23.
반응형