Изучите основы Vue на практическом примере с использованием Vue3.

Статья призвана научить вас основам Vue с использованием Vue 3. Но не волнуйтесь! Если вы изучите эти фундаментальные строительные блоки Vue, вы сможете создавать приложения, используя любую версию Vue.

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

Создайте приложение Vue

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

mkdir vue3-intro

cd vue3-intro

touch index.html
touch app.js

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

  • папка с именем vue3-intro
  • index.html внутри 'vu3-intro'
  • app.js внутри 'vu3-intro'

Создайте файл HTML

После создания папки и файлов приложения откройте файл index.html и добавьте следующий HTML-код:

<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">
    <script src="https://unpkg.com/vue@next"></script>
    <title>Vue 3 Intro</title>
</head>
<body>
    <div id="app"></div>
    
    <script src="./app.js"></script>
</body>
</html>

В приведенном выше коде есть три важных строки:

  • <script src="https://unpkg.com/vue@next"></script> - с помощью этой строки вы импортируете библиотеку Vue из CDN. Использование ссылки CDN - это самый простой способ импортировать Vue в ваше приложение и поработать с ним.
  • <div id="app"></div> - это div представляет приложение. Вы монтируете приложение в DOM, используя этот div с классом app.
  • <script src="./app.js"></script> - с помощью этой строки вы импортируете app.js файл, в котором хранится ваш код Vue. Это файл, в котором вы пишете код Vue, который будет управлять вашим приложением.

Создайте файл JavaScript

Следующий шаг - перейти к app.js и создать приложение Vue. Напишите в свой файл следующий код:

const app = Vue.createApp({
    data() {
        return { 
            course: 'Intro to Vue with Vue 3'
        }
    }
})

app.mount('#app');

В приведенном выше коде Vue.createApp создает новый экземпляр Vue. При создании экземпляра Vue вы также передаете объект «Параметры», который позволяет вам настроить приложение. Например, вы добавили поле course в свое приложение Vue, к которому вы можете получить доступ в файле HTML.

Однако вновь созданное приложение необходимо смонтировать в элемент DOM. Если вы не смонтируете приложение в DOM, вы не сможете использовать Vue. Попробуйте удалить строку app.mount('#app'), а затем попробуйте получить доступ к course. Вас ждет сюрприз!

### Обновите файл index.html Теперь, когда вы создали приложение Vue, вы можете получить доступ к свойству course. Давайте изменим файл index.html, чтобы он отображал «Введение в Vue с Vue 3». Напишите следующий код в div #app:

<div id="app">
        <h1>{{ course }}</h1>
</div>

Вы можете получить доступ к приличиям из своего приложения Vue, используя двойные фигурные скобки. Двойные фигурные скобки будут заменены значением свойства course.

Протестируйте приложение

Если вы откроете файл index.js, вы должны увидеть следующую страницу:

Вы только что создали свое первое приложение Vue, поздравляем вас!

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

Vue позволяет вам перебирать массив с помощью директивы v-for. Директива v-for имеет форму tag in tags. Всегда легче понять на примере. Посмотрите на следующий код:

const app = Vue.createApp({
    data() {
        return { 
            course: 'Intro to Vue with Vue 3',
            description: 'This is an introductory course to Vue fundamentals!',
            price: '$19.99',
            tags: ['Vue', 'Front-end', 'JavaScript']
        }
    }
})
<ul>
    <li v-for="tag in tags">
        {{ tag }}
    </li>
</ul>

Приведенный выше код перебирает массив «тегов» и отображает каждый тег на странице. tags представляет собой массив из приложения Vue, а tag - это отдельный элемент массива.

Вот что вы видите при запуске приложения:

Уникальный ключевой атрибут

Всякий раз, когда вы перебираете массивы во Vue, вы должны давать каждому элементу DOM уникальный ключ. Обычно key каждого элемента - это идентификатор элемента.

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

Возвращаясь к предыдущему примеру, вы можете изменить код, включив также поле index. Поле 'index' представляет позицию элемента в массиве.

<ul>
    <li v-for="(tag, index) in tags" :key="index">
        {{ tag }}
    </li>
</ul>

Однако, если у вас есть массив объектов, например:

tags: 
[
    { id: 1, name: 'Vue' },
    { id: 2, name: 'Front-end' },
    { id: 3, name: 'JavaScript' },
 ]

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

<ul>
    <li v-for="tag in tags" :key="tag.id">
        {{ tag }}
    </li>
</ul>

: key - ›_ 37_ - это сокращение от v-bind:key, и оно используется для привязки идентификатора элемента к атрибуту« ключ ». То есть каждый элемент имеет уникальный «ключ», который вы указываете в поле :key. В этом примере каждый тег имеет идентификатор в качестве ключа.

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

Иногда вы хотите отображать элементы на странице в зависимости от условия. То есть используйте операторы if, чтобы решить, отображать элемент или нет. Или отрендерить его в зависимости от условия.

Один из примеров: показать все курсы программирования, если рейтинг выше 4 звезд. Для этого вы можете использовать директиву v-if, которая отображает блок только тогда, когда выражение возвращает истинное значение. Но хватит разговоров, давайте посмотрим на пример!

const app = Vue.createApp({
    data() {
        return {
            course: 'Intro to Vue with Vue 3',
            description: 'This is an introductory course to Vue fundamentals!',
            price: '$19.99',
            available: true,
            tags: [
                { id: 1, name: 'Vue' },
                { id: 2, name: 'Front-end' },
                { id: 3, name: 'JavaScript' },
            ]
        }
    }
})

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

<p v-if="available">You can buy the course!</p>
<p v-else>The course is not available to buy!</p>

В приведенном выше коде отображается Вы можете купить курс!, если available = true. В противном случае отображается Курс недоступен для покупки!.

v-if берет поле, которое вы хотите оценить. Если значение поля истинно, отображается первый вариант. В противном случае он показывает вторые варианты. В качестве упражнения измените поле available на false и посмотрите, что произойдет!

Когда вы запускаете приложение, вы видите следующее (при условии, что для параметра «доступно» установлено значение «истина»):

Обработка событий

В Vue вы можете использовать директиву v-on для прослушивания событий DOM и запуска фрагмента кода при их запуске. Директива v-on также имеет сокращенное значение, которое представляет собой символ '@'.

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

<button @click="doSomething()">Do something</button>

Когда кто-то нажимает кнопку, Vue запускает указанный вами метод - в данном случае doSomething. Конечно, вы можете напрямую заменить метод кодом. Например, вы можете увеличить переменную - @click="sum = sum + 100".

Возвращаясь к примеру курса:

const app = Vue.createApp({
    data() {
        return {
            course: 'Intro to Vue with Vue 3',
            description: 'This is an introductory course to Vue fundamentals!',
            price: '$19.99',
            available: true,
            tags: [
                { id: 1, name: 'Vue' },
                { id: 2, name: 'Front-end' },
                { id: 3, name: 'JavaScript' },
            ]
        }
    },
    methods: {
        purchase() {
            console.log('Course purchased!');
        }
    }
})

app.mount('#app');

Как видите, теперь у вас есть поле methods в экземпляре Vue. Это поле позволяет вам создавать методы и использовать их в вашем приложении.

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

Чтобы «совершить покупку», вам необходимо добавить в HTML-код следующую строку:

<button @click="purchase">Buy now</button>

Кнопка прослушивает событие щелчка, и когда кнопка нажата, она вызывает функцию purchase. На изображении ниже показано, что происходит, когда вы нажимаете кнопку:

Дополнительное примечание: вы можете прослушать событие DOM и напрямую запустить фрагмент кода. То есть вам не нужно писать и использовать метод. Рассмотрим следующую кнопку:

<button @click="available = !available">Buy now</button>

Эта кнопка переключает поле available. Вы изменяете значение с true на false и наоборот каждый раз, когда нажимаете кнопку.

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

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

const app = Vue.createApp({
    data() {
        return {
            .........
            imgURL: 'https://catalins.tech/img',
            imgDescription: 'An image with a desktop computer',
            .........
        }
    },
    .........
})

Я заменил остальную часть кода на «………» для удобства чтения. Код такой же, как и раньше, но с дополнениями:

  • imgURL
  • imgDescription

Теперь, идя дальше, есть еще одно дополнение к HTML:

<img :src="imgURL" :alt="imgDescription" width="500" height="350">

Как видите, мы используем URL-адрес изображения и описание, указанные в экземпляре Vue. Вы можете создать эту реактивную связь между атрибутом и аргументами благодаря директиве v-bind. Директива v-bind позволяет разработчикам динамически связывать атрибут с выражением. С точки зрения непрофессионала, это позволяет нам использовать динамические значения, а не жестко запрограммированные значения.

Теперь вы можете быть сбиты с толку, потому что в коде нет v-bind. Это потому, что есть сокращение для v-bind, которое представляет собой просто символ двоеточия - :.

<img :src="imgURL" :alt="imgDescription" width="500" height="350">

можно переписать с использованием v-bind следующим образом:

<img v-bind:src="imgURL" v-bind:alt="imgDescription" width="500" height="350">

Благодаря этой системе реактивности Vue, вы можете обновить URL-адрес изображения и описание в своем экземпляре Vue, и HTML тоже будет обновляться автоматически! Вы можете добавить атрибут «href» в том же духе и получить URL-адрес из экземпляра Vue. В качестве упражнения попробуйте!

Если вы запустите приложение, вы увидите отображаемое изображение! Ссылка на изображение такая же. Единственная разница в том, что я использовал свой домен, чтобы замаскировать этот длинный URL. Если вы перейдете на catalins.tech/img, вы увидите, что это то же изображение!

Расчетные свойства

Еще одна полезная функция Vue - вычисляемые свойства. С помощью вычисляемых свойств вы можете манипулировать данными и повторно использовать результат в своем приложении Vue.

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

const app = Vue.createApp({
    data() {
        return {
            course: 'Intro to Vue with Vue 3',
            description: 'This is an introductory course to Vue fundamentals!',
            price: '$19.99',
            available: true,
            imgURL: 'https://catalins.tech/img',
            imgDescription: 'An image with a desktop computer',
            tags: [
                { id: 1, name: 'Vue' },
                { id: 2, name: 'Front-end' },
                { id: 3, name: 'JavaScript' },
            ]
        }
    },
    computed: {
        hasImageDescription() {
            return this.imgDescription.length > 0 ? this.imgDescription : 'This is an automated image description!'
        }
    }
})

В этом примере я удалил свойство methods ранее, на всякий случай, если вам интересно, куда оно пропало! Двигаясь дальше, вы можете увидеть новый метод hasImageDescription.

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

<img v-bind:src="imgURL" v-bind:alt="hasImageDescription" width="500" height="350">

Вместо использования свойства imgDescription вы используете вычисляемое свойство hasImageDescription. Как видите, эти свойства мощные и полезные!

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

Методы

Несмотря на то, что вы можете писать и запускать выражения JavaScript в своих шаблонах, это не означает, что вы должны это делать. Для выражений типа counter += 1 это нормально, но что, если вы хотите написать больше кода? Это может быстро выйти из-под контроля и создать хаос в ваших шаблонах!

В результате вы можете выделить логику кода в отдельную функцию и повторно использовать ее везде, где вам нужен код. У вашего экземпляра Vue есть свойство methods, в которое вы можете добавить все свои методы. Перейдя к предыдущему разделу Обработка событий, вы увидите, что вы уже создали и использовали метод - purchase(). Аналогичным образом вы можете создавать другие функции и использовать их в своем приложении.

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

Методы против вычисленных свойств

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

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

Компоненты и реквизит

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

  • Заголовок
  • Навигация
  • ContentCard
  • Нижний колонтитул

И многое другое. Кроме того, в компонент могут быть вложены другие компоненты. Мы можем думать о них как о «родителях» и «детях». Другими словами, компоненты - это столпы приложения.

Чтобы создать компонент Vue, перейдите в корневую папку проекта и выполните следующие команды:

mkdir components
touch components/CourseCard.vue

Эти две команды создают папку components и компонент CourseCard. В качестве альтернативы вы можете сделать то же самое за пределами терминала.

Создайте компонент

Следующим шагом является создание компонента, что можно сделать, вызвав метод component в экземпляре app Vue:

app.component('coursedisplay', {
// add the component configuration
})

Первый аргумент - это имя компонента, в данном случае coursedisplay. Второй аргумент - это объект с подробностями конфигурации.

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

app.component('coursedisplay', {
    data() {
        return {
            course: 'Intro to Vue with Vue 3',
            description: 'This is an introductory course to Vue fundamentals!',
            price: '$19.99',
            available: true,
            imgURL: 'https://catalins.tech/img',
            imgDescription: 'An image with a desktop computer',
            tags: [
                { id: 1, name: 'Vue' },
                { id: 2, name: 'Front-end' },
                { id: 3, name: 'JavaScript' },
            ]
        }
    },
    computed: {
        hasImageDescription() {
            return this.imgDescription.length > 0 ? this.imgDescription : 'This is an automated image description!'
        }
    },
    template: 
    /*html*/
    `
        <img v-bind:src="imgURL" v-bind:alt="hasImageDescription" width="500" height="350">
        <h1>{{ course }}</h1>
        <p>{{ description }}</p>
        <p>{{ price }}</p>
        <button @click="available = !available">Buy now</button>
        <ul>
            <li v-for="tag in tags" :key="tag.id">
                {{ tag.name }}
            </li>
        </ul>
        <p v-if="available">You can buy the course!</p>
        <p v-else>The course is not available to buy!</p>
    `
})

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

const app = Vue.createApp({
    data() {
        return {
            allCourses: 0
        }
    }
})

Также перейдите к index.html и измените body следующим образом:

<div id="app">
        <coursedisplay></coursedisplay>
    </div>
    
    <script src="./app.js"></script>
    <script src="./components/CourseCard.js"></script>

    <script>
        const mountedApp = app.mount('#app');
    </script>

Что здесь происходит?

  • Прежде всего, вы импортировали компонент в этой строке:

<script src="./components/CourseCard.js"></script>

  • Во-вторых, вы использовали его в этой строке:

<coursedisplay></coursedisplay>

  • В-третьих, теперь вы монтируете приложение в HTML-файл, а не в main.js:

const mountedApp = app.mount('#app');

Если изменений было слишком много и это больше не имеет смысла, проверьте репозиторий vue3-intro. Вы можете увидеть, как лучше организован код.

Двигаемся вперед, молодцы! Вы создали и использовали свой первый компонент Vue. Резюмируем:

  • Вы создали компонент Vue - «components / CourseCard»
  • Импортировал в HTML файл
  • Использовал это

Реквизит

Свойства - это более короткое название свойств, которое позволяет компонентам обмениваться данными между ними. Каждый компонент имеет определенное применение, но иногда ему требуется доступ к данным за пределами его области.

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

props: {
    paid: {
        type: Boolean
    }
},

Каждый раз, когда вы создаете компонент, вы можете указать, какие свойства он принимает. Кроме того, вы можете указать тип опоры и необходимость в ней. В этом примере опора не требуется, но вы можете сделать ее необходимой, добавив одну строку после типа - required: true.

Обычно такие фреймворки, как Vue, имеют встроенную проверку. То есть он проверяет, что переданный реквизит имеет правильный тип.

Вы можете увидеть полный код Компонента на GitHub - CourseCard.

Прежде чем идти дальше, вам нужно зайти в файл app.js и вернуть свойство paid. См. Код ниже:

const app = Vue.createApp({
    data() {
        return {
            allCourses: 1,
            paid: true
        }
    }
})

По умолчанию все курсы платные. Однако вы можете сделать их все «бесплатными» по умолчанию и сделать «платными» только премиум-курсы.

Двигаясь дальше, добавьте следующий метод в свойство computed компонента CourseCard:

premium() {
    return this.paid
 }

Вы можете увидеть полный код Компонента на GitHub - CourseCard. Этот метод - premium - позволяет вам проверить, оплачен ли курс или нет, и соответствующим образом отобразить данные в шаблоне.

<coursedisplay :paid="paid"></coursedisplay>

Теперь вам нужно перейти в файл index.html и добавить указанную выше строку кода. Это похоже на то, что было раньше, за одним исключением. В этой строке вы передаете опору paid, чтобы вы могли использовать ее в своем компоненте.

Смотрите полный код из index.html на GitHub.

Последний шаг - использовать опору и визуализировать данные на ее основе. Приведенный ниже фрагмент кода взят из шаблона компонента "Курс".

<div v-if="premium">
      <p v-if="available">You can buy the course!</p>
      <p v-else>The course is not available to buy!</p>
     <p>{{ price }}</p>
    <button @click="available = !available">Buy now</button>
</div>

Если для свойства paid задано значение true (если курс платный), он отображает дополнительную информацию, которая позволяет пользователям покупать курс. С другой стороны, если курс бесплатный, информация «скрыта».

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

Вывод

К настоящему времени вы должны уметь создавать простые приложения Vue JS. Весь код из учебника доступен в репозитории vue3-intro.

Вы можете использовать Vue, не устанавливая его на свой компьютер - Vue JS CDN Link - Как использовать Vue без его установки.

Статья изначально опубликована на Asayer.