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

Question

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

vue.jshtml5-template

3

我正在使用Vue增强Web应用程序中的一个页面。过去我曾经编写过单个文件组件，并且我发现在文件顶部使用<template>标签定义HTML模板非常方便。

在定义Vue根实例时，是否有一种方法可以使用这个标签？还是我需要将一个字符串放入Vue选项对象的模板属性中？

- DatsunBing

你是直接嵌入到 HTML 页面中吗？没有使用 .vue 吗？ - Keith Nicholas

你能分享一下你的代码吗？它目前有什么问题？你可以提供一个实时演示吗？ - Niklesh Raut

2个回答

0

似乎到了2020年，你几乎可以直接使用HTML5标签：

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

在某些情况下，您可能不想使用<template>是为了避免无效的HTML5验证和/或渲染错误（请参见Vue.js DOM模板解析注意事项）。

- K3---rnc

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Keith Nicholas · Accepted Answer

你可以使用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://v2.vuejs.org/v2/guide/components-edge-cases.html#X-Templates。