Каковы точные требования для получения шаблонов DOM, работающих в VueJS 2.0?

Я пробовал определять свои шаблоны несколькими способами, и все они терпят неудачу с разными ошибками. Я использовал один корневой тег <div> в каждом примере, поскольку консоль продолжает предлагать. Для тестирования, это просто просто:Каковы точные требования для получения шаблонов DOM, работающих в VueJS 2.0?

<div>hello it's me</div>

Вот что я пробовал:

Script Тег: шаблон компонента требует корневого элемента, а не просто текст: привет это мне
```
<script type="text/x-template" id="my-template"> 
    <div>hello it's me</div> 
</script> 
```
шаблон тег не может найти элемент: # моего-шаблон
```
<template id="my-template"> 
    <div>hello it's me</div> 
</template>` 
```

Сценарий с тегом шаблона: (никаких ошибок в консоли, а также не видно!)

<script type="text/x-template" id="my-template"> 
    <template> 
    <div>hello it's me</div> 
    </template> 
</script>

Script с Template (ID'ed) тег: Не можете найти шаблон: # мой-шаблон

<script type="text/x-template"> 
<template id="my-template"> 
    <div>hello it's me</div> 
</template> 
</script>

Что такое правильный способ использовать шаблоны DOM? Кроме того, должны ли теги шаблона появляться в DOM <head>, начиная с <body>, в конце <body> или в другом месте?

Спасибо!

источник

2017-02-14 bigp

В пронумерованных и пронумерованных списках вы должны отфильтровать фрагменты кода на 8 пробелов, чтобы они правильно отображались здесь. – Pointy

Спасибо за редактирование, только что поняли после того, как я опубликовал его! – bigp

Эй, у меня не все коды js, но есть две части для приложения vue.

Экземпляр Vue устанавливается на узел dom. Идентификатор идет на каком-то HTML элемента в вашем HTML
Ваших компонентов, которые являются частью ви приложения экземпляра

Так, например, позволяет сказать, что у вас есть файл index.html, вы бы установить вю таким образом ,

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
<body> 
    <div id='app'></div> 
</body> 
<script type="application/javascript"> 
    new Vue({ 
    el: '#app' 
    }) 
</script>

Это указывает vue создать экземпляр и прикрепить его к вашему дому.

Вторая часть состоит в том, чтобы добавить компоненты к вашему vue. Это намного лучше выполняется с помощью webpack, но вы можете сделать это вручную.

<script src="https://unpkg.com/vue/dist/vue.js"></script> 

<div id="app"> 
</div> 

<script> 
    foo = Vue.component('foo',{ 
    template: '<div>I am a real component!</div>' 
    }); 

    new Vue({ 
    el: '#app', 
    template: '<div><foo></foo></div>', 
    components: [foo] 
    }) 
</script>

источник

2017-02-14 02:24:45 Austio

Ааа! Хорошо, может быть, я не понимаю, как его используют ссылки на идентификаторы шаблонов на DOM - нужно ли вообще использовать что-то вроде webpack для связывания шаблонов? Нет способа сделать это через стандартные HTML-файлы? Просто любопытно, хотя, вероятно, имеет смысл понять, что я изучаю webpack, так как я запускаю приложение для пользовательских узлов и все, но я точно думал, что ванильный HTML может быть распознан Vue. – bigp

Что я поставил выше, нужно просто запустить, если вы поместите его в html-файл, нет необходимости в веб-пакете. Webpack существует только в том случае, если вы делаете более сложные вещи и хотите отображать отдельные компоненты файлов, как вы упомянули выше. Если вы идете по этому маршруту, я рекомендую использовать vue-cli для создания шаблона webpack. – Austio

Каковы точные требования для получения шаблонов DOM, работающих в VueJS 2.0?

ответ

Смежные вопросы