Руководство для новичков по Vue 3

В этой статье вы познакомитесь с основами Vue.js. Несмотря на то, что в статье используется Vue 3, основные принципы применимы и к более старым версиям Vue.

Мы расскажем, как:

• создать приложение Vue с Vue CLI
• отображать списки
• использовать условный рендеринг
• использовать динамический CSS
• обрабатывать вводимые пользователем данные и события
• использовать методы и вычисляемые свойства
• использовать привязку атрибутов HTML

Мы начнем с создания скелета приложения с помощью интерфейса командной строки.

Создание приложения с помощью Vue CLI

Интерфейс командной строки Vue позволяет нам создавать и настраивать новые проекты Vue с нуля. То есть вместо того, чтобы добавлять пакеты и конфигурации сами, это делает за нас CLI.

Давайте установим интерфейс командной строки Vue.

Установка Vue CLI

В руководстве предполагается, что на вашем компьютере не установлен Vue CLI. Чтобы установить его, выполните следующую команду:

npm i -g @vue/cli

В качестве альтернативы вы можете установить его с помощью Yarn следующим образом:

yarn global add @vue/cli

После того, как вы выполните любую из вышеперечисленных команд, начнется установка, которая займет несколько секунд или минут. После завершения установки вы можете создавать проекты с помощью следующей команды:

vue create your-project-name

vue create команда

После того, как мы запустим vue createкоманду, нам будет предложено несколько вопросов. Цель этих вопросов — настроить проект в соответствии с нашими потребностями.

Рисунок 1: Экран приветствия Vue CLI

На рисунке 1 выше показан экран приветствия, который мы получаем при запуске vue create your-project-name. Затем нам нужно выбрать один из трех разных вариантов:

1. создать проект Vue 2 по умолчанию
2. создать проект Vue 3 по умолчанию
3. вручную выбрать функции

Первые два варианта установят для нас проект Vue по умолчанию. Однако нам не нужен проект по умолчанию. В этом руководстве мы вручную выберем функции для нашего проекта. Как только мы выберем третий вариант, мы получим серию вопросов.

Рисунок 2: Настройка проекта Vue с помощью Vue CLI

На рисунке 2 выше показано, что мы видим, когда выбираем третий вариант — выбор функций вручную. Мы можем выбрать, какие функции нам нужны в нашем проекте, например:

• добавление модульного и E2E-тестирования в наш проект
• выбор линтера / форматтера для проекта
• добавление таких опций, как Vuex, TypeScript, Router и т. д.

После этого нам будет предложено выбрать версию Vue для нашего проекта. Для этого урока я рекомендую выбрать Vue 3, как показано ниже.

Рисунок 3: Выбор версии Vue в Vue CLI

Наконец, нам нужно будет ответить на дополнительные вопросы, основанные на функциях, которые мы выбираем на первом этапе, как показано ранее на рисунке 2.

Прежде чем двигаться дальше, я хочу убедиться, что мы находимся на одной странице:

1. Запуститеvue create vue3-fundamentalsв своем терминале.
2. Выберите «выбрать функции вручную».
3. Снимите галочку со всех функций, кроме Вавилонского. Для этого урока нам не нужны дополнительные функции.
4. Выберите Vue версии 3.
5. Выберите «В выделенных файлах конфигурации», когда вас спросят, где разместить конфигурацию для Babel, и так далее.
6. Не сохраняйте предустановку для будущих проектов.

После выполнения вышеуказанных шагов структура проекта должна выглядеть, как показано на рисунке 4 ниже.

Рисунок 4: Структура нашего проекта Vue 3

Вот и все с конфигурацией проекта! Теперь мы готовы работать над этим и изучать Vue!

Подготовка заявки

В приложении есть некоторые вещи, которые нам не нужны. Прежде всего, перейдите к src> componentsи удалите HelloWorld.vueкомпонент.

Теперь перейдите к App.vueфайлу и удалите все ссылки на HelloWorldиз файла. Также удалите изображение с логотипом Vue. Наконец, измените export default {}блок кода.

См. Полный код App.vueниже:

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  data() {
    return {
      title: 'My To Do App'
    }
  }
}
</script>

Настройте title свойство и отобразите его в шаблоне.

Отображение списка

Первая концепция, которую мы рассмотрим, — это как отображать списки в приложении Vue. Однако, прежде чем мы сможем это сделать, нам нужен список.

Откройте файл App.vueи добавьте следующий массив:

<script>
export default {
  data() {
    return {
      title: 'My To Do App',
      tasks: [
        { id: 1, name: 'Learn Vue JS', finished: false },
        { id: 2, name: 'Build a Vue application', finished: false },
        { id: 3, name: 'Write an article about Vue JS', finished: false }
      ]
    }
  }
}
</script>

В приведенном выше фрагменте кода мы добавили массив объектов. Каждый объект представляет собой отдельную задачу, и каждая задача содержит следующее:

• идентификатор : мы можем идентифицировать каждую задачу по ее уникальному идентификатору
• имя : описывает суть задачи
• Завершенное поле : показывает, выполнил ли человек задачу или нет

Следующий шаг — перебрать массив и отобразить его на странице. В Vue мы можем перебирать списки с помощью v-forдирективы. v-forДиректива имеет вид task in tasks, где каждый taskпредставляет отдельный элемент в массиве, и tasksпредставляет собой массив.

Мы можем увидеть v-forдирективу в действии во фрагменте кода ниже:

<ul>
    <li v-for="task in tasks" :key="task.id">
      {{task.id}}. {{ task.name }}
    </li>
</ul>

Мы можем визуализировать каждый из них itemили taskиспользуя нотацию Mustache. А также мы используем обозначение усов, используя эти двойные фигурные скобки.

На данный момент он отображает только ID и название задач. Но мы также можем показать, закончено это или нет, следующим образом:

{{ task.id }}. {{ task.name }} - {{ task.finished}}

Однако позже в этом руководстве мы будем использовать это поле для других целей. Если мы сохраним код и запустим приложение, мы должны увидеть следующее:

Рисунок 5: Отображение списка во Vue с помощью директивы v-for

Вы можете видеть, что задачи отображаются на странице, и у каждой есть идентификатор и имя.

Уникальный ключ

Вы могли заметить следующий фрагмент кода:

:key="task.id"

Рекомендуется использовать :keyатрибут, когда мы перебираем списки. Причина в том, что каждый элемент DOM имеет уникальный ключ. Таким образом, Vue может отслеживать идентичность каждого узла, чтобы повторно использовать и переупорядочивать существующие элементы. В результате это также улучшает производительность приложения.

Обычно мы используем идентификатор элемента в качестве :keyатрибута, как в приведенном выше примере.

Условный рендеринг

Бывают случаи, когда мы хотим отобразить что-то на странице в зависимости от определенного условия. Таким образом, мы можем использовать v-ifдирективу для рендеринга фрагмента кода на основе условия.

Блок кода отображается только в том случае, если предоставленное выражение возвращает истинное значение. Например, в приложении, которое мы создаем в этом руководстве, мы можем захотеть, чтобы кнопка » Удалить задачу» отображалась после завершения задачи. Таким образом, мы можем удалить задачу, когда с ней закончим.

Добавим кнопку Удалить задачу. Перейдите к App.vueфайлу и добавьте следующий код в неупорядоченный список:

<ul>
    <li v-for="task in tasks" :key="task.id">
        {{ task.id }}. {{ task.name }}

        <div v-if="task.finished">
            <button>Delete task</button>
        </div>
    </li>
</ul>

Вы можете увидеть новое divс помощью v-ifдирективы. Его цель — проверить, выполнена ли задача. Если задача выполнена, отображается кнопка удаления. Если задача не завершена, кнопка скрыта.

Идите и измените finishedполе для любой задачи с taskмассива на true. После этого обновите приложение, и мы должны увидеть кнопку удаления.

Если вы выполнили все шаги, вы должны увидеть следующее:

Рисунок 6: Условный рендеринг Vue

v-ifДиректива удобно, когда мы хотим, чтобы сделать что — то на основе условия.

Прежде чем двигаться дальше, важно отметить, что мы тоже можем использовать v-else-ifи v-else. Например, у нас могло бы быть что-то похожее на это:

<ul>
    <li v-for="task in tasks" :key="task.id">
        {{ task.id }}. {{ task.name }}

        <div v-if="task.finished">
            <button>Delete task</button>
        </div>
        <div v-else-if="task.edit">
            <button>Edit task</button>
        </div>
        <div v-else>
            <p>No button</>
        </div>
    </li>
</ul>

Вы можете увидеть, насколько эффективен условный рендеринг. Однако в этом руководстве мы используем только v-if.

Обработка пользовательского ввода

Следующим шагом является обработка пользовательского ввода. Прежде всего, перейдите к App.vueфайлу и добавьте следующий HTML-код под заголовком приложения:

<h2>Add a new task</h2>

<div>
   <input type="text"
     v-model="newTask"
     placeholder="Add a new task"
   >
</div>

<div v-if="newTask.length > 0">
   <h3>New task preview</h3>
   <p>{{ newTask }}</p>
</div>

В приведенном выше фрагменте кода мы добавляем текстовый ввод, который позволяет пользователям добавлять новые задачи. Также обратите внимание на v-modelдирективу. v-modelДиректива позволяет создать двустороннюю привязку между полем ввода и состояния приложения. (Вы можете узнать больше v-modelв » Понимании новой системы реактивности в Vue 3 «.)

Прежде чем мы сможем опробовать код, добавьте newTaskполе в экземпляр Vue следующим образом:

return {
      title: 'My To Do App',
      newTask: '',
      tasks: [
        { id: 1, name: 'Learn Vue JS', finished: false },
        { id: 2, name: 'Build a Vue application', finished: false },
        { id: 3, name: 'Write an article about Vue JS', finished: false }
      ]
    }

Если мы запустим приложение и введем что-нибудь в поле ввода, мы увидим текст, появляющийся под полем ввода.

Рисунок 7: Vue обрабатывает ввод данных пользователем

В приведенном выше коде мы добавили <p>{{ newTask }}</p>HTML-код, который представляет поле «newTask». Таким образом, он обновляется и отображается на странице всякий раз, когда мы добавляем что-либо в поле ввода. Он появляется под полем ввода.

Методы

Прежде чем изучать обработку пользовательских событий, нам нужно узнать о методах. Причина в том, что мы будем использовать методы для обработки этих пользовательских событий.

Все экземпляры Vue имеют свойство с именем methods, в которое мы добавляем все наши методы. Например, мы добавим кнопку, которая позволяет нам добавлять задачи. Таким образом, мы инкапсулируем логику для этой кнопки в методе и добавляем ее в methodsполе.

Откройте файл Vue.appи добавьте после него следующий код data():

methods: {
    addTask() {
      if (this.newTask.length < 1) return

      this.tasks.push({
        id: this.tasks.length + 1,
        name: this.newTask,
        finished: false
      });

      this.newTask = ''
    }
  }

Приведенный выше код добавляет задачу только в том случае, если пользователь что-то ввел в поле ввода, а затем очищает поле. Это сделано для предотвращения попадания пустых строк в наш список задач.

Теперь мы можем использовать этот addTask()метод, как и в любом другом приложении. Мы вызываем метод, и он запускается, и это как раз то, о чем идет речь в следующем шаге.

Имейте в виду : у приложения будет еще два метода:

• удалить задачу
• завершить задачу (что включает и выключает задачу)

Однако я исключил их из приведенного выше фрагмента кода для удобства чтения, но вы увидите их в сути. Вы можете увидеть эту суть с полным кодом App.vueдо этого момента.

Обработка пользовательских событий

Теперь, когда вы знаете, что такое методы, пришло время узнать об обработке пользовательских событий. Например, что происходит, когда пользователь нажимает кнопку » Добавить задачу» ?

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

Посмотрим на это в действии. Перейдите к App.vueфайлу и добавьте кнопку под полем ввода. У нас должен получиться следующий код:

Соблюдайте @click=»addTask»код. У v-onдирективы есть сокращенный символ, который является @символом. Таким образом, вместо того, чтобы писать v-on:click, мы можем написать это, как показано выше.

При нажатии на кнопку » Добавить задачу» запускается метод addTask(), добавляющий задачу. Следовательно, с помощью v-onдирективы мы можем прослушивать пользовательские события и вызывать определенный метод при их запуске.

Рисунок 8: Наша отключенная кнопка

На рисунке 8 вы можете увидеть только что созданную кнопку. Сначала он отключен, но как только мы начинаем печатать, он работает!

Вычисленные свойства

Еще одна удобная функция Vue — вычисляемые свойства. Они похожи на методы, за исключением того, что они не должны изменять данные. Однако вычисленные свойства отлично подходят для управления данными и их повторного использования в нашем приложении.

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

• Тот, который возвращает количество всех задач.
• Тот, который возвращает массив задач в обратном порядке. Почему? Нам нужно, чтобы последние задачи отображались вверху списка.

Таким образом, App.vueдобавьте в methodsсвойство следующий код :

computed: {
    allTasks() {
        return this.tasks.length
    },
    latest() {
        return [...this.tasks].reverse()
    }
  }

Вы могли заметить, что latest()вычисляемое свойство возвращает новый перевернутый массив. Как упоминалось ранее, вычисляемое свойство не должно изменять существующие данные.

Кроме того, когда мы используем вычисляемые свойства, важно использовать returnключевое слово. Если мы не вернем вещи, ничего не получится! Теперь мы можем использовать только что созданные свойства.

В нашем шаблоне найдите раздел «Добавить новую задачу» и добавьте под ним следующую строку:

<span>You have {{ allTasks }} {{ allTasks > 1 ? 'tasks' : 'task' }} at the moment</span>

Вышеупомянутая строка отображает все задачи из нашего списка. Кроме того, он определяет, когда использовать «задачи» или «задачу» в зависимости от количества задач.

Наконец, перейдите к фрагменту кода, в котором мы перебираем массив задач и переходим task in tasksк task in latest. Вот так теперь должен выглядеть наш код:

<ul>
      <li v-for="(task, index) in latest" :key="task.id">
        {{ index + 1 }}. {{ task.name }}

        <div v-if="task.finished">
          <button>Delete task</button>
        </div>
      </li>
</ul>

Теперь мы перебираем в цикле latest, и теперь у нас также есть поле «index». Новое поле используется для отображения позиции задач в списке.

Рисунок 9: Вычисляемые свойства в действии] (computed-properties.png

На рисунке 9 показаны вычисленные свойства в действии. Вы можете видеть, что он показывает общее количество задач, а также отображает задачи в том порядке, в котором они были добавлены.

Вычисляемые свойства против методов

Прежде чем двигаться дальше, хочу еще раз подчеркнуть, что они похожи, но разные. Мы должны использовать методы для изменения данных и использовать вычисленные свойства для уровня представления.

Изменение данных в вычисленных свойствах может привести к ошибкам, которые трудно обнаружить.

Привязка атрибутов

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

Воспользуемся привязкой атрибута, добавив логотип. Перейдите в Vue.appи добавьте два новых поля, logoURLи logoCaption. Наш код должен выглядеть следующим образом:

data() {
    return {
      title: 'My To Do App',
      newTask: '',
      logoURL: 'https://images.unsplash.com/photo-1507925921958-8a62f3d1a50d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1955&q=80',
      logoCaption: 'A photo by Kelly Sikkema on Unsplash showing post-it notes',
      tasks: [
        { id: 1, name: 'Learn Vue JS', finished: false },
        { id: 2, name: 'Build a Vue application', finished: false },
        { id: 3, name: 'Write an article about Vue JS', finished: false }
      ]
    }
  },

Затем в том же файле добавьте следующий HTML- img элемент над заголовком приложения:

 

<img :src="logoURL" :alt="logoCaption" width="200" height="200" />

Обратите внимание на двоеточие в :srcи :altатрибутах. Это сокращение от v-bind. Таким образом, вместо того, чтобы писать v-bind:src, мы пишем это :src.

Допустим, мы используем логотип в нескольких местах, не имея для него отдельного компонента. Это означает копирование-вставку одного и того же imgтега в нескольких местах. Если мы хотим изменить логотип, нам придется внести изменения во многих местах. Однако, используя привязку атрибутов, нам нужно сделать только одно изменение — в экземпляре Vue.

Изображение ниже иллюстрирует один пример — с imgэлементом. Однако мы можем использовать привязку атрибутов и с другими элементами HTML. Например, мы могли бы использовать его и с hrefэлементом.

Рисунок 10: Привязка атрибута HTML во Vue

Рисунок 10 иллюстрирует изображение в действии!

Динамический CSS

Во Vue мы можем использовать динамический CSS. Это означает, что использование класса определяется свойством данных. Примером из приложения to-do может быть добавление класса по strikeoutзавершении задачи.

Перейдите в App.vueфайл и добавьте :classатрибут после @clickатрибута. См. Код ниже:

<ul>
    <li 
      v-for="(task, index) in latest" 
      :key="task.id"
      @click="finishTask(task)"
      :class="{ strikeout: task.finished }"
    >
      {{ index + 1 }}. {{ task.name }}

      <div v-if="task.finished">
          <button>Delete task</button>
      </div>
    </li>
</ul>

Итак, что происходит сейчас? В приведенном выше коде мы также добавили пользовательское событие — @click=»finishTask(task)». Это означает, что мы можем щелкнуть задачу, чтобы завершить ее. Метод finishTask(task)переключает finishedполе на true / false. Если для finishedполя установлено значение true, strikeoutкласс добавляется.

Динамический CSS во Vue

На рисунке 11 показано, что происходит, когда мы щелкаем задачу. Таким образом, динамический CSS отлично подходит для подобных сценариев.

Важно отметить, что если мы хотим добавить несколько динамических классов, мы можем использовать нотацию массива. Мы можем сделать это следующим образом:

<li 
    v-for="(task, index) in latest" 
    :key="task.id"
    @click="finishTask(task)"
    :class="[ 
        task.finished ? 'strikeout' : '',
        task.postponed ? 'text-gray' : '',
        'simple-class'
   ]"
>
    {{ index + 1 }}. {{ task.name }}

    <div v-if="task.finished">
        <button>Delete task</button>
    </div>
</li>

Таким образом, мы можем добавить несколько динамических классов на основе нескольких условий. Более того, мы можем добавлять в массив статические классы. См. simple-classВыше.

Проверьте эту суть, чтобы увидеть, как App.vueфайл должен выглядеть до этого момента.

Последние штрихи

Чтобы завершить приложение, осталось две вещи:

• позволяя пользователю добавить задачу, нажав enterклавишу на клавиатуре
• заставить работать кнопку удаления

Откройте файл App.vueи найдите поле ввода. После того, как вы его найдете, добавьте следующий код:

<input type="text"
    v-model="newTask"
    @keyup.enter="addTask"
    placeholder="Add a new task"
>

Вы заметите @keyup.enter, что метод вызывает метод, addTaskкогда пользователь нажимает enterклавишу.

Во-вторых, найдите в нашем приложении кнопку удаления и добавьте следующий код:

Теперь он прослушивает событие щелчка, и всякий раз, когда нажимается кнопка » Удалить задачу», он запускает метод removeTask. Он также передает идентификатор задачи, поэтому знает, какую задачу нужно удалить.

Теперь мы можем вводить задачи, нажимая enterклавишу, а также можем удалять задачи.

Заключение

Молодцы, что создали свое первое приложение! Отсюда вы готовы погрузиться в компоненты Vue, Vue Router и другие концепции!

Вы можете найти все приложение в этом разделе » final-app.vue «. Если вы хотите попробовать, просто скопируйте весь код в свой App.vueфайл.