Создание компонентов Vue.js

Создание компонентов Vue.js

От автора: Vue — один из наиболее быстро растущих фреймворков JavaScript в современном мире. Описанный как «интуитивный, быстрый и композитный» MVVM для создания интерактивных интерфейсов, Vue стал любимым фреймворком JavaScript для разработчиков, чтобы разрабатывать интерактивные веб-приложения и интерфейсы. Это совершенно очевидно с его 97K GitHub звезд с момента его выпуска в 2014 году.

В отличие от Angular, основанного на старой архитектуре Model-View-Controller, этот фреймворк следует за моделью Model-View-View-Model. Например, интересно, как происходит в Vue js создание компонента.

У фреймворка есть отдельные файловые компоненты. Это означает, что вы можете написать template, script и style в одном файле .vue.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

В этом посте я расскажу о некоторых из лучших практик, которые вы можете иметь в виду при создании расширенного Vue App.

Настройка приложения

Существует много разных способов создания приложения Vue. Если вы новичок, вы можете посмотреть этот пример JS Fiddle Hello World, чтобы попробовать Vue.

В этом посте я собираюсь использовать Vue CLI для создания Vue Project. Сначала откройте командный терминал в вашей системе и напишите следующую команду для установки Vue CLI:

Теперь вы можете создать проект Vue! Поэтому давайте продолжим и делаем это:

Это создаст новый проект Vue под названием vue-app. Вы можете назвать это чем-то еще, если хотите.

Создавайте компоненты Vue с помощью vue-class-component

Взгляните на фрагмент кода вверху, и вы увидите, что у вас есть функция data которая возвращает объект. Если вы хотите передать какие-либо обработчики, вам придется написать объект method.

vue-class-component уменьшает процесс разработки компонентов, позволяя разработчикам напрямую добавлять свойства данных и обработчики в качестве свойств класса.

Откройте каталог проекта в редакторе кода. В вашей папке src вы увидите два файла: App.vue и main.js.

Разработчики с опытом работы в таких библиотеках, как React могут сказать, что файл main.js эквивалентен index.js от React. Это означает, что фактический файл запускается при запуске команд, таких как yarn serve или yarn build.

Перепишите файл main.js со следующим кодом:

В принципе, мы сначала захватываем элемент div, который имеет «приложение» в качестве идентификатора из файла public/index.html, а затем мы визуализируем компонент App внутри него. Теперь вам нужно создать этот компонент App внутри файла App.vue. Откройте файл App.vue и замените код по умолчанию следующим:

Здесь я сначала создал простой template, в котором есть div с сообщением внутри него. script импортирует пакет Vue и функцию Component из Component vue-class-component. Вам также необходимо установить этот пакет в свой проект.

Затем я декорирую класс App функцией Component. Эта функция имеет объект, который вы можете передать в параметрах.

Если вы используете VS Code, вы увидите, что теперь вы получаете сообщение об ошибке в App. Это связано с тем, что VS Code по умолчанию не принимает экспериментального декоратора. Чтобы решить эту проблему, создайте новый файл с именем jsconfig.json в корневом каталоге проекта. Здесь вы говорите Vue Compiler, чтобы позволить экспериментальным декораторам в вашем коде:

Перезагрузите редактор, и вы увидите, что ошибка исчезнет!

Теперь мы отвечаем на вопрос: «Почему я должен использовать vue-class-component вместо традиционных компонентов Vue?»

В традиционном компоненте вам необходимо написать функцию data, которая возвращает объект. Чтобы изменить что-либо в своем компоненте, вы затем будете писать такие methods, как onClick.

Но в vue-class-component вы напрямую пишете метод onClick. Все, что осталось сделать, это связать его с template. Вы можете сделать это, написав @click=»onClick» внутри тега h1 шаблона.

Запустите приложение Vue, используя команду yarn serve, и вы увидите, что она работает следующим образом:

Определите свои props с помощью vue-property-decorator

Вы также можете использовать vue-property-decorator для определения свойств непосредственно в классе. И это тоже делается с помощью простого декоратора @Prop(). Этот метод объявления prop позволяет нам держать наши классы простыми.

Сначала установите пакет vue-property-decorator в свой проект:

Еще одна отличная вещь в этом пакете состоит в том, что он также включает vue-class-component внутри себя. Таким образом, вы можете импортировать Component из пакета vue-property-decorator.

Внутри файла App.vue перезапишите код, как показано ниже:

Здесь я сначала импортирую Component и Prop из пакета vue-property-decorator. Затем в классе App я использую декоратор @Prop, чтобы установить значение по умолчанию для message.

Вот и все! Теперь вы передаете message в качестве prop в наш код, и оно также имеет значение по умолчанию.

Определите место содержимого в компонентах с Vue Slots

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

Вернитесь в файл main.js, перепишите код внутри render следующим образом:

Если вы посмотрите на приложение в своем браузере, вы увидите, что ничего не изменилось. Это связано с тем, что вы не указали места для нового текста внутри template в файле App.vue. Именно здесь вступают в действие игровые slots.

Внутри App.vue напишите два новых slots, которые обертывают исходный тег h1.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Ваше приложение по-прежнему не будет отображать новый текст. Это потому, что компилятор теперь не знает, в какой слот помещается новый текст. Я хочу, чтобы текст находился в нижнем слоте. Я дал этому слоту name footer.

Перейдите в файл main.js и добавьте атрибут slot=»footer» в новый текст. Затем будет отображаться новый текст.

Но ваш метод render сейчас немного громоздкий. Давайте посмотрим, как вы можете использовать slots чтобы позаботиться об этом.

Использование слотов для создания макетов

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

Создайте новый файл с именем Layout.vue внутри папки src/components. Внутри этого файла напишите элемент template как показано ниже:

Затем перейдите в файл App.vue и удалите все внутри тега template. Затем внутри тега script импортируйте созданный вами Layout.vue, например:

Вам также нужно сообщить декоратору Component, что вы используете Layout как компонент.

Теперь вы можете использовать Layout как компонент внутри тега template. Я также добавлю несколько текстовых тегов.

Убедитесь, что вы добавили атрибут slot с соответствующим именем, иначе текстовые теги не будут отображаться.

Передача props с использованием области Vue Slot

Комбинируя ваши компоненты с slots, вы можете передавать данные компонента в слот с использованием slot-scope. Вы можете передавать реквизиты вниз от компонентов родителя к дочерним компонентам, не связывая их вместе.

Перейдите в файл App.vue и внутри тега template, оберните Layout внутри тега Settings.

Импортируйте Settings внутри тега script

Скажите декоратору Component, что вы используете Settings в качестве компонента.

Теперь вам действительно нужно создать компонент Settings. Поэтому перейдите в src/components и создайте файл с именем Settings.vue. Напишите этот код внутри него:

Внутри тега template у меня есть корневой div, в котором есть slot. Внутри этого slot я привязываю :header к header.

Перейдя к тегу script, я сначала импортирую пакет Vue и декоратор Component из пакета Component vue-class-component.

Затем я создаю класс Header внутри декоратора Component. Этот класс содержит данные, которые я хочу передать в заголовок.

Передача props функциональным шаблонам

Функциональные шаблоны позволяют создать компонент, который имеет только тег template и предоставляет props в шаблоне.

Внутри папки src/components создайте новый файл с именем Header.vue и напишите этот код внутри него:

Термин functional здесь используется, чтобы указать, что этот файл имеет простой template. Повторите это для Body.vue и Footer.vue.

Вернитесь в файл App.vue и перепишите template следующим образом:

Вам также необходимо написать операторы импорта для Header, Body, Footer внутри тега script файла:

И скажите декоратору Component, что вы используете их как компоненты.

Но код все равно не сработает. Потому что оператор импорта, который вы только что написали, не совсем корректен. Чтобы решить эту проблему, создайте новый файл index.js внутри src/components.

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

Использование Bit для компонентов Vue

Bit — это платформа для обмена компонентами в нескольких приложениях или проектах, поддерживая их синхронизацию. При работе с компонентами Vue.js Bit — отличный способ совместной работы, разработки компонентов из разных проектов, их организации, синхронизации изменений и контроля. Не стесняйтесь проверить это.

Заключение…

Vue — это программная технология, которая широко используется во всем мире для веб-разработки. Vue на самом деле является средой JavaScript с различными дополнительными инструментами для создания пользовательских интерфейсов.

Одним из главных факторов успеха Vue является то, что его очень легко изучить, и с ним еще проще создавать потрясающие приложения.

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

Автор: Rajat S

Источник: https://blog.bitsrc.io/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

FullStack-Мастер

FullStack-Мастер. Разработка CRM-системы на Node.js, Express, Angular 6

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree