Как подключать шаблоны в Vue.js и еще вопрос по структуре приложения?

Начал изучать JavaScript и попутно Vue.js

1 .Использую роутер vuejs.github.io/vue-router/en/basic.html

Везде в примерах подключение компонента и шаблона указано что-то типа :
var Foo = Vue.extend({
    template: '<p>This is foo!</p>'
})


но для больших компонентов не удобно писать html в js файле, получается что-то вроде:
var Guestbook = Vue.extend({
    template: '<div id="guestbook" style="width: 450px">' +
        '<h3>Новый комментарий</h3>'+
        '<form v->' +
            '<div class="form-group">' +
                '<label for="">Ваше имя</label>'+
                '<input type="text" class="form-control">' +
            '</div>'+
            '<div class="form-group">' +
                '<label for="">Комментарий</label>'+
                '<textarea class="form-control"></textarea>' +
            '</div>'+
            '<div class="form-group">' +
                '<button type="submit" class="btn btn-success">Отправить</button>'+
            '</div>'+
        '</form>'+
        '<h2>Комментарии</h2>' +
        '<article v-repeat="comment: comments">' +
            '<h3>{{comment.name}}</h3>' +
            '<p>{{comment.content}}</p>' +
        '</article>' +
    '</div>'
});

а тут еще даже половины html кода нет.

Каким образом лучше создавать шаблоны?

2. Вопрос по поводу структуры всего приложения, я сейчас начал делать так:
разбил все по разным файлам
router.js - здесь подключаются компоненты с шаблонами и router.map
папка с моделями
/models/guestbook.js - модель для добавления комментариев и вывода списка комментариев.
/models/news.js - модель новости

все файлы подключаются в файле index.html

Правильная ли это структура или возможны другие варианты?
  • Вопрос задан
  • 4931 просмотр
Пригласить эксперта
Ответы на вопрос 4
@maxzabl
var Foo = Vue.extend({
    template: '#view1'
})
var Bar = Vue.extend({
    template: '#view2'
})

В коде страницы
<div class="hiden">
    <div id="view2">
        ......
    </div>
    <div id="view2">
       ...
    </div>
</div>

Если строка начинается с # будет использоваться querySelector и использовать innerHTML выбранного элемента в качестве строки шаблона
Ответ написан
kleinmaximus
@kleinmaximus
Senior Full-stack Javascript Developer
Используйте однофайловые компоненты - https://ru.vuejs.org/v2/guide/single-file-componen... - это удобнее
Ответ написан
@jk_action
Разработчик С++ и JavaScript
Как сказано выше, копайте в сторону require, он может грузить js динамически, есть возможность загрузки текста(html) шаблоны и json. Заведите директорию template где будут хранится шаблоны.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы