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

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

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

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

<html>
 <head>
 <title>VueJs Instance</title>
 <script type = "text/javascript" src = "js/vue.js"></script>
 </head>
 <body>
 <div id = "component_test">
 <testcomponent></testcomponent>
 </div>
 <div id = "component_test1">
 <testcomponent></testcomponent>
 </div>
 <script type = "text/javascript" src = "js/vue_component.js"></script>
 </body>
</html>

vue_component.js

Vue.component('testcomponent',{
 template : '<div><h1>This is coming from component</h1></div>'
});
var vm = new Vue({
 el: '#component_test'
});
var vm1 = new Vue({
 el: '#component_test1'
});

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

Vue.component('nameofthecomponent',{ // options});

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

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

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

Узнать подробнее
<div id = "component_test">
 <testcomponent></testcomponent>
</div>
<div id = "component_test1">
 <testcomponent></testcomponent>
</div>

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

 
Vue.component('testcomponent',{
 template : '<div><h1>This is coming from component</h1></div>'
});

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

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

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

var vm = new Vue({
 el: '#component_test',
 components:{
 'testcomponent': {
 template : '<div><h1>This is coming from component</h1></div>'
 }
 }
});

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

<html>
 <head>
 <title>VueJs Instance</title>
 <script type = "text/javascript" src = "js/vue.js"></script>
 </head>
 <body>
 <div id = "component_test">
 <testcomponent></testcomponent>
 </div>
 <div id = "component_test1">
 <testcomponent></testcomponent>
 </div>
 <script type = "text/javascript" src = "js/vue_component.js"></script>
 </body>
</html>

vue_component.js

Vue.component('testcomponent',{
 template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
 data: function() {
 return {
 name : "Ria"
 }
 },
 methods:{
 changename : function() {
 this.name = "Ben";
 },
 originalname: function() {
 this.name = "Ria";
 }
 }
});
var vm = new Vue({
 el: '#component_test'
});
var vm1 = new Vue({
 el: '#component_test1'
});

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

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

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

Узнать подробнее
template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',

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

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

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

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

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

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

<html>
 <head>
 <title>VueJs Instance</title>
 <script type = "text/javascript" src = "js/vue.js"></script>
 </head>
 <body>
 <div id = "databinding">
 <component v-bind:is = "view"></component>
 </div>
 <script type = "text/javascript">
 var vm = new Vue({
 el: '#databinding',
 data: {
 view: 'component1'
 },
 components: {
 'component1': {
 template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
 }
 }
 });
 </script>
 </body>
</html>

Результат

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

<component v-bind:is = "view"></component>

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

var vm = new Vue({
 el: '#databinding',
 data: {
 view: 'component1'
 },
 components: {
 'component1': {
 template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
 }
 }
});

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

Источник: 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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree