19-05-2021 17:39
1796
0

Создание приложения, настройка и прототип

Это первое видео курса, в котором мы напишем приложение на Vue.js 3 с полного нуля.

В этом видео: настроим форму и добавление твитов, займемся рендером списков и генерацией аватарок.

Это и следующее видео будут на Options API, а последующие видео будут на Composition API. Потому что намного проще разобраться с вью 3 постепенно и начать лучше всего с Options и затем перейти в Composition.

💭 Предисловие:

В этом мини-курсе я расскажу про нововведения во вью-3 и на практике покажу, как писать на Composition API. Если вы хотите познакомиться с вью-3 глубже, то вот ссылка на полный курс по вью-3 там более сотни видеоуроков, домашки с подробным ревью и еще много всего интересного, а еще курс по вью-2 в подарок.

Но этот курс не для новичков, поэтому посмотрите хотя бы «демо» из полного курса по вью-3 тк там есть весь базис вьюшки – от инициализации вью до жизненных циклов (и плагины, которые помогут в работе). Ибо, не зная даже базиса будет очень тяжело. Демо-доступ ни к чему не обязывает и полностью бесплатный получить его можно на промо-странице полного курса, а потом уже возвращайтесь в этот курс, так будет куда легче 👌

Подготовка

Для старта понадобиться лишь пустой хтмл:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

Чтобы подключить vue.js 3+ версии нужно написать:

<script src="https://unpkg.com/vue@next"></script>

Важно:

Обязательно нужно указать @next потому что иначе подключится вью 2. (Если это изменится, то я обновлю текущую статью)
Желательно бы закинуть текущий скрипт в head чтобы приложение “не скакало”, а загружалась плавно (это нюанс использования обычного хтмл файла, конечно же, с vue cli или webpack’ом у нас уже не будет таких заморочек)

Создание приложение - createApp()

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

const app = {
  data() {
     return {}
  }
};

Vue.createApp(app).mount("#app");

Маунт mount("#app”) - принимает в себя айди или класс в который будет вмонтировано текущее приложение

Обработка форм на vue 3

Обработка форм на вью 3, такая же, как и на вью 2 (если мы говорим про хтмл).

Исходный код формы для хтмл:

<form @submit.prevent="onSubmit">
  <textarea
    v-model="item"
    required
    placeholder="Type tweet here"
  ></textarea>
  <br />
  <button type="submit">Submit</button>
</form>

Метод пуша для формы тоже будет работать на вью 2 потому что написан на options API (в будущем мы перепишем его, как и все приложение на composition API). Исходный код метода выглядит так:

onSubmit() {
  this.items.push({
    id: Math.round(Math.random() * 30),
    avatar: `https://avatars.dicebear.com/api/male/${Date.now()}.svg`,
    body: this.item,
    date: new Date(Date.now()).toLocaleString(),
  });

  // reset
  this.item = "";
},

А вот ссылка на аватарки https://avatars.dicebear.com/

Рендер списков vue 3

Рендер списков, также, как и форма, одинаковы во вью 2 и 3 версиях.

<ul>
  <li v-for="tweet in items" :key="tweet.id">
    <img style="width: 30px; height: 30px" :src="tweet.avatar" />
    <span>{{tweet.date}}</span>
    <div>{{tweet.body}}</div>
  </li>
</ul>

Зачем нужен key в v-for? При изменении порядка массива по умолчанию Vue будет изменять данные в каждом существующем элементе, а не перемещать элементы DOM в обновленную позицию. Мы можем настроить Vue для отслеживания каждого элемента с помощью ключа. Это заставит его перемещать элементы, а не заменять значения.

И вот сам массив, по которому мы проходимся:

items: [
  {
    id: 1,
    body: "hello vue 3",
    avatar: `https://avatars.dicebear.com/api/male/1.svg`,
    date: new Date(Date.now()).toLocaleString(),
  },
  {
    id: 2,
    body: "hello world",
    avatar: `https://avatars.dicebear.com/api/male/2.svg`,
    date: new Date(Date.now()).toLocaleString(),
  },
],

Исходники:

Весь исходный код доступен на гитахбе
А скачать код из видео можно по этой ссылке

Подписывайтесь на группу вк - клик тут там я буду публиковать новости и то, что мне интересно в сфере разработки :)

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