Vue Js

Visual studio code 설치https://code.visualstudio.comnode.js 설치Vue.js dev tools 크롬 확장판 설치https://chrome.google.com/webstore/detail/vuejs-devtoo

Vue란? - MVVM패턴 뷰모델(View Model) MVVM패턴 - MVC 패턴에서 Controller를 빼고 ViewModel을 추가한 패턴 ViewModel - View를 표현하기 위해 만들어진 View를 위한 Model

el : 인스턴스가 그려지는 화면의 시작점(특정 HTML 태그)template : 화면에 표시할 요소(HTML, CSS 등)data : 뷰의 반응성(Reactivity)가 반영된 데이터 속성methods : 화면의 동작과 이벤트 로직을 제어하는 메서드created :

뷰 컴포넌트 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능. > - 전역 컴포넌트 등록 방식 > - 지역 컴포넌트 등록 방식 컴포넌트 기반 형식으로 개발시(single file component형식)

컴포넌트를 구분했을 때 컴포넌트 간의 관계가 생김 -> 규칙도 생김뷰 컴포넌트는 각 고유한 데이터 유효범위를 가짐(각각의 컴포넌트는 데이터를 각각 관리) 서로 데이터를 공유하기 위해서는 props, event 전달 방식을 이용해야 됨.상위에서 하위로 데이터를 내려줌,

appContent에서 AppHeader로 10이라는 값을 넘기는 로직둘이 고속도로가 뚫려 있지 않기 때문에 Root를 경유하야됨.appContent에서 Root의 num에 데이터 할당 -> Root는 num값을 propsdata에 할당

라우터 페이지를 이동할때 사용하는 Vue공식 library or 기능 라우터 공식문서

axios 뷰에서 권고하는 HTTP 통신 라이브러리 Promise 기반의 HTTP 통신 라이브러리

뷰로 화면을 조작하는 문법크게 데이터 바인딩, 디렉티브로 나뉨.뷰 인스턴스에서 정의한 속성을 화면에 표시하는 방법 ex) 콧수염 괄호(Mustache Tag)뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법(v- 가 붙는 속성을 뷰 디렉티브라고 함)예시로 특정 속성 값에

Reactivity = Vue Js가 추구하는 중심기능(데이터의 변화를 감지> 화면에 반영, 화면조작에 관한 API, 속성을 vue에서 지원)인스턴스 = vue로 개발할때 필수로 생성해야 하는 단위, 속성을 추가함으로서 화면을 조작컴포넌트 = 화면의 영역을 구분해

참고 사이트Babelconst & letArrow FunctionEnhanced Object LiteralsModules다른 언어와 통일성 부여블록 단위로 변수 범위 제한const : 한번 선업한 값에 대해서 변경할 수 없음(상수)let : 한번 선언한 값에 대해서

복잡한 애플리케이션의 컴포넌트들을 효율적으로 관리 React의 Flex 패턴에서 기인함 Flux란? MVC패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 한 방향으로만 움직임. action : 화면에서 발생하는 이벤트, 사용자의 입력 dispather : 데이

npm install vuex --save2022.02.07 부터 변경 \- npm i vuex@3.6.2https://joshua1988.github.io/web-development/vuejs/vue3-as-default/src/store 폴더 생성 -

Vuex 기술 요소 state: 여러 컴포넌트에 공유되는 데이터 data getters : 연산된 state 값을 접근하는 속성 computed mutations : state 값을 변경하는 로직, 메서드 methods actions : 비동기 처리 로직을 선언하는 메

Store에 있는 4가지 속성을 간편하게 코딩하는 방법state -> mapStategetter -> mapGettersmutations -> mapMutationsactions -> mapActionsex) this.$store.state.변수명 -> 컴포넌트가 많아

ES6의 import, export로 속성별로 모듈화example앱이 비대해져 1개의 store로는 관리가 힘든 경우 modules 속성 사용example

새창(하나라도 창이 열렸을 때) ctrl + shift + n 새로운 편집탭 ctrl+n파일 열기 ctrl+o키보드 단축키 열기 ctrl+k+s현재 에디터 파일 창 닫기 ctrl+w이전에 닫힌 창 다시 열기 ctrl+shift+t화면 창 분할 ctrl+\\창 최대 화