Vue

Vue JS - Прогрессивный JavaScript фреймворк для создания интерфейсов.

Элементы Vue

Примеры шаблона и скриптов для наглядности:

HTML

<template>
  <div class="card">
    <button class="btn" @click="property++" v-on:click="someMethod(property, $event)">Слушатели событий</button>
  </div>
  <div class="card">
    <input type="text" @input="testHandler"/>
  </div>
  <div class="card">
    <input type="text" :placeholder="propertyInData"/>
  </div>
  <div class="cards" v-if="object.length != 0">
    <div class="card">{{ object.name }}</div>
  </div>
  <div class="cards" v-else-if="object.length > 4">
    <div class="card">{{ object.name }}</div>
  </div>
  <div class="cards" v-else>
    <div class="card">Default Action</div>
  </div>
  <div class="cards" v-for="items in array">
    <div class="card">{{ item.title }}</div>
  </div>
</template>

JS

const App = {
  data() {
    return {
      property: 0
    }
  },
  methods: {
    testHandler(event) {
      console.log(event.target.value)
    }
  }
}

Свойства и Методы

data() - Метод для передачи параметров в html-представление. В шаблоне будет доступна переменная {{ property }} со значением 0.

methods: - Свойство, хранящее объект со всеми используемыми методами в компоненте.

Директивы

v-on:event="action" (@) - Слушатель событий. @ - сокращенная форма . Пишем событие вместо event. В месте action можно выполнять действия с переменными или прописывать выполняемые функции.

Если указать функцию то в нее автоматически передается event, с которым можно работать. Например, если работаем с input, то можно обрабатывать значение, введенное в поле через event.target.value.

Эта директива поддерживает все события JavaScript. Наглядный список:

• click
• input

v-bind:placeholder="test" (:) - Привязка свойств из data() к аттрибутам тега. : - сокращённая форма.

v-if="object.length != 0" - Условие if. Если true то будет выведено то, что между тегами.

v-else-if="object.length > 4" - Условие else if. Обязательно должно следовать за v-if и также содержит проверку.

v-else - Условие else. Между тегами указываем то, что выводим в случае false условий v-if или v-else-if.

v-for="item in array" - Цикл. item - элемент, array - массив или объект. Можно определить переменную, в которую будет помещен индекс. v-for="(item, index) in array".

{{ property }} - Интерполяция. Вывод свойств из data(). Внутри фигурных скобок можно также выполнять действия с переменными, например, {{ property.split('').reverse().join('') }}.

Модификаторы событий

@keypress.enter="someMethod" - Такой пример позволяет сразу вызвать нужный метод на нажатие enter или выполнить другое действие без вызова метода. Автоматически будет отслежено событие keypress и проведена проверка на клавишу enter.