Один опытный друг-разработчик недавно сказал мне, что Vue.js становится все более популярным в его консалтинговой фирме по программному обеспечению. Поэтому, когда мне понадобилась альтернатива Angular в моем последнем проекте, специальный трекер «ошибок и проблем», я решил разобраться, из-за чего был весь этот шум!
Создание моего первого приложения Vue
Документация Начало работы на vuejs.org »хорошо написана и проста в использовании. Конечно, я сделал свою долю ошибок новичка, которые я здесь задокументирую.
Моя цель - динамически отображать список ошибок и проблем, заполняя каждую строку одним элементом из массива [issues].
Вот где я буду создавать свое приложение Vue (issues.js):
var issuesApp = new Vue({
el: '#issues-container',
data: {
foo: 'bar'
}
})
И вот где я беру соответствующие скрипты в issues.html:
<script type="text/javascript" src="vue/dist/vue.min.js"></script> <script type="text/javascript" src="issues.js"></script>
Попался
Не могу найти элемент
Если вы попытаетесь загрузить оба приведенных выше сценария в <head> документа, вы получите эту неприятную ошибку:
[email protected]:485 [Vue warn]: Cannot find element: #issues-container
Перемещение тега скрипта, который ссылается на vue.min.js, в нижнюю часть страницы (непосредственно перед закрывающим тегом body) не помогло.
Что сработало, так это добавление атрибута defer в файл, в котором я вызвал new Vue().
<script type="text/javascript" src="issues.js"></script>
Я не уверен, что это идеальное решение, но оно помогло мне быстро запустить и запустить мое первое приложение.
Получение полезных отзывов в консоли
Я нашел этот полезный лакомый кусочек в документации к расширению Chrome vue-devtools:
Если на странице используется производственная / миниатюрная сборка Vue.js, проверка инструментов разработчика отключена по умолчанию, поэтому панель Vue не отображается.
Я перешел на неминифицированную версию vue.js, которая поставляется с модулем узла Vue, и, прежде всего, я могу просматривать больше предупреждений, полезных для новичка.
[Vue warn]: v-bind without argument expects an Object or Array value (found in <Anonymous>)
Это предупреждение заставило меня понять, что это неправильное использование v-bind:
Foo is <span v-bind="foo"></span> <!-- don't do this! -->
Оказывается, фигурные скобки работают нормально:
<div>Foo is {{foo}}</div>
Советы новичкам в консоли
Боковое примечание: мне нравятся советы, которые разработчики Vue предоставляют в консоли:
Почему не все библиотеки это делают?!? (Пссш… Угловой, я смотрю на тебя! 😉)
Устаревшие хуки жизненного цикла
Я на собственном опыте выяснил, что некоторые хуки жизненного цикла, упомянутые в старых руководствах, существовали в предыдущих версиях Vue, но были объявлены устаревшими в Vue 2.0. Например, ready() больше не доступен, но альтернативы mounted() или created(), в зависимости от того, когда вы хотите, чтобы функция запускалась:
var issuesApp = new Vue({
el: '#issues-container',
ready: function() { // this won't work
this.loadIssues();
},
created: function() { // but this will
this.loadIssues();
},
})
Vue.component головные боли
Я попытался создать свой первый компонент следующим образом:
issues.js:
Vue.component('issueitem', {
template: '<div>Hi!</div>'
})
issues.html:
<issueitem></issueitem>
Но я получил следующую ошибку:
Unknown custom element <issueitem>. Did you register the component correctly?
Что ж, Vue, если бы я знал, как правильно зарегистрировать компонент, мы бы не вели этот разговор, не так ли ??? 😄
Оказывается, помимо вызова Vue.component вам нужно добавить ключ components при вызове new Vue().
var _issueitem = Vue.component('issueitem', {
template: '<div>Hi!</div>'
});
var issuesApp = new Vue({
el: '#issues-container',
data: {
foo: 'bar'
},
components: {
issueitem: _issueItem
}
});
Указание внешнего файла шаблона в компоненте
templateUrl, с которым я был знаком по Angular, не существует во Vue.
Vue.component('issue', {
templateUrl: 'views/issue.html' // don't do this!
})
В качестве временной меры я поместил разметку своего шаблона прямо в .component, заключив в него одиночные обратные кавычки:
var _issueitem = Vue.component('issueitem', {
template: `
<div class="issue-row" id="{{issue.id}}">
<div class="issue-col">Site: {{issue.site}}</div>
<div class="issue-col">Issue: {{issue.issue}}</div>
<div class="issue-col">Page:{{issue.page}}</div>
<div class="issue-col">Browser:{{issue.browser}}</div>
<div class="issue-col">Severity: {{issue.severity}}</div>
<div class="issue-col"># Affected Users: {{issue.users}}</div>
<div class="issue-col">Status: {{issue.status}}</div>
</div>
`
});
Выкладывать большой кусок HTML в середине функции JavaScript немного неудобно, но моя цель - быстро запустить и запустить это приложение [знаменитые последние слова!], Так что пока я оставлю все как есть.
Определение объема
Переменные, определенные на уровне приложения, не доступны напрямую внутри компонентов.
var _issueitem = Vue.component('issueitem', {
template: '<div>Foo is {{foo}}<div>' // foo is undefined
});
var issuesApp = new Vue({
el: '#issues-container',
data: {
foo: 'baz'
},
components: {
issueitem: _issueitem
}
});
Однако, если вы определите переменную внутри компонента, она будет доступна для шаблона компонента:
var _issueitem = Vue.component('issueitem', {
data: function() {
return {
foo: 'bar'
}
},
template: '<div>Foo is {{foo}}</div>'
);
var issuesApp = new Vue({
el: '#issues-container',
components: {
issueitem: _issueitem
}
});
(Теперь это кажется очевидным - ага!)
В итоге
Если вы знакомы с другим фреймворком, таким как Angular, Vue.js не покажется полностью чуждым. Как и во многих проектах с открытым исходным кодом, в документации для начинающих есть несколько дыр, но, немного покопавшись, можно было создать мое первое интерфейсное приложение Vue всего за несколько часов.
Я надеюсь, что этот список ошибок поможет другим новичкам!
Примечание об источниках: большое спасибо Райану Ченки, автору Создайте приложение с Vue.js, Джошуа Бемендерферу, автору Понимания крючков жизненного цикла Vue.js, и многие участники StackOverflow уже задавали вопросы, похожие на мои, и ответили на них!
