Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.10.2016, 20:38
Аспирант
Отправить личное сообщение для razorg1991 Посмотреть профиль Найти все сообщения от razorg1991
 
Регистрация: 10.11.2012
Сообщений: 98

Vue.js как подключать html темплейты
Не нашел примеров в документации (гугл тоже не помогает), как подключать темплейты не в коде js?
В документации всегда указывается что-то типа

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})


А если я хочу к примеру вынести html в отдельный файл для каждой страницы? Как тогда его использовать в компоненте?
Ответить с цитированием
  #2 (permalink)  
Старый 23.10.2016, 23:24
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

<!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>
Ответить с цитированием
  #3 (permalink)  
Старый 24.10.2016, 11:00
Аспирант
Отправить личное сообщение для razorg1991 Посмотреть профиль Найти все сообщения от razorg1991
 
Регистрация: 10.11.2012
Сообщений: 98

Я не совсем правильно задал вопрос. Я хочу использовать vue-router. Каждый темплейт (кусок html) я хочу положить в общую папку на сервере (к примеру pages). По нужному роуту, я хочу грузить/подлючать компонент с логикой (эта часть в принципе понятна), который в свою очередь должен подтянуть темплейт с папки сервера (вот здесь возникают проблемы). Я не хочу растянуть основной html файл до очень больших размеров и описывать в нем сразу все темплейты.
Ответить с цитированием
  #4 (permalink)  
Старый 24.10.2016, 14:21
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

В Vue оказывается даже templateURL нет... пфф, я думал нормальный фреймворк...
Ответить с цитированием
  #5 (permalink)  
Старый 24.10.2016, 14:31
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Цитата:
который в свою очередь должен подтянуть темплейт с папки сервера (вот здесь возникают проблемы)
вебпак передавал привет
template: require('./path/to/templatefile.html')
Ответить с цитированием
  #6 (permalink)  
Старый 24.10.2016, 20:22
Аспирант
Отправить личное сообщение для razorg1991 Посмотреть профиль Найти все сообщения от razorg1991
 
Регистрация: 10.11.2012
Сообщений: 98

Сообщение от Rise Посмотреть сообщение
В Vue оказывается даже templateURL нет... пфф, я думал нормальный фреймворк...
Покурив еще документации, понял что в Vue нет понятия template, а есть понятие компонент http://vuejs.org/2015/10/28/why-no-template-url/ соответственно templateURL нет. В принципе философия понятна, субъективное мнение по этому поводу - норм, пойдет.

А вот теперь начинается самое интересное.

http://vuejs.org/guide/single-file-components.html
http://vuejs.org/guide/components.html#Async-Components

Т.е. асинхронно подключать (грузить с сервера) компоненты можно.
И вот тут
Сообщение от destus Посмотреть сообщение
вебпак передавал привет
И теперь я понимаю, что достаточно простой Vue, медленно переходит в охренительно сложный webpack!

И прочитав вот это

http://webpack.github.io/docs/code-splitting.html

пока что нифига не понял

Т.е. опять-таки, не могу понять технику асинхронной загрузки компонентов.

Последний раз редактировалось razorg1991, 24.10.2016 в 20:36.
Ответить с цитированием
  #7 (permalink)  
Старый 24.10.2016, 21:01
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

razorg1991, есть скринкаст по webpack посмотри может поможет
Ответить с цитированием
  #8 (permalink)  
Старый 25.10.2016, 17:35
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

razorg1991,
Цитата:
И теперь я понимаю, что достаточно простой Vue, медленно переходит в охренительно сложный webpack!
Возьми какой-ниубдь boilerplate и используй https://github.com/vuejs-templates/webpack
Ответить с цитированием
  #9 (permalink)  
Старый 20.01.2017, 11:26
Новичок на форуме
Отправить личное сообщение для ZapevalovAnton Посмотреть профиль Найти все сообщения от ZapevalovAnton
 
Регистрация: 20.01.2017
Сообщений: 1

Вот хорошая статья о способах работы с шаблонами в Vue.js 2.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
HTML код в переменную, Как избежать \n\ denlem Элементы интерфейса 4 06.04.2016 01:16
как передавать данные из html? carder Общие вопросы Javascript 5 27.02.2016 19:46
Как изменить динамически произвольный html внутри панели WalterScott ExtJS 7 18.01.2015 19:58
как правильно отслеживать вставку html() bombascter jQuery 15 20.11.2012 09:47
На входе HTML получить на выходе просто текст, как? Dmitry Общие вопросы Javascript 2 25.08.2008 10:42