-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
컴포넌트 질문이 있습니다 ㅎㅎ
19.08.16 16:51 작성 조회수 140
1
안녕하세요.
현재 어느정도 진행이 되어진 파이썬 + 장고 프로젝트에적용하려 합니다.
장고 프레임워크라서 .vue 파일을 이용한 순수 뷰 프로젝트 구조를 사용을 못하고 있습니다. (혹은 방법을 아직 모르겠네요) 그래서 현재 .js 파일로 vue를 작성 중에 있는데요.
기존 완성된 하나의 웹 페이지인 HTML 파일에 html 코드로 작성된 header, body, footer들을 vue 컴포넌트 별로 분류를 하려 합니다.
그래서 최상위(?) 뷰 인스턴스 하나에 components 들을 각각 app-header, app-content, app-footer 들로 등록을 해주려는데요.
.js 파일에 각 component를 선언한 객체에 template에다가 그 긴 HTML 코드들을 javscript 언어로 작성해서 제어해 주는 방법 밖에 없을까요~?
ex)
let appHeader = {
template: '<div id="header">header</div>',
props: ['propsdata']
};
let appFooter = {
template: '<div id="footer">footer</div>'
props: ['propsdata']
};
let app = new Vue({
el: '#app',
components: {
'app-header': appHeader,
'app-footer': appFooter
}
});
위 예시에 appHeader, appFooter 의 template 는 짧지만 현재 제 프로젝트에는
HTML 코드로 작성된 header와 footer 는 이미 수 많은
element 들로 작성된 코드가 있는데요. 그걸 .js 파일안에 있는 appHeader, appFooter 객체에 있는 template 에다가 javascript 코드로 적는 방법 밖에 없는지 해서요..
혹시나 다른 방법이 없을까요!?
답변을 작성해보세요.
1
1
장기효(캡틴판교)
지식공유자2019.08.17
안녕하세요 세진님,
질문에 구체적인 상황과 설명 곁들여 주셔서 감사합니다. 말씀하신 구조에서는 `template` 속성에 ES6의 템플릿 리터럴을 활용하는게 최선일 것 같아요. 아니면 x-template 이라는 속성이 있긴 한데 공식 문서에서도 추천하는 방법은 아닙니다. 저라면 일단 프런트를 어떻게 해서든 분리하고 백엔드는 REST API만 제공해주는 방식으로 갈 것 같은데.. 일단 현재 구조에서 더 고민을 해보시면 좋을 것 같네요! 마지막으로 ES6 템플릿 리터럴을 쓰시게 되면 IE 지원 하실 때 꼭 바벨을 돌려주셔야 애플리케이션이 깨지지 않습니다. 그럼 즐거운 주말 보내세요 :)
답변 2