vue.js — компоненты

Так что же такое Vue.js? Фреймворк? Инструмент? Библиотека?

Должно ли оно использоваться для создания полнофункциональных веб-приложений или просто для добавления некоторых специальных функций? Должен ли я перейти от моего любимого фреймворка к нему? Если да, то почему? Могу ли я использовать его вместе с другими инструментами в моем проекте? Какие преимущества это может принести?

В этой главе мы постараемся найти ответы на все эти вопросы. Мы слегка потрогаем Vue.js и используйте его в нескольких небольших и простых примерах.

Более конкретно, мы сделаем следующее:

Узнаем, что такое Vue.js, его важные части и его историю.

Узнаем, какие проекты используют Vue.js

Создадим простой список покупок, используя Vue.js, и сравним реализацию на jQuery.

Реализуем простой таймер Pomodoro, используя Vue.js

Насладимся маленьким и простыми упражнениями

 

История vue.js

Когда Эван Ю, создатель Vue.js (http://evanyou.me/), работал в Google Creative Labs
В одном из проектов им нужно было быстро создать прототип довольно большого интерфейса. Писать много
повторяемого HTML  занимало много времени и ресурсов, и именно поэтому Эван начал
поиск какого-либо существующего инструмента для этой цели. К его удивлению, он обнаружил, что
не было ни инструмента, ни библиотеки, ни фреймворка, который бы точно соответствовал цели быстрого
прототипирования! В то время Angular широко использовался, React.js только начинался, а фреймворки
такие как Backbone.js использовались для крупномасштабных приложений с архитектурой MVC. Для
проекта, который требовал чего-то действительно гибкого и легкого, ни одна из этих сложных структур не была адекватной.

 

Когда вы понимаете, что чего-то классного не существует, и вы можете его создать — просто сделайте это!

 

Vue.js родился как инструмент для быстрого прототипирования. Теперь его можно использовать для построения сложных масштабируемых
реактивные веб-приложений. Это было то, что сделал Эван. Вот как он пришел к идее создания библиотеки, которая поможет
в быстром прототипировании, предлагая простой и гибкий способ реактивного связывания данных и многоразовых компонентов.
Как и любая хорошая библиотека, Vue.js рос и развивался, предоставляя больше возможностей и это было многообещающе с самого начала. В настоящее время он обеспечивает простой способ использования и создание плагинов, написание и использование миксов, и общее добавление пользовательского поведения.

 

Самое главное о Vue.js

Vue.js позволяет вам просто привязать ваши модели данных к уровню представления. Это также позволяет легко использовать компоненты во всем приложении.
Вам не нужно создавать специальные модели или коллекции и регистрировать в них объект событий. Вам не нужно следовать специальному синтаксису. Вам не нужно устанавливать какие-либо бесконечные зависимостей.
Ваши модели — простые объекты JavaScript. Они связаны с тем, что вы хотите в вашем View (текст, ввод текста, классы, атрибуты и т. д.), И это просто работает.
Вы можете просто добавить файл vue.js в свой проект и использовать его. Кроме того, вы можете использовать
vue-cli с плагинами Webpack и Browserify, которое не только загружает весь проект но также поддерживает горячую перезагрузку и предоставляет инструменты для разработчиков.
Вы можете отделить слой View от стилей и логики JavaScript, или вы можете поместить его полностью в тот же файл Vue и построить структуру и логику ваших компонентов в одном месте.
Существует поддержка плагинов для всех современных и часто используемых IDE.
Вы можете использовать любые препроцессоры, которые вы хотите, и вы можете использовать ES2015. Вы можете использовать это
наряду с вашим любимым фреймворком, в котором вы разрабатывали, или вы можете использовать его сами. Вы
можете использовать его просто для добавления небольшой функциональности, или вы можете использовать всю экосистему Vue для создания сложные приложения.

 

Я не знаю как, но я чувствую, что ваши выходные близки и вы начинаете думать о походе по магазинам, чтобы купить необходимые продукты на следующую неделю. Если вы не гений который может поддерживать весь список в вашей голове вы, вероятно, сделать список покупок, прежде чем идти за покупками. Может быть, вы даже начнете использовать какое-либо приложение для этого. Теперь я спрашиваю вас: почему бы не использовать собственное приложение?  Давайте сделаем это! Давайте создадим наше собственное приложение со списком покупок. Давайте начнем с создания быстрого прототипа для него. Это действительно простая задача — создать интерактивный прототип для списка покупок.
Он должен показать список и позволить нам добавлять и удалять элементы. На самом деле, это очень похоже на
Список дел. Давайте начнем делать это, используя классический подход HTML + CSS + JS + jQuery. Мы также будем
используйте платформу Bootstrap (http://getbootstrap.com/), чтобы сделать оформление более красивым, без необходимости писать обширный код CSS.

 

Реализация списка покупок с использованием jQuery


стр 39