在Vue中定义组件模板大致有如下七种不同的方式:

1. 字符串

2. 模板字面量

3. x-Template

4. 内联模板

5. render方法

6. JSX

7. SFC 单文件组件

比较常用的是第一，第二，第三和第七种

1.字符串方式

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; }
	}});

这个方式最简单但不是很直观，也就是在组件对象内的template选项后面添加HTML模板内容，模板内容被定义为一串JS字符串，书写过程中不能换行不方便阅读。

2.模板字面量方式

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; }
	}});

和第一种类似，但是template后面使用的是反引号包裹模板内容，并且允许换行，方便阅读代码

3.x-template

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>

前面两种方法都是直接在组件定义内直接配置template选项，这个x-template方法过程上就稍显繁琐一些。同样是在组件定义内的template选项后面跟的是一个id值，然后在HTML文档中创建一对script标记的内容，类型为text/x-template，id值为组件定义的template选项的id值，script标记内为HTML模板内容。

4. 内联模板

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>

和前面x-template有点类似，组件定义的部分（数据，计算属性，方法等）和组件模板内容分开了。inline-template表示组件内容的内容是模板而不是slot。

5.render方法

6.JSX

这两种方法都不了解

7.SFC单文件

<!-- 单文件的 模板部分  -->
<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>

SFC单文件包含模板，脚本逻辑和样式三个部分，模板内容只要包裹在<template>内即可。

原文：https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates/

本文做简略翻译