Vue.js에서 컴포넌트 템플릿을 정의하는 여러 방법 소개

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: &#39;Check me&#39; }
	},
	methods: {
		check() { this.checked = !this.checked; }
	}
});

2. 템플릿 리터럴

ES6 템플릿 리터럴("백틱")을 사용하면 일반 Javascript 문자열에서는 불가능한 여러 줄에 걸쳐 템플릿을 정의할 수 있습니다. 안전을 위해 여전히 ES5로 변환해야 하지만, 이제 많은 새로운 브라우저가 이러한 명령을 지원하고 읽기가 더 쉬워졌습니다.

이 접근 방식은 완벽하지 않습니다. 대부분의 IDE는 여전히 구문 강조, 탭, 줄바꿈 등으로 인해 불편을 겪고 있습니다.

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: &#39;Check me&#39; }
	},
	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: &#39;Check me&#39; }
    },
    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 중국어 웹사이트의 기타 관련 기사를 참조하세요!