Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在Vue中定义组件模板有很多选择。在我看来，至少有七种不同的方式:
字符串
模板文字
X-Templates
内联
渲染功能
JSX
单页组件
在本文中，我们将逐一介绍每种方法的示例，并讨论其优缺点，以便您了解在任何特定情况下使用哪种方法最好。
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模板字面量(“backticks”)允许您跨多行定义模板，这是在常规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: '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-templates相同，但一个优点是内容在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与SFCs!
哪个最好？
当然没有一种完美的方式，每一种都应该根据你的用例来判断。我认为最好的开发人员会意识到所有可能性，并将每个开发人员作为他们的Vue.js工具带中的工具！
英文原文地址：https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates/
更多web开发知识，请查阅 HTML中文网 ！！