키큰개발자

vue.js란 ? 

- 웹페이지 화면을 개발하기 위한 프런트엔드 프레임워크

vue 특징

- MVVM패턴 : 프런트와 백엔드 역할을 분리해서 개발하는 패턴, 추후 유지보수가 편해진다.

                   예전에는 HTML,CSS, 데이터베이스의 데이터를 가져오는 JAVA 코드가 한파일에 섞이면서 가독성이 현저히 떨어졌다.

- 컴포넌트기반 프레임워크 : 레고쌓듯이 잘조합해서 쓰면 원하는 모형, 화면을 구성할 수있다.

- 빠른 화면 렌더링의 가상 돔 렌더림 방식 : 요즘 대세, 가상돔을 활용하면 화면전체를 다시그리는 일이 없다.

vue 준비물 4가지

- editor : atom 추천 무료 , 'language-vue' 아톰패키지 설치 (vscode 쓰는분들은 vscode용 따로 또 있어요 자동으로 추천해줌) 

- chrome

- 뷰 개발자 도구 : 크롬확장플러그인

- node.js : 추후 vue 프로젝트 구성할때 손쉽게 할 수있음(?)

화면 개발을 하기위한 필수 단위

인스턴스 & 컴포넌트

1. 인스턴스 : 화면 개발하기위해 필수적으로 생성해야하는 기본 단위, hello world를 화면에 뿌려줄수있던건 이녀석이 있었기때문이다. 즉 빠질수 없는 필수조건

2. 컴포넌트 : 레고 블록과 같은것 처럼 하나씩 잘 쌓아서 화면을 구성할수 있음.

레고기본판 안에 레고블록있듯이 인스턴스안에 컴포넌트있다.  

뷰 컴포넌트 통신

 컴포넌트 끼리는 통신을 어떻게 할까?

1. 상하위 컴포넌트 관계의 통신

- 단일 방향으로 위에서 아래로 데이터를 전달하는 기본적인 구조.

- 상위에서 하위로는 props라는 특별한 속성으로 전달한다.

ex) <child-component v-bind : propsdata = "상위 컴포넌트의 속성"> 

2.  하위에서 상위 컴포넌트로는 이벤트로 전달하기

하위 컴포넌트에 이벤트가 발생하면 이 이벤트 명으로 상위 컴포넌트의 메서드를 실행시키는 방식

ex) this.$emit('이벤트명')

     v-on : 이벤트명 = "상위 컴포넌트의 메서드명"

3. 같은 레벨간의 컴포넌트 통신

- 이벤트 버스

1.이벤트 버스를 위한 추가 인스턴스를 생성

2.그리고 이 이벤트 버스 참조로 이벤트와 데이터를 보낸다.

3.받는 쪽은 $on으로 이벤트와 데이터를 받는다.