[Vue.js] Vue Component 기본 틀 및 Data Binding

Vue Component 기본 틀

• 위 그림은 Vue JS Component의 기본 틀입니다.
• Vue Component는 크게 세가지로 나뉩니다.
  • 1) template : HTML 코드 부분
  • 2) script : JS 로직이 들어가는 부분
  • 3) style : CSS 부분

template에서 알아야 하는 부분

• (React를 먼저 배워서 비교하면서 기록합니다.)
• 1) {{title}} 처럼 변수를 사용할 수 있다. (React와 동일)
• 2) v-model="title" 이라는 건 input 태그의 밸류가 title이라는 데이터와 바인딩 된다는 뜻
  • React 기준, value={title}과 동일, onChange={(e) => setTitle(e.target.value)}해주지 않아도 된다는건 다름,
  • 강의에서 이렇게 양방향으로 연결되는 걸 2way binding이라고 표현하는 것 같다.
  • (vue에서 이렇게 양방향 바인딩을 자동으로 해주면 코드량이 좀 줄어들 것 같다.)
  • 

script에서 알아야 하는 부분

• 1) name은 컴포넌트 이름 (아직 왜 있는지 모르겠음)
• 2) components : import해서 사용할 컴포넌트들
• 3) data() {} : 사용할 data들의 집합
  • React에서의 this.state와 유사
• 4) 생명주기 메서드들 (많이 사용되는)
  • setup() : (추가 공부해야하는 부분)
  • created() : 컴포넌트가 실행 될 때
  • mounted() : HTML이 마운트 될 때
  • unmounted() : 다른 컴포넌트로 이동하면서 unmounte 될 때