参考来源 7 Ways to Define a Component Template in Vue.js - Vue.js Developers (vuejsdevelopers.com)
- 纯字符串
- 模板文本
- X 模板
- 内联模板
- 渲染函数
- 断续器
- 单文件组件
在 Vue 中定义一个组件模板，至少有七种不同的方式
纯字符串
定义 Vue 组件模板的最快、最简单的方法是向组件定义添加一个属性，并分配一个包含标记的常规字符串。
但是，此方法实际上仅用于代码示例或快速原型，因为除了最简单的模板之外，很难使用任何内容。
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; }
}
});
模板文本
ES6 模板字面量允许你使用多行定义模板，这在常规 JavaScript 字符串中是不被允许的。此方式阅读体验更佳，并在许多现代浏览器中得到支持，不过安全起见你还是需要把代码转换成 ES5 。
这种方法并不完美，我发现大多数 IDE 仍然会通过语法高亮、tab 格式化、换行符等地方的问题折磨着你。
从 ES2015 开始，可以使用反引号声明一种称为模板文本的特殊字符串。与常规字符串不同，这些字符串允许嵌入表达式，并且可以是多行的。
与常规字符串相比，多行功能使这些模板对于定义组件模板更有用，因为它们使标记更具可读性。
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; }
}
});
X 模板 text/x-template
使用此方法时，模板将在索引.html文件中的脚本标记内定义。脚本标记在组件定义中由 id 指定类型和引用。text/x-template
从好的方面来说，此方法允许您在 HTML 文件中编写模板标记。缺点是它将模板与组件定义的其余部分分开，因此可能有点难以推理。
Vue.component('my-checkbox', {
template: '#checkbox-template',
data() {
return { checked: false, title: 'Check me' }
},
methods: {
check() { this.checked = !this.checked; }
}
});
<div id="app">...</div>
<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>
内联模板 inline-template
使用此方法，可以在使用组件时在父模板中定义组件的模板。只要确保添加属性，以便 Vue 知道在哪里可以找到它。inline-template
该方法具有与x模板大致相同的优点和缺点。一个有趣的区别是，由于模板可以在文档正文中定义，因此可以对内容进行SEO爬网。
Vue.component('my-checkbox', {
data() {
return { checked: false, title: 'Check me' }
},
methods: {
check() { this.checked = !this.checked; }
}
});
<div id="app">
...
<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>
</div>
渲染函数 render
渲染函数要求您使用纯 JavaScript 定义模板。您需要阅读 Vue 文档以了解确切的语法，但粗略的想法是，您可以通过调用 来定义模板节点。createElement(tag, options, childElements)
这样做的好处是，它不需要任何形式的编译，并且允许您完全访问JavaScript功能，而不是指令提供的功能。例如，要在标记模板中进行迭代，您只能使用 ，但在 JavaScript 中，可以使用任何数组方法。v-for
但是，渲染函数比其他模板选项要冗长和抽象得多，我不希望很多人愿意编写这样的整个应用程序。
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]
)
]
);
}
});
断续器 JSX
JSX 是 JavaScript 的扩展，它允许您在 JavaScript 代码中使用特殊的模板语法。
由 React 推广，这是 Vue 中最有争议的模板选项，因为一些开发人员认为它丑陋、不直观，是对 Vue 精神的背叛。
但是，JSX 可用于以更具可读性和更不抽象的方式编写 Vue 渲染函数。但是，它确实需要您转译，因为浏览器无法读取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>
}
});
单文件组件
Vue.js最受欢迎的功能之一是单文件组件（SFC）。这些允许您编写标记，同时将组件定义保存在一个文件中。它们由 vue 加载程序编译为渲染函数，因此您也可以获得最佳的运行时性能。
要创建 SFC，首先要创建一个 .vue 文件（例如 Checkbox.vue），然后在标记中定义模板并在标记中定义组件。然后，此文件将导入到您的主 Vue 应用程序中。templatescript
只要您愿意使用 Vue CLI 或在项目中设置自己的构建工具，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>
当然没有一个完美的方法，每一个都应该根据你的用例来判断。我认为最好的开发人员会注意到所有的可能性，并将它们作为 Vue.js 工具栏的一个工具。
