중복되는 코드를 방지하고자 컴포넌트를 만들어본다.
1 vue Componet 생성
<body>
<div id="root">
<!--컴포넌트 별로 다른 데이터 props : Question-start-->
<word-relay Question-start="리엑트"></word-relay>
<word-relay Question-start="학교"></word-relay>
<word-relay Question-start="고향"></word-relay>
</div>
</body>
<script>
Vue.component('word-relay',{
template: ``
,data() {
return {}
}
,methods() {}
});
</script>
<script>
/*기본 Vue 인스턴스*/
const app = new Vue({
el : "#root",
data : {
},
methods : {
}
});
</script>
2. 특징!
1) Component 선언은 기본 Vue 인스턴스의 선언보다 상단에 와야함
2) Component 는 데이터를 공유하지 않는다.
3) data는 함수형으로 사용해야함.
: 컴포넌트는 여러번 사용하는 것을 전제로 하기 때문에
데이터가 각각의 컴포넌트별로 달라야함 (데이터의 분리)
그래서 새로운 객체를 리턴하는 방식으로 사용
4) Vue를 스크립트 태그를 걸어 사용할때 template 태그는 사용할 수 없다. (6번 내용과 연관)
: webpack 을 사용해야 하는 이유
5) 서버 시작시 모든 컴포넌트를 내려줌
6) template 는 반드시 하나의 태그(부모태그 1개)로 묶어 줘야함
<div>
<div></div>
<button />
<div></div>
</div>
7) html 태그는 케밥케이스로 (props) 하단 스크립트에는 캐멀케이스로
[공통 지식]
1. 변수 생성 규칙
word-word : 케밥케이스
WordWord : 파스칼 케이스
wordWord : 케멀케이스
2. ES6 의 문자열
1) '', "" (기존)
2) `` (신규 Backtick Template 문자열)
'Vue-cli' 카테고리의 다른 글
| [Vue][기초] 01. Vue 특징 (0) | 2019.10.07 |
|---|---|
| 1. 설치 (3) | 2018.11.08 |
