Как использовать тег шаблона с корневым экземпляром Vue - PullRequest
Новая
       19

Как использовать тег шаблона с корневым экземпляром Vue

0 голосов
/ 07 мая 2018

Я улучшаю страницу в веб-приложении, используя Vue.В прошлом я писал отдельные компоненты файла, и мне было удобно определять HTML-шаблон в верхней части файла с помощью тега <template>.

Есть ли способ использовать этот тег при определенииэкземпляр Vue root?Или мне нужно поместить строку в свойство шаблона объекта опций Vue?

1 Ответ

0 голосов
/ 07 мая 2018

Вы можете использовать синтаксис 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>

стоит отметить, если ваш редактор не понимает html внутри блока x-template, вы также можете использовать text/html.

Вы также можете определить количество компонентов на странице. Это очень полезно, когда вы обновляете страницу с обычного html / js, но не можете полностью изменить ее на

См .: https://vuejs.org/v2/guide/components-edge-cases.html#X-Templates

...