如何在 Vue 根实例中使用模板标签答案

【问题标题】：How to use template tag with Vue root instance如何在 Vue 根实例中使用模板标签
【发布时间】：2018-10-16 17:40:47
【问题描述】：

我正在使用 Vue 增强 Web 应用程序中的页面。过去我写过单个文件组件，我发现使用<template> 标签在文件顶部定义html模板很方便。

有没有办法在定义 Vue 根实例时使用这个标签？还是需要在 Vue 选项对象的模板属性中放一个字符串？

【问题讨论】：

您是直接嵌入到 html 页面中吗？不使用 .vue？
分享不适合您的代码？提供现场演示？

【解决方案1】：

你可以像这样使用 x-template 语法

<!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-template 块中的 html，您也可以使用 text/html。

您还可以在页面中定义许多组件。当您从纯 html/js 升级页面但无法完全更改时，这非常有用

参考：https://vuejs.org/v2/guide/components-edge-cases.html#X-Templates

【讨论】：

但是为什么不简单地使用 HTML5 <template> 标签呢？
@K3---rnc 用于 IE11，它通常仍被认为是最低支持的浏览器。我知道我经营的商业网站，IE11用户还是不少的。
我敢肯定，那些来自中非的用户一定会为您带来惊人的转化。 xD

【解决方案2】：

似乎从 2020 年开始，您几乎可以使用 HTML5 标签directly：

<template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</template>

在某些情况下您可能不想使用 <template> 的原因是为了避免无效的 HTML5 验证和/或呈现错误（请参阅 Vue.js DOM Template Parsing Caveats）。

【讨论】：