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

金王子

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

定义Vue根实例时是否可以使用此标签？还是我需要在Vue选项对象的template属性中放置一个字符串？

基思·尼古拉斯

您可以像这样使用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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。