Базовые вещи в Vue.js

👁 124 просмотров

Предисловие

Всегда, для начального использования какого-то фреймворка необходимо понимать в нем работу базовых вещей, чтобы зная их  было от чего отталкиваться дальше. То же самое и во 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 гораздо гибок и богат функционалом. Для углубленного изучения, лучше, конечно, почитать документацию.