component
컴포넌트는 중복을 제거하고 코드의 재사용을 높이기 위해 사용한다.
vue에서 컴포넌트 생성 방법은 다음과 같다.
Vue.component('이름', {});
template
template엔 보여줄 페이지의 코드를 작성하면 된다.
백틱으로 작성한다.
컴포넌트 코드를 작성할 때, 해당 태그들을 모두 감싸는 부모 태그 하나가 필요하다.
<div></div> || <template></template> (웹 팩 사용시) || <></> (이건 되는지 모르겠음)
data
최상위 app에선 data를 단일 객체 형식으로 받았지만
컴포넌트에선 함수 형식으로 받아야 한다.
컴포넌트마다의 데이터 분리 목적
(최상위 페이지에선 객체로서 하나만 쓰이면 되지만 컴포넌트는 그 수가 많을 수도 있고 많은 만큼 각각의 컴포넌트마다 다른 객체를 가지고 있어야 하기 때문이다.)
또한 상단 사진에선 컴포넌트 명을 wordRelay 라는 카멜케이스를 사용했지만
vue에선 word-relay 라는 스네이크 케이스를 사용해야 한다.
cdn 기준인지는 모르겠지만 컴포넌트를 사용할 때, <name/> 이런식으로 사용은 안되는 것 같다.
리액트는 되는데
컴포넌트를 만드는 스크립트는 #root 태그와 vue 인스턴스 사이에 위치해야 한다.
리액트와 마찬가지로 뷰에서도 props를 사용할 수 있다.
하지만 뷰의 프론트 단에선 무조건 스네이크 케이스만 사용이 가능하다.
개불편하네
프론트 단에선 스네이크 케이스를 사용했지만 JS로 넘어오면서 자동으로 카멜케이스 변환 사용이 가능하다.
JS는 - 사용이 제한되기 때문
WEB PACK
node.js, npm 설치해야 사용가능
npm install vue
뷰 설치
npm init webpack 프로젝트명
vue2
npm create 프로젝트명
vue3
npm install webpack webpack-cli -D
webpack && webpack-cli 설치하고 개발때만 사용 (잘 모르겠음)