[VueJS] 기본 개념 및 요점정리

[디렉티브(Directices)]

- v-접두사가 있는 특수 속성

- 표현식의 값이 변경될 때 사이드 이펙트를 반응적으로 DOM에 적용

ex) v-text, v-bind, v-else, v-html, v-show, v-for, v-once, v-if, v-cloak

 

v-model: 양방향 바인딩 처리를 위해서 사용

v-bind: 엘리먼트의 속성과 바인딩 처리를 위해서 사용

v-show: 조건에 따라 엘리먼트를 화면에 렌더링

v-if, v-else-if, v-else: 조건에 따라 엘리먼트를 화면에 렌더링

v-for: 배열이나 객체의 반복

template: 여러개의 태그를 묶어서 처리해야 할 경우 사용

v-cloak: Vue instance가 준비될때까지 nustache 바인딩을 숨기는데 사용

 

[v-if와 v-show의 차이점]

v-if: 렌더링 false일 경우 X, false일 경우 엘리먼트 삭제, template 및 v-else 지원 O

v-show: 항상 렌더링, false일 경우 display는 none, template 및 v-else 지원 X

 

 

[컴포넌트]

- Vue의 가장 강력한 기능 중 하나

- HTML Element를 확장하여 재사용 가능한 코드를 캡슐화

- 전역 컴포넌트와 지역 컴포넌트가 있음

 

전역 컴포넌트: Vue.component를 사용

지역 컴포넌트: components 옵션으로 사용

 

[Vue Instance Life Cycle]

- 생성 created

- 부착 mounted

- 갱신 updated

- 소멸 destroyed

 

[이벤트 수식어]

v-on:click.stop => 클릭이벤트 전파가 중단됩니다

v-on:submit.prevent=> 다시 제출되는것을 막음

 

[사용자 정의 이벤트]

- 이벤트 발생: vm.$emit("speed", [100]);

- 이벤트 수신: vm.$on("speed", function(speed){});

[Axios: Http 통신]

- Vue에서 권고하는 HTTP 통신 라이브러리

- Promise기반의 HTTP 통신 라이브러리이며 다른 애들에 비해 문서화가 잘되어잇고 API가 다양함

* Promise란 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 라이브러리이다. 데이터를 요청하고 받아올때까지 기다렸다가 화면에 나타내는 로직을 실행해야 할 때 사용

 

[비동기 통신]

- axios

- async, await

- promise

 

[Vue.js 특징]

- 접근성

- 유연성

- 고성능

-MVVM(model+view+viewModel) 패턴 

 

[NPM]

- Node Package Manager

- npm install package

- npm init : 새로운 프로젝트나 패키지를 만듬

- 버전 확인 : vue -V or vue --version

- 프로젝트 생성: npm create 프로젝트이름

- axios 추가: npm install axios

- vue add 플러그인이름

- 실행 : npm run serve

- .vue = template + script + style