我正在使用 Vue 增强 Web 应用程序中的页面。 过去，我编写过单个文件组件，我发现使用<template>标记在文件顶部定义 html 模板很方便。
在定义 Vue 根实例时，有没有办法使用此标签？ 还是我需要在 Vue 选项对象的模板属性中放置一个字符串？
你可以使用 x 模板语法，就像这样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<script type="text/x-template" id="message-template">
<div >
{{message}}
</div>
</script>
<div id="app"> </div>
<script>
var graphapp = new Vue({
el: "#app",
data: {
message: "hi there"
},
template: "#message-template"
});
</script>
</body>
</html>
值得注意的是，如果你的编辑器不理解x模板块中的html，你也可以使用text/html。
您还可以在页面中定义许多组件。 当您从纯html/js升级页面但无法完全更改它时，这非常有用
参考： https://v2.vuejs.org/v2/guide/components-edge-cases.html#X-Templates
似乎截至 2020 年，您几乎可以直接使用 HTML5 标签：
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
在某些情况下，您可能不想使用<template>的原因是为了避免无效的 HTML5 验证和/或渲染错误(请参阅 Vue.js DOM 模板解析注意事项)。