Vue.js как подключать html темплейты
Не нашел примеров в документации (гугл тоже не помогает), как подключать темплейты не в коде js?
В документации всегда указывается что-то типа Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
А если я хочу к примеру вынести html в отдельный файл для каждой страницы? Как тогда его использовать в компоненте? |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<template id="my-component">
<div>hey</div>
</template>
<div id="app">
<my-component></my-component>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<script>
Vue.component('my-component', {
template: '#my-component'
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
|
Я не совсем правильно задал вопрос. Я хочу использовать vue-router. Каждый темплейт (кусок html) я хочу положить в общую папку на сервере (к примеру pages). По нужному роуту, я хочу грузить/подлючать компонент с логикой (эта часть в принципе понятна), который в свою очередь должен подтянуть темплейт с папки сервера (вот здесь возникают проблемы). Я не хочу растянуть основной html файл до очень больших размеров и описывать в нем сразу все темплейты.
|
Цитата:
template: require('./path/to/templatefile.html')
|
Цитата:
А вот теперь начинается самое интересное. http://vuejs.org/guide/single-file-components.html http://vuejs.org/guide/components.html#Async-Components Т.е. асинхронно подключать (грузить с сервера) компоненты можно. И вот тут Цитата:
И прочитав вот это http://webpack.github.io/docs/code-splitting.html пока что нифига не понял :cray: Т.е. опять-таки, не могу понять технику асинхронной загрузки компонентов. |
razorg1991,
Цитата:
|
Вот хорошая статья о способах работы с шаблонами в Vue.js 2.
|
| Часовой пояс GMT +3, время: 16:31. |