16. Vue JS/Vue 3 5

04. Vue CLI 3 - Component 메모

OS Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836) Vue CLI 3.0.0 Edit Tool Intellij IDEA 2019.1.3 작성법만 다를 뿐 결과는 같습니다 #1-1. 자식 컴포넌트에 v-for 작성 TODO 어플리케이션 할 일 완료 전체 {{ todo }} 자식 컴포넌트에서 여러개의 인자를 넘겨줄 수 있지만, 부모 컴포넌트에서 태그에 매개변수를 받는 코드를 작성하면 오류를 발생한다 @child="toggleTodoState(todo)" 이런 식으로 사용하는 경우 자식 컴포넌트에서 넘어온 인자를 무시하고 부모 컴포넌트의 todo 인자를 찾게 된다 (존재하지 않아 undifinded 반환) 때문에 @child="toggleTodoState" 여기 까지만 ..

16. Vue JS/Vue 3 2020.09.10

03. Vue 2 - Vue Router

OS Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836) Vue CLI 3.0.0 Vue Router 4.5.6 Edit Tool Intellij IDEA 2019.1.3 # 공식 홈페이지 가이드 소개 | Vue Router 소개 버전 정보 TypeScript 사용자는 vue-router@3.0+와 vue@2.5+를 사용하세요. Vue 라우터는 Vue.js 의 공식 라우터입니다. Vue.js를 사용한 싱글 페이지 앱을 쉽게 만들 수 있도록 Vue.js의 코어와 긴밀히 통합 router.vuejs.org # 예제 sout1217/vuex-and-router Contribute to sout1217/vuex-and-router development by creating an..

16. Vue JS/Vue 3 2020.09.10

02. Vue CLI 3 - Vuex

OS Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836) Vue CLI 3.0.0 Vuex 4.0.0 Edit Tool Intellij IDEA 2019.1.3 # 구조 Vuex 구조 설명 Actions 비동기 로직 = axios Mutations 동기 로직 State 컴포넌트 간에 공유하는 데이터 = data() { ... } Vue 주요 구성 설명 state 컴포넌트 간에 공유하는 데이터 = data() { ... } getters 중복된 데이터 처리 mutations 동기 로직 처리 actions 비동기 로직 처리 Vue 컨셉 설명 State 컴포넌트 간에 공유하는 데이터 = data() { ... } View 데이터를 표시하는 화면 = ... Action 사용자의..

16. Vue JS/Vue 3 2020.09.10

01. Vue CLI 3 - 기본

OS Windows 10 Home 64bit 버전 1903 (OS 빌드 18362.836) Vue CLI 3.0.0 #1. npm 설치 npm 설치 #2. Vue CLI 설치 npm install -g @vue/cli # OR yarn global add @vue/cli 기존에 npm install -g vue-cli 에서 npm install -g @vue/cli 로 변경되었다 이 버전에서는 vue ui 를 제공하여 빠르고 쉽게 프로젝트를 만들 수 있게 돕는다 #3. Project 생성 vue create my-project # OR vue ui #4. 플러그인 설치 Sass · Less · Stylus Loader # Sass npm install -D sass-loader sass # Less np..

16. Vue JS/Vue 3 2020.09.10