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

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

Создайте простое приложение Vue
Списки рендеринга
Render DOM elements conditionally
Обработка событий
Использовать привязку атрибутов
Использовать вычисленные свойства
Методы использования
Решите, использовать ли методы или вычисляемые свойства
Используйте компоненты и реквизит
- *

Создайте приложение 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-код:

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

<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 ». Напишите в #appdiv следующий код :

Вы можете получить доступ к приличиям из своего приложения 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']
        }
    }
})

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

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

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

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

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

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

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


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

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

: key -> :key– это сокращение от v-bind:key, и оно используется для привязки идентификатора элемента к атрибуту «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' },
            ]
        }
    }
})

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

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

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

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

Наблюдаемость для производственных приложений Vue

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

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

Удачной отладки для современных командных разработчиков – начните бесплатно отслеживать свое веб-приложение.

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

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

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

Когда кто-то нажимает кнопку, 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-код следующую строку:

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

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

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

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

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


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

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

imgURL
imgDescription

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

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

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

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

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

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

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

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

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

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

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

Вместо использования свойства 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файла и добавьте его в объект конфигурации. Ваш новый компонент должен выглядеть следующим образом:

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


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

Кроме того, перейдите index.htmlи измените bodyследующее:

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

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

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

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

<coursedisplay></coursedisplay>

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

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

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

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

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

Реквизит

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

Давайте изменим существующее приложение, чтобы оно принимало свойство с именем 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– позволяет вам проверить, оплачен ли курс или нет, и соответствующим образом отобразить данные в шаблоне.

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

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

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

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

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

Заключение

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

Если вы хотите попробовать Vue без его установки, проверьте, как использовать Vue без его установки.

Источник записи: blog.asayer.io