Описание тега vue-component
Component is a powerful Vue feature that allows extending basic HTML elements to encapsulate reusable code.
Компоненты - одна из самых мощных функций Vue. Они помогают вам расширить базовые элементы HTML для инкапсуляции кода многократного использования. На высоком уровне компоненты - это настраиваемые элементы, к которым компилятор Vue прикрепляет поведение. В некоторых случаях они также могут отображаться как собственный HTML-элемент, расширенный специальным атрибутом is.
Базовый компонент
Javascript:
// First, we need a vue instance attached to a element
new Vue({ el: '#components-demo' })
// Then we define a new component called "button-counter"
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
// The template tag is where we write the component markup
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
HTML:
<div id="components-demo">
<button-counter></button-counter>
</div>
Затем Vue скомпилирует шаблон в виртуальную DOM, и его вывод будет отображаться в браузере следующим образом:
<div id="components-demo">
<button>You clicked me 0 times.</button>
</div>
Затем каждый раз, когда вы нажимаете кнопку, Vue будет выполнять count++ что приводит к обновлению переменной count и запуску Vue повторного рендеринга DOM компонента для отображения нового значения:
You have clicked me 1 times.