Vue.JS 특징

1. 서로 다른 컴포넌트끼리 값 직접 참조할 수 없다.

2. 컴포넌트 안에서 Vue인스턴스가 상위 컴포넌트가 된다.

3. 상위컴포넌트에서 하위컴포넌트로 데이터 전달시 props로 전달 가능하며, 하위에서 상위로 데이터 전달시 이벤트 버스를 사용한다.

4. 이벤트를 발생시키는 쪽에서는 $emit('이벤트명') , 받는쪽은 v-on:으로 수신한다.

5. 같은 레벨의 컴포넌트간의 통신은 아래 그림과 같다.(부모보냈다가 부모에서 값 받아야함)

  관계없는 컴포넌트 간 통신은 통상 이벤트버스를 이용해서 통신한다.

6. template 특성

   1) template 대신 render 함수로 구현해도 됨.

   2) 싱글 파일 컴포넌트 체계 => .vue 파일 1개는 1개의 컴포넌트와 동일

7. 데이터 바인딩 방식

   1) v-once : 데이터가 변경되어도 값이 변경되지 않게 하고 싶을 때.

   2) v-bind : 아이디, 클래스, 스타일 등 html 속성값에 뷰데이터 값 연결할때 사용   

   3) {{}} 콧수염괄호 : 일반적으로 텍스트 바인딩 해서 쓸수도 있고, 자바스크립트 함수 넣어서 사용할 수 도있음.

8. 자바스크립트 표현식 사용시 주의할점

   1) template 부분에 선언문, 분기문 사용불가. 다만 삼항연산자는 사용가능

   2) 복잡한 연산은 인스턴스 안에서 수행하고 template내부 {{}}에서 사용하지 않음.

       결과값만 받아서 넣는식으로 함. computed 속성사용    => 값을 미리 캐싱하고 가지고 있기때문에 methods속성보다 이걸 쓴다.

  9. 디렉티브

    1) html 태그엔에 v- 접두사를 가지는 모든 속성.

  10. watch  속성, 데이터 변화를 감지하여 자동으로 특정 로직 수행, 데이터 호출과 같이시간이 상대적으로

        더 많이 소모되는 비동기 처리에 적합.

  11. 뷰에서 데이터 가져오는 부분은 axios를 주로 사용한다. 뷰 리소스가 이전에는 공식API였지만.. 사실상 안쓰는 추세..

  12. 라우터에서 라우터된 부분을 보여주려면 템플릿 부분에 <router-view></router-view>를 사용한다.

        네스티드 라우터(중첩)는 상위 컴포넌트 1개에 하위컴포넌트 1개를 포함하는 구조이다.

        네스티드 라우터의 단점을 보완하기위해 나온 것이 네임드 뷰이다. 

        네임드 뷰는 페이지 이동했을때 여러개의 컴포넌트를 동시에 표시하는 라우팅 방식임.