在定义 Vue 中的组件模板时,有很多选择。据我统计,至少有七种不同的方式!
在本文中,我们将浏览每个示例,并分析利弊,以便您知道在任何特定情况下最好使用哪一个。
内容列表:
定义 Vue 组件模板的最快和最简单的方法是将属性添加到组件定义中,并分配包含标记的常规字符串。template
这种方法实际上只用于代码示例或快速原型,但是,因为它很难与任何超越最简单的模板工作。
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; }
}
});
Runtime template compiler: Vue 附带一个内部模块,用于在运行时将 HTML 模板编译到 JavaScript。如果您使用在运行时不使用 HTML 标记的模板选项,您可以使用 Vue 的特殊构建.js该模块不包括此模块(因此,它更小、更快)。
模板字面
从 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; }
}
});
详情:
- 应用于HTML还是JS? JS
- 是否需要polyfill(补丁)或 transpile(转译器)? 是
- 是否需要运行时模板编译器? 是
较旧的浏览器可能不支持此 ES2015 功能,因此,尽管您可能需要转录代码以确保安全。
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>
详情:
- 应用于HTML还是JS? HTML
- 是否需要polyfill(补丁)或 transpile(转译器)? 否
- 是否需要运行时模板编译器? 是
Inline templates
使用此方法,您可以在父模板中定义组件的模板。只需务必添加属性,以便 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>
详情:
- 应用于HTML还是JS? HTML
- 是否需要polyfill(补丁)或 transpile(转译器)? 否
- 是否需要运行时模板编译器? 是
内联模板和 x 模板可以与后端框架中的模板引擎(例如 Laravel Blade)配合工作。
渲染功能
渲染功能要求您使用纯 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]
)
]
);
}
});
详情:
- 应用于HTML还是JS?JS
- 是否需要polyfill(补丁)或 transpile(转译器)? 否
- 是否需要运行时模板编译器? 否
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>
}
});
详情:
- 应用于HTML还是JS? JS
- 是否需要polyfill(补丁)或 transpile(转译器)? 是
- 是否需要运行时模板编译器? 否
单文件组件
Vue.js最受欢迎的功能之一是单文件组件(SFC)。这些允许您在将组件定义保留在一个文件中的同时编写标记。它们由 vue 装载机编译为渲染功能,因此您也能获得最佳的运行时间性能。
要创建 SFC,请首先创建一个 。vue文件,例如"复选框",然后在标签中定义模板并定义标签中的组件。然后,此文件导入到您的主 Vue 应用程序。template
script
只要您愿意使用 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>
详情:
- 应用于HTML还是JS? HTML
- 是否需要polyfill(补丁)或 transpile(转译器)? 是
- 是否需要运行时模板编译器? 否
获胜者是...
我如果你想要一个 Tldr;本文的版本是:使用单文件组件,因为它们是几乎每个场景中最通用和最强大的选项。
这就是说,上述每个将有一个优势,在特定的情况下,应该根据你有的用例来判断。将每个工具都视为 Vue 中的另一个工具.js工具带,您可能有一天需要这些工具链!