vue.js 지역 컴포넌트를 만들어보자.
-화면에 비춰지는 뷰의 단위를 쪼개어 재활용이 가능한 형태로 관리하기 위하여 Component로 제작한다.
-Vue 문법 특성 상 최상위 루트 태그가 1개여야만 렌더가 가능하다.
-Component는 지역(Local)과 전역(Global)로 나눌 수 있다.
자 문법을 몰라도 컴포넌트 만들어 봅시다.
일단 new Vue ({ }); 가 뭘까요? https://kr.vuejs.org/v2/guide/instance.html
|
var vm = new Vue({ // options .... (template, el, methods, created, watch.. 등등) }); |
Vue 인스턴스 입니다.
인스턴스란?
설계도를 바탕으로 소프르웨어 세계에 구현된 구체적인 실체
-즉, 객체를 소프트웨어에 실체화하면 그것을 인스턴스라 함
-실체화된 인스턴스는 메모리에 할당됨.
-객체에 포함된다고 볼 수 있다.
실체 실체 객체 그러죠? 메모리에 할당되는 객체?로 알면될까요??
모든 Vue 앱은 이 인스턴스로 부터 시작됩니다^^ 가이드 한 번만 읽고 오세용 (솔직히 읽어도 잘 모르겠다)
|
<body> <div id="app"></div> // 1. </body> |
<script> var cmp = { // 2. template : '<div>my component</div>'; };
new Vue({ el : '#app', // 1. components : { // 3. 'my-cmp' : cmp // 4. } }); </script> |
과정을 풀어보자면...
1. <div> id가 app이고, 나는 #app 영역에 vue의 모든 문법을 쓸거고, 컴포넌트도 만들거다.
그러니까 그 #app을 new Vue({ }) 안에 el로 선언해야합니다.
2. 그리고 컴포넌트를 넣어야 하니까 컴포넌트를 먼저 변수로 선언합니다.
template : 해서 선언해줍니다.
3. cmp를 #app에서 사용하기 위해 vue에 등록해줄겁니다. 그러기 위해서 영역을 만듭니다.
4. cmp변수를 html에 넣기위해 components : { } 라고 작성했던 내부에 넣어줍니다.
여기서 'my-cmp' 는 html에 <my-cmp>로 사용이 되는 이름이고, cmp는 template를 만들어줬던 변수이름입니다!
결과는
위의 예제로 봤을 때 ..
컴포넌트를 넣을 영역은 el로 선언
html에 내용을 넣을 것을 js 변수로 선언(cmp)
js변수를 html에서 컴포넌트로 쓰려면 components에 선언
저기서 my-cmp는 #app 내부면 얼마든지 계속 쓸 수 있어요~
'~2022 > FE-Vue' 카테고리의 다른 글
| vue.js 기초- 인스타그램 만들어보기 04 (코딩애플 세미나 후기) (0) | 2019.07.02 |
|---|---|
| vue.js 기초- 인스타그램 만들어보기 03 (코딩애플 세미나 후기) (0) | 2019.06.25 |
| vue.js 기초- 인스타그램 만들어보기 02 (코딩애플 세미나 후기) (0) | 2019.06.24 |
| vue.js 기초- 인스타그램 만들어보기 01 (코딩애플 세미나 후기) (0) | 2019.06.18 |
| Vue.js single file components 방식으로 개발해보기 02 - Vue Project 시작, 페이지 띄워보기 (0) | 2019.05.16 |
| Vue.js single file components 방식으로 개발해보기 01 - Node.js다운로드 (0) | 2019.05.16 |
| Vue.js 스크립트 연결하기 (0) | 2019.05.16 |
| Vue는 무엇인가? (0) | 2019.05.16 |