Статьи по Vue.js
VueJs / Статьи

Как создать компонент с помощью Vue.js (для чайников) с примером

adminАвтор: admin

Vue.js прочно обосновался в сообществе фронтенд разработчиков. Команда Vue.js определяет свой инструмент как прогрессивный фреймворк для разработки пользовательских интерфейсов.

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

Что такое веб-компонент?

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

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

Нечто подобное происходит и с веб-компонентом. Внутри него хранится код, который будет иметь определенное поведение на нашем сайте.

Представьте себе веб-компонент в виде детали Lego

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

Точно так же, собрав вместе несколько компонентов, мы можем сформировать простое или весьма сложное веб-приложение.

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

Виды веб-компонентов в Vue.js

В Vue есть два типа компонентов:

  • Локальные компоненты: это файлы с расширением .vue, которые браузер сам по себе понять не может, поэтому необходимо использовать такие инструменты, как Web Pack. Они весьма полезны для масштабируемого веб-приложения благодаря простоте обслуживания.
  • Глобальные компоненты: им не нужны файлы с расширением .vue, к ним можно получить доступ из любой части кода. Но их не рекомендуется использовать в больших веб-приложениях. Они самые простые в освоении, и именно их мы рассмотрим в этом учебнике.

Давайте перейдем к коду

Подготовим необходимые файлы

  • Создадим файл index.html и файл app.js.
  • В index.html мы импортируем Vue.js CDN (я рекомендую использовать версию для разработки), а также связываем наш app.js.

В результате мы получим что-то вроде этого:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Документ</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>
Code language: HTML, XML (xml)

В app.js мы создаем наш экземпляр Vue, устанавливая связь с блоком по id, в моем случае id=main.

//app.js
const vm = new Vue({
    el: '#main'
});
Code language: JavaScript (javascript)

В index.html мы добавляем div с этим id.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Документ</title>
</head>
<body>
<div id="main">
 //Содержимое Vue
</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>
Code language: HTML, XML (xml)

Базовый синтаксис компонента

Vue.component('название компонента',{
    props:['свойства компонента'], // обычно используется массив
    template: 'HTML-код компонента'
});
Code language: JavaScript (javascript)

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

Теперь, когда наши файлы готовы, мы приступаем к созданию нашего компонента:

В файле app.js напишем следующее:

Vue.component('picture-card',{
    props:['title', 'picture_url'],
    template: '#template-picture'
});
const vm = new Vue({
    el: '#main'
});

Code language: JavaScript (javascript)

Где:

  • Vue.component({}) объявляет новый компонент.
  • picture-card – название компонента.
  • Массив props содержит все свойства, которыми мы хотим наделить наш компонент, в нашем случае это title и picture_url.
  • будем использовать HTML-структуру компонента (для чистоты кода она будет объявлена в файле index.html)

Props может быть объявлен как объект, а в каждом компоненте может быть n свойств.

Что такое props?

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

– это HTML-тег, src и alt – атрибуты.

В нашем случае у нас есть компонент со своими props ‘title’ и ‘picture_url’.

Атрибут тега в HTML можно назвать props в Vue.js.

Объявляем наш шаблон в файле index.html и используем наш компонент .

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Документ</title>
</head>
<body>
    <template id="template-picture">
        <div>
            <h1>{{title}}</h1>
            <img :src="picture_url" :alt="title" width="150">
        </div>
    </template>
    <div id="main">
        <picture-card title="Картинка 1" picture_url="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></picture-card>
        <picture-card title="Картинка 2" picture_url="https://images.pexels.com/photos/158028/bellingrath-gardens-alabama-landscape-scenic-158028.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></picture-card>
        <picture-card title="Картинка 3" picture_url="https://images.pexels.com/photos/298246/pexels-photo-298246.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></picture-card>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>
Code language: HTML, XML (xml)

В результате получим:

Улучшение кода

В нашем примере мы успешно создали компонент с соответствующими свойствами.

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

Для решения этой проблемы мы можем использовать директиву v-for следующим образом:

В app.js мы создаем массив объектов под названием pictures.

Vue.component('picture-card',{
    props:['title', 'picture_url'],
    template: '#template-picture'
});
const vm = new Vue({
    el: '#main',
    data:{
        pictures:[
            {id:1, title:'Картинка 1', picture_url:'https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'},
            {id:2, title:'Картинка 2', picture_url:'https://images.pexels.com/photos/158028/bellingrath-gardens-alabama-landscape-scenic-158028.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'},
            {id:3, title:'Картинка 3', picture_url:'https://images.pexels.com/photos/298246/pexels-photo-298246.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'}
        ]
    }
});
Code language: JavaScript (javascript)

С помощью v-for мы обходим объект picture, а с помощью v-bind получаем доступ к свойствам объекта, динамически связывая их.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Документ</title>
</head>
<body>
    <template id="template-picture">
        <div>
            <h1>{{title}}</h1>
            <img :src="picture_url" :alt="title" width="150">
        </div>
    </template>
    <div id="main">
        <picture-card v-for="(picture, index) in pictures" :key="index" :title="picture.title" :picture_url="picture.picture_url">
        </picture-card>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>
Code language: HTML, XML (xml)

admin

Посмотреть все записи автора admin →

Вам также может понравиться

Язык программирования Python

19 полезных функций библиотеки Python Itertools (примеры)

Язык программирования Python

Отладка кода с помощью pdb в Python

Язык программирования Python

Алгоритм сортировки Quicksort на Python.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *