Vue.js에서 컴포넌트 템플릿을 정의하는 여러 방법 소개
- PHPz앞으로
- 2020-09-25 15:46:572752검색
Vue.js는 HTML 기반 템플릿 구문을 사용하므로 개발자는 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩할 수 있습니다. 모든 Vue.js 템플릿은 합법적인 HTML이며 사양을 따르는 브라우저 및 HTML 파서로 구문 분석될 수 있습니다.
Vue에는 구성 요소 템플릿을 정의하기 위한 다양한 옵션이 있습니다. 제 생각에는 최소한 7가지 방법이 있습니다.
Strings
Template literals
-
X
Single Page Components
이 기사에서는 다음의 예를 살펴보겠습니다. 각 방법을 설명하고 장단점을 논의하여 주어진 상황에서 어떤 방법을 사용하는 것이 가장 좋은지 알 수 있습니다.
1. 문자열
- 기본적으로 템플릿은 JS 파일에서 문자열로 정의됩니다. 문자열의 템플릿은 이해하기 매우 어렵다는 점에 우리 모두 동의할 수 있을 것 같습니다. 광범위한 브라우저 지원 외에 이 방법에는 특별한 것이 없습니다.
Vue.component('my-checkbox', {
template: `<div class="checkbox-wrapper" @click="check">
<div :class="{ checkbox: true, checked: checked }">
</div><div class="title">{{ title }}</div></div>`,
data() {
return { checked: false, title: 'Check me' }
},
methods: {
check() { this.checked = !this.checked; }
}
});
2. 템플릿 리터럴ES6 템플릿 리터럴("백틱")을 사용하면 일반 Javascript 문자열에서는 불가능한 여러 줄에 걸쳐 템플릿을 정의할 수 있습니다. 안전을 위해 여전히 ES5로 변환해야 하지만, 이제 많은 새로운 브라우저가 이러한 명령을 지원하고 읽기가 더 쉬워졌습니다.
Vue.component('my-checkbox', {
template: ` < div class = "checkbox-wrapper"@click = "check" >
<div: class = "{ checkbox: true, checked: checked }" ></div>
<div class="title">{{ title }}</div ></div>`,
data() {
return { checked: false, title: 'Check me' }
},
methods: {
check() { this.checked = !this.checked; }
}
});/
3, X-Templates
이 방법을 사용하면 템플릿이 index.html 파일의 스크립트 태그에 정의됩니다. 스크립트 태그는 /x-template 텍스트로 태그가 지정되고 구성 요소 정의에서 ID로 참조됩니다.
저는 이 접근 방식을 좋아합니다. 이 접근 방식을 사용하면 올바른 HTML 마크업으로 HTML을 작성할 수 있지만, 템플릿이 나머지 구성 요소 정의와 분리된다는 단점이 있습니다.
Vue.component('my-checkbox', {
template: '#checkbox-template',
data() {
return { checked: false, title: 'Check me' }
},
methods: {
check() { this.checked = !this.checked; }
}
});<script type="text/x-template" id="checkbox-template">
<div class="checkbox-wrapper" @click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title">{{ title }}</div>
</div>
</script>
4. 인라인 템플릿
inline-template 속성을 구성 요소에 추가하면 내부 콘텐츠를 배포된 콘텐츠로 처리하는 대신 Vue에 템플릿으로 표시할 수 있습니다.
x-템플릿과 동일한 단점이 있지만 한 가지 장점은 콘텐츠가 HTML 템플릿의 올바른 위치에 있으므로 Javascript가 완료될 때까지 기다리지 않고 페이지가 로드될 때 렌더링될 수 있다는 것입니다. 달리다.
Vue.component('my-checkbox', {
data() {
return { checked: false, title: 'Check me' }
},
methods: {
check() { this.checked = !this.checked; }
}
});<my-checkbox inline-template>
<div class="checkbox-wrapper" @click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title">{{ title }}</div>
</div>
</my-checkbox>
5. 렌더링 기능
렌더링 기능을 사용하려면 템플릿을 Javascript 개체로 정의해야 합니다. 템플릿 옵션 중 가장 장황하고 추상적인 옵션입니다.
그러나 이것의 이점은 템플릿이 컴파일러에 더 가깝고 지시문에서 제공하는 하위 집합이 아닌 전체 Javascript 기능에 액세스할 수 있다는 것입니다. Vue.component('my-checkbox', {
data() {
return { checked: false, title: 'Check me' }
},
methods: {
check() { this.checked = !this.checked; }
},
render(createElement) {
return createElement(
'div',
{
attrs: {
'class': 'checkbox-wrapper'
},
on: {
click: this.check
}
},
[
createElement(
'div',
{
'class': {
checkbox: true,
checked: this.checked
}
}
),
createElement(
'div',
{
attrs: {
'class': 'title'
}
},
[ this.title ]
)
]
);
}
});6. JSX
Vue에서 가장 논란이 많은 템플릿 옵션은 JSX입니다. 일부 개발자는 JSX가 추악하고 직관적이지 않으며 Vue 정신에 대한 배신이라고 생각합니다. JSX에서는 브라우저가 읽을 수 없기 때문에 먼저 변환해야 합니다. 그러나 렌더링 기능을 사용해야 하는 경우 JSX는 확실히 템플릿을 정의하는 덜 추상적인 방법입니다.
Vue.component('my-checkbox', {
data() {
return { checked: false, title: 'Check me' }
},
methods: {
check() { this.checked = !this.checked; }
},
render() {
return <div class="checkbox-wrapper" onClick={ this.check }>
<div class={{ checkbox: true, checked: this.checked }}></div>
<div class="title">{ this.title }</div>
</div>
}
});
7. 단일 파일 구성 요소 설정에서 빌드 도구를 편안하게 사용하는 한 단일 파일 구성 요소는 템플릿 옵션의 왕입니다. 모든 구성 요소 정의를 단일 파일에 유지하면서 마크업을 작성할 수 있다는 두 가지 장점을 모두 제공합니다.
전치가 필요하며 일부 IDE는 이 파일 형식에 대한 구문 강조를 지원하지 않지만 그렇지 않으면 이기기가 어렵습니다.
<template>
<div class="checkbox-wrapper" @click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title">{{ title }}</div>
</div>
</template>
<script>
export default {
data() {
return { checked: false, title: 'Check me' }
},
methods: {
check() { this.checked = !this.checked; }
}
}
</script>Pug와 SFC 같은 템플릿 전처리기를 사용할 수 있으므로 더 많은 템플릿 정의 가능성이 있다고 주장할 수도 있습니다.
어느 것이 가장 좋나요? 물론 완벽한 방법은 없으며 각 방법은 사용 사례에 따라 판단되어야 합니다. 나는 최고의 개발자가 모든 가능성을 깨닫고 모든 개발자를 Vue.js 도구 벨트의 도구로 만든다고 생각합니다!
영어 원문 주소 : https://vuejsdevelopers.com/2017/03/24/vue-js-comComponent-templates/ 관련 추천 :2020년 프론트엔드 Vue 면접 질문 요약 (첨부) ) 답변)
vue 튜토리얼 추천: 2020년 최신 5개 vue.js 비디오 튜토리얼 선택
더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요:
! !
프로그래밍 소개
위 내용은 Vue.js에서 컴포넌트 템플릿을 정의하는 여러 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!