Предисловие
Всегда, для начального использования какого-то фреймворка необходимо понимать в нем работу базовых вещей, чтобы зная их было от чего отталкиваться дальше. То же самое и во Vue.js, нам нужно знать как его готовить, имея примитивный набор знаний о базовых его вещах, начиная от старта простого примера и кончая использование в нем обработчиков событий. Именно эту суть преследует данные пост.
Установка Vue.js
Установить Vue.js — это просто. Все, что нам нужно — это знать, какими методами установить. Есть несколько способов, в зависимости от того, где мы хотим использовать Vue.js.
Если хотим использовать на стороне клиента, то можем ссылать на cdn — ссылку проекта, добавив в страницу ссылку на cdn:
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
Можем также добавить через менеджер пакетов bower:
bower install vue
Если хотим использовать в масштабируемых Node.js — серверных приложениях, то выполняем код:
npm install vue
Все дополнительные моменты установки можно найти в разделе установки Vue по ссылке.
Базовое приложение Vue.js
Ниже представлено базовое приложение на Vue.js или базовый скелетон приложения на Vue.js
Описание основных параметров приложения Vue.js
Выше мы создали первое и базовое приложение на Vue.js. Давайте рассмотрим список основных его параметров.
Параметры приложения:
- new Vue{…} — это главный объект приложения. Можно было это написать так var app = new Vue{…}; после чего через объект app можно было получить все значения данного приложения для взаимодействия с другими приложениями;
- data — это поле, в котором хранятся все данные и переменные текущего приложения. Это могут быть обычные объекты или же массивы в JSON — формате;
- computed — это поле, которое нужно для вычисляемых методов. Параметрами данного поля являются методы, которые вычиляют обновляющиеся данные. Вычисление происходит после каждого случая взаимодействия с приложением, поэтому это поле обновляется всегда;
- methods — поле для определения методов текущего приложения. Это могут быть обработчики событий или другая логика выполнения кода;
- watch — поле для задания слушателей для определенного параметра. Данный слушатель будет выполняться всегда, когда будет обновляться значение данного параметра;
Условные конструкции приложения:
- v-if=’isTrue’ — условный оператор выполнения текущего блока, если какое-то значение истинно;
- v-else — условный оператор ветвления, если не выполнится блок v-if. Является необязательной продолжительной частью v-if;
- v-else-if — условный оператор ветвления, если не выполнится блок v-if и требуется продолжения ветвления. Является необязательной продолжительной частью v-if;
- v-show — выполняет ту же операцию, что и v-if, но в отличии от v-if данная конструкция просто скрывает элемент посредством css — поля display;
Конструкции организации циклов:
- v-for=‘item in items’ — самый простой вид итерации из массива, в данном случае, будет читать все объекты в виде item из массива items;
- v-for=‘(index, item) in items’ — то же самое, но еще можно заполучить индекс текущего элемента массива;
- v-for=‘value in object’ — итерация полей из объекта;
- v-for=‘(key, val) in object’ — итерация полей из объекта с ключами;
- v-for=‘n in 10’ — ранжирование, т.е. инкремент на 1 значения n от 0 до определенного значения, в данном случае — до 10;
Организации событий:
- v-on:eventname=’eventHandler‘ — организиует для элемента событие с типом eventname и обработчиком eventHandler. В роли типа события может выступать любой определенный в JS событие на элементе, а в роли обработчика может выступать функция, определенная в параметре приложения methods;
- @eventname=’eventHandler‘ — короткая запись организации события без v-on;
- v-on:eventname=’eventHandler(param)‘ — то же самое, но передаем еще и параметр в обработчик;
- v-on:eventname=’eventHandler(param, $event)‘ — то же самое, но передаем еще параметр и специальный объект события в обработчик. В последствии мы можем на объекте глобального события event вызвать, к примеру метод preventDefault() или же можем заполучить координаты нажатого объекта;
Работа с атрибутами:
- v-bind:attrname=’pаram’ — позволяет задать значение для атрибута, где param — переменная приложения Vue;
- :attrname=’param’ — то же самое, нов коротком виде;
Сквозная связь между данным поля HTML и параметром:
- v-model:=’param’ — позволяет двунаправленно создавать связи между меняющимся значением какой-то формы HTML и каким-нибудь параметром или переменной Vue.js. Это позволяет создавать интерактивному смену значения одной переменной по всему приложению;
На этом материал для данного поста все. Это основные моменты, но не все. Vue.js гораздо гибок и богат функционалом. Для углубленного изучения, лучше, конечно, почитать документацию.