공부/Javascript

Vue.js 재직자 교육 4일차 [뷰 컴포넌트,뷰 템플릿

JangGiraffe 2022. 9. 28. 22:04

뷰JS 컴포넌트의 장점

 

재사용성 향상 - 개발효융성 증가

이미 만들어진 컴포넌트를 재사용하므로 품질이 보장됨

적절히 분할한 컴포넌트가 느슨하게 결합하므로 유지보수성 향상

 

컴포넌트는 템플릿 스크립트 스타일로 구성될 수 있다.

 

지역컴포넌트와 전역컴포넌트

지역변수,전역변수와 같은느낌으로 보면 될듯하다. 

 

뷰 템플릿 관련 기술

0.string literal , template literal

1. text/x-template : script 태그에 text/x-template type을 사용하면 browser에 dom으로 인식되지 않아 template으로 활용 가능함.

무슨뜻이냐면 . vue.component('text',{template: 여기다가 템플릿 을 다 넣으면 엄청길어지니깐 따로 script파일로 빼서 소스를 간단하게 하자는 의도});

2. render()

template안에 html만 넣을 수 있기때문에 프로그램적 요소를(조건문,반복문 등) 넣기 위해서는 render()를 이용해야함.

 

3. vue cli를 통한 단일 파일

규모가 있는 프로젝트 개발 시 사용, 확장자는 .vue

 

4. inline-template

html은 그대로 존재하고, 데이터만 전역컴포넌트로부터 제공받는 방법의 템플릿.

5.jsx

반응형