Vue JS — Компоненты

Vue JS — Компоненты

От автора: Vue JS компоненты – это одна из важнейших функций VueJS, создающая пользовательские элементы, которые можно повторно использовать в HTML.

Давайте создадим компонент и на его примере разберёмся в том, как это работает во VueJS. Пример

vue_component.js

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

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

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

В файле .html мы создали два div с id component_test и component_test1. В вышеприведённых файлах .js два экземпляра Vue создаются с id элемента дивов. Мы создали обычный компонент, который можно использовать с обоими экземплярами представления. Для создания компонента используется следующий синтаксис.

После создания компонента имя компонента становится пользовательским элементом и то же самое имя можно использовать в созданном элементе экземпляра Vue, то есть внутри div с такими id: component_test и component_test1
В файле .js мы использовали test component в качестве имени компонента и то же имя используется как пользовательский элемент внутри тэгов div. Пример

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

После выполнения этого кода в браузере будет отображаться следующее.

Компоненты получают тэги пользовательских элементов, то есть <testcomponent></testcomponent>. Однако, когда мы просмотрим это в браузере, то не увидим пользовательского тэга в чистом HTML в шаблоне, как это показано на следующем скриншоте.

Мы также напрямую сделали компоненты частью экземпляра vue, как это показано на следующем скрипте.

Это называется локальной регистрацией и компоненты будут частью единственного созданного экземпляра vue. Итак, мы увидели рассмотрели компонент с базовыми параметрами. А теперь давайте добавим ещё несколько параметров, например данные и методы. Точно так же, как экземпляр Vue, компоненты содержат данные и методы. Поэтому, мы расширим код, который уже видели, данными и методами. Пример

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

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

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

vue_component.js

В вышеприведённый файл .js мы добавили данные, являющиеся функцией, которая возвращает объект. Объект содержит свойство name, которому присвоено значение ‘Ria’. Оно использовано в следующем шаблоне.

Несмотря на то, что в компоненте данные являются функцией, мы можем использовать его свойства точно так же, как и с экземпляром Vue. Также были добавлены два метода: changename и originalname. В методе changename мы изменяем имя свойства, а в методе originalname мы изменяем его обратно на исходное имя.

Мы также добавили два события в div — mouseover и mouseout. Подробно события будут рассматриваться в разделе События. mouseover вызывает метод changename, а mouseout вызывает метод originalname. Это показано в приведённом ниже примере.

Как вы видите, такой код отображает то же самое имя, присвоенное свойству данных. Мы присвоили событие mouseover тэгу div, а также mouseout. Давайте посмотрим, что произойдёт, когда мы выполним mouseover и mouseout.

После выполнения mouseover мы видим, что имя первого компонента изменилось на Ben, а второе имя осталось прежним. Это связано с тем, что компонент данных является функцией и возвращает объект. Таким образом, если оно изменилось в одном месте, то же самое не переписывается в других местах.

Динамичные компоненты

Чтобы создать динамичные компоненты, мы используем ключевое слово <component></component>, они связаны с использованием свойства так, как это показано на следующем примере. Пример

Результат

Динамичный компонент создаётся с использованием следующего синтаксиса.

Он содержит v-bind:is = ”view” и ему присваивается представление значения. Представление определяется экземпляром Vue следующим образом.

После выполнения шаблон Динамичные компоненты отображается в браузере.

Источник: https://www.tutorialspoint.com/

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

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

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

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

VUE JS. Быстрый старт

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

Получить

Метки:

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

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

Комментарии 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