Введение в Vue.js

Что такое Vue.js?

Vue (произносится /vjuː/, примерно как view) — это прогрессивный фреймворк для создания пользовательских интерфейсов

• Реактивный
• Доступный
• Разносторонний
• Производительный
• Поддерживаемый
• Тестируемый

Hello world

      
        <div id="app">{{ message }}</div>

        <script src="https://unpkg.com/vue"></script>
        <script>
          new Vue({
            el: '#app',
            data: {
              message: 'Hello Vue.js!'
            }
          });
        </script>
      
    

Конструктор

Работа с Vue.js начинается с создания нового инстанса new Vue.

      
        new Vue({
          el: '#app',
          template: `
{{ message }}
`,
          data: {},
          computed: {}
          methods: {}
        });
      
    

Опции — данные

• data — Объект с данными экземпляра Vue. Vue рекурсивно переводит его поля в геттеры/сеттеры, и он становится «реактивным»
• props — Список или хэш атрибутов, по которым разрешено получение данных от родительского компонента
• computed — Вычисляемые свойства, которые будут подмешаны к экземпляру Vue
• methods — Методы, которые будут подмешаны к экземпляру Vue
• watch — Объект, ключи которого — выражения для наблюдения, а значения — коллбэки, вызываемые при их изменении

Опции — DOM

• el — Указывает, на какой существующий DOM-элемент смонтировать экземпляр Vue (string | HTMLElement)
• template — Строковый шаблон с разметкой для экземпляра Vue. Этот шаблон заменит элемент в точке монтирования
• render — Альтернатива строковым шаблонам, позволяющая задействовать все алгоритмические возможности JavaScript. Render-функция получает первым аргументом метод createElement, нужный для создания VNode-ов.

Опции — хуки жизненного цикла

• beforeCreate — Вызывается после инициализации экземпляра
• created — Вызывается после создания экземпляра
• beforeMount — Вызывается перед началом монтирования render.
• mounted — Вызывается сразу после того как экземпляр был смонтирован
• beforeUpdate — Вызывается при изменении данных перед тем, как DOM будет обновляться
• updated — Вызывается после того, как виртуальный DOM был обновлён из-за изменения данных
• beforeDestroy — Вызывается перед уничтожением экземпляра Vue
• destroyed — Вызывается после уничтожения экземпляра Vue

Директивы

Директивы — специальные атрибуты для добавления элементам html дополнительной функциональности.

v-bind (cокращение: ":")

Динамически связывает атрибуты тега или входной параметр компонента с выражением

      
        <img v-bind:src="imageSrc">
        <img :src="imageSrc">
        <img :src="'/path/to/images/' + fileName">
        <div :class="{ red: isRed }"></div>
        <div :class="[classA, classB]"></div>
        <div :style="{ fontSize: size + 'px' }"></div>
        <div v-bind="{ id: someProp, 'other-attr': prop2 }"></div>
        <my-component :prop="someThing"></my-component>
        <child-component v-bind="$props"></child-component>
      
    

v-for

Циклично проходит массив объектов

      
        <div v-for="item in items" :key="item.id">
          {{ item.text }}
        </div>

        <div v-for="(item, index) in items"></div>
        <div v-for="(val, key) in object"></div>
        <div v-for="(val, key, index) in object"></div>
      
    

v-on (cокращение: @)

Cвязывает слушателя события с элементом

      
        <button v-on:click="doThis"></button>
        <button v-on:click="doThat('hello', $event)"></button>
        <button @click="doThis"></button>
        <button @click.stop="doThis"></button>
        <button @click.prevent="doThis"></button>
        <input @keyup.enter="onEnter">
      
    

v-model

Двусторонним образом связывает элемент ввода данных или компонент с переменной, только для input, select, textarea, компонентов

      
        <input v-model="message" placeholder="Отредактируй меня">
        <p>Введённое сообщение: {{ message }}</p>
      
    

v-if, v-else, v-else-if

      
        <div v-if="type === 'A'">
          A
        </div>
        <div v-else-if="type === 'B'">
          B
        </div>
        <div v-else-if="type === 'C'">
          C
        </div>
        <div v-else>
          Не A/B/C
        </div>
      
    

Другие директивы

• v-html - Управляет HTML-содержимым элемента (innerHTML).
• v-text - обновляет textContent элемента
• v-show - переключает видимость элемента, изменяя свойство CSS display
• v-cloak - прячет «усатые» выражения, пока не подтянулись данные
• v-once - рендерит элемент только вначале и больше не следит за ним
• v-pre - не компилирует элемент и его дочерние элементы

Компоненты

Компоненты помогают расширить основные html элементы и внедрить переиспользуемый код. Компоненты — это переиспользуемые экземпляры Vue со своим именем

Поскольку компоненты это переиспользуемые экземпляры Vue, они принимают те же опции что и new Vue, такие как data, computed, watch, methods, и хуки жизненного цикла. Единственными исключениями являются несколько специфичных для корневого экземпляра опций, например el.

Организация компонентов

Обычно приложение организуется в виде дерева вложенных компонентов:

Ограничения

• Свойство data должно быть функцией
• Один корневой элемент
• Коипонент требует регистрации

Регистрация компонентов

Чтобы использовать компоненты в шаблонах, они должны быть зарегистрированы. Есть два типа регистрации компонентов: глобальная и локальная.

      
        Vue.component('my-component-name', {});

        new Vue({
          components: {
            "my-component-name": function() {}
          }
        });
      
    

Слоты

Как и с обычными HTML-элементами, часто бывает полезным передать компоненту содержимое, например:

      
        <Alert>
          Произошло что-то плохое.
        </Alert>
      
    

<slot />

      
        Vue.component('alert-box', {
          template: `
            <div class="demo-alert-box">
              <strong>Ошибка!</strong>
              <slot></slot>
            </div>
        `});
      
    

Именованные слоты

Бывают случаи, когда полезно иметь несколько слотов:

      
        <div class="page">
          <header class="page__header">
            <slot name="header" />
          </header>
          <main class="page__main">
            <slot />
          </main>
          <footer class="page__footer">
            <slot name="footer" />
          </footer>
        </div>
      
    

Именованные слоты

      
        <Page>
          <template slot="header">
            <h1>Здесь мог быть заголовок страницы</h1>
          </template>

          <p>Параграф для основного контента.</p>
          <p>И ещё один.</p>

          <p slot="footer">Некая контактная информация</p>
        </Page>
      
    

<transition />

Vue располагает компонентом-обёрткой transition, позволяющим анимировать появление и исчезновение элемента или компонента в следующих случаях:

• Условный рендеринг (используя v-if)
• Условное отображение (используя v-show)
• Динамические компоненты
• Корневые элементы компонентов

<transition />

      
        <transition name="fade">
          <p v-if="show">привет</p>
        </transition>

        <style>
          .fade-enter-active, .fade-leave-active {
            transition: opacity .5s;
          }
          .fade-enter, .fade-leave-to {
            opacity: 0;
          }
        </style>
      
    

<transition />

Динамическое переключение компонентов

Иногда бывает полезно динамически переключаться между компонентами, например в интерфейсе с вкладками

      
        <!--
          Компонент меняется при изменении
          currentTabComponent
        -->
        <component v-bind:is="currentTabComponent" />
      
    

Фильтры

Для распространённых задач форматирования текста во Vue используются фильтры

      
        <!-- mustache -->
        {{ message | capitalize }}

        <!-- v-bind -->
        <div v-bind:id="rawId | formatId"></div>
      
    

Фильтры - регистрация

      
        new Vue({
          filters: {
            capitalize(value) {}
          }
        });

        Vue.filter("capitalize", function (value) {});
      
    

Плагины

• vue-router - официальный простой и мощный роутер
• vuex - централизованное хранилище состояния приложения
• vuex-router-sync - дружит vuex и vue-router
• vue-i18n - интернациализация

Инструменты

• vue-cli - генератор приложения
• vue-loader - официальный лоадер для webpack
• vue-devtools - расширение для браузера упрощающее отладку
• vetur - плагин для Visual Studio Code

Ссылки

• Vue.js
• Vue Router
• Vuex
• VueBlog
• Awesome Vue.js

git.io/introVue