vue 컴포넌트와 앱에서 el과 template의 차이점은 무엇입니까?
VUE 컴포넌트(및 애플리케이션 자체)에는el:그리고 또template.
다음 중 하나를 사용할 때와 다른 하나를 사용할 때의 차이점을 알고 싶습니다.
최소 VUE-Onsen에서 Monaca CLI로 프로젝트를 만드는 경우UI 템플릿 표시:
new Vue({
el: '#app',
template: '<app></app>',
components: { App }
});
예시가 없는 매우 장황한 문서로부터, 요약하자면, 나는 다음과 같이 추측한다.templatedom 요소 및 그 안에 있는 모든 것이 dom 요소를 대체하게 됩니다.eldom 요소(템플릿에는 루트를 하나만 사용할 수 있습니다.예: html이 다음과 같은 경우:
<html>...
<body>...
<replaceThis></replaceThis>...
그리고 나의 vue js는 말한다:
el: "replace-this",
template: "<div id='replaced'>hi there</div>"
그럼 다음 정보를 얻을 수 있습니다.
<html>...<body>...<div id='replaced'>hi there</div>...
이렇게 쓸 수도 있어요.
el: "#bla",
template: "#blu"
그럼 내 html이
<html>
<body>
<div id="bla">
anything inside here including the surrounding div will be replaced
</div>
<template id="blu">
<span id ="replacing-html">
when ran in span, it stays mainly in the pan
</span>
</template>
</body>
</html>
그러면 ID를 가진 div는bla로 대체됩니다.replacing-html내부에 있는 스판 엘리먼트template(템플릿 태그 자체에는 모든 것이 포함되어 있습니다)
그래서 나는 이해해야 한다:
- 이요?
template콘텐츠 치환el요소? - 필요한 것은,
template루트 요소가 1개밖에 없는 경우 - 제 첫 번째 예시가 맞습니까?
- 두 번째 예시는 제가 맞습니까?
- 할 것인가?
template모든 것이 포함된 태그가 출력된 html에 남아있을까요? - Monaca Vue-Onsen의 경우 어떻게 됩니까?위의 UI 예에서는
el템플릿과 동일합니다.「 app 」이거 재귀적인 거 아니야?무엇과 무엇으로 대체됩니까?
마운트할 기존 DOM 요소를 Vue 인스턴스에 제공합니다.CSS 셀렉터 문자열 또는 실제 HTMlement를 사용할 수 있습니다.
인스턴스가 마운트되면 확인된 요소에 vm으로 액세스할 수 있습니다.$el.
인스턴스화 시 이 옵션을 사용할 수 있는 경우 인스턴스는 즉시 컴파일로 이행합니다.인스턴스를 사용할 수 없는 경우 사용자는 명시적으로 vm을 호출해야 합니다.$mount(): 컴파일을 수동으로 시작합니다.
Vue 인스턴스의 마크업으로 사용되는 문자열 템플릿.템플릿이 마운트된 요소를 대체합니다.템플릿에 콘텐츠 배포 슬롯이 없는 한 마운트된 요소 내부의 기존 마크업은 무시됩니다.
문자열이 #로 시작하는 경우 querySelector로 사용되며 선택한 요소의 내부가 사용됩니다.템플릿 문자열로서의 HTML.이를 통해 일반적인 트릭을 사용하여 템플릿을 포함할 수 있습니다.
예에서는 가 Vue를 하고 있습니다.app컴포넌트를 템플릿 정의에서 사용합니다., 가 「ID」 「ID」 「DOM」 「DOM」인 기존의 요소를 찾고 .app을 사용하다
둘 다 '앱'이라는 이름의 것을 사용하고 있기 때문에 혼란스러워하고 있다고 생각합니다.같은 이름을 붙일 필요는 없어요.
언급URL : https://stackoverflow.com/questions/46596769/what-is-the-difference-between-el-and-template-in-vue-component-and-app
'programing' 카테고리의 다른 글
| C 또는 C++ 표준에서는 char를 부호 있는 문자 또는 부호 없는 문자로 명시적으로 정의하지 않는 이유는 무엇입니까? (0) | 2022.08.17 |
|---|---|
| vuex: 상태 필드 "foo"가 "foo"에서 이름이 같은 모듈에 의해 재정의되었습니다. (0) | 2022.08.16 |
| Java에서 문자열의 첫 글자를 대문자로 표시하는 방법은 무엇입니까? (0) | 2022.08.16 |
| C/C++ 글로벌과 스태틱 글로벌 (0) | 2022.08.16 |
| 진입점 - webpack.config.js vs vue.config.js (0) | 2022.08.16 |