Изучите основы Vue на практическом примере с использованием Vue3.
Статья призвана научить вас основам Vue с использованием Vue 3. Но не волнуйтесь! Если вы изучите эти фундаментальные строительные блоки Vue, вы сможете создавать приложения, используя любую версию Vue.
Прежде чем двигаться дальше, я хочу обрисовать в общих чертах, что вы узнаете, следуя руководству. Вы научитесь:
- Создать простое приложение Vue
- Отображать списки
- Отображать элементы DOM условно
- Обрабатывать события
- Использовать привязку атрибутов
- Использовать вычисленные свойства
- Использовать методы
- Решить, использовать ли методы или вычисляемые свойства
- Использовать компоненты и реквизит
Создайте приложение 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.