Начал изучать 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
Правильная ли это структура или возможны другие варианты?
Средний
