Vue.js Компоненты

Vue.js - это прогрессивная структура javascript, которая используется для создания пользовательских интерфейсов (пользовательских интерфейсов) и SPA (одностраничных приложений). Мы можем начать создавать веб-приложения на Vue.js с базовыми знаниями HTML, CSS и Javascript. Vue.js построен путем объединения лучших функций из уже существующих Angular и React Framework. Разработчики любят кодировать и чувствовать свободу и комфорт при создании приложений на Vue.js.

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

Vue.js предлагает лучший компонентный подход, как и все, что нужно разработчику; он может найти это в сингле .vue файл. Разработчики чувствуют себя комфортно и непринужденно, когда им не нужно беспокоиться или заботиться о дополнительной структуре компонента.

В этой статье мы рассмотрим однофайловый компонент, который имеет .расширение vue. Итак, давайте посмотрим на очень простой пример компонента Vue и разберемся с ним.

Это очень простой и базовый пример компонента Vue. В котором мы видим, что код разделен на три слоя. Этот трехуровневый синтаксис - лучшая часть Vue.js. Он удовлетворяет разделение интересов, но при этом находится в одном единственном .vue файл. У нас есть наш шаблон (HTML), логика в Javascript и стили внутри компонента.

• Шаблон
• Сценарий
• Стиль

Шаблон

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

Сценарий

Это раздел, в котором мы можем написать логику компонента на javascript, следуя синтаксису Vue.js. Здесь собраны все функции и логика компонента. Например,

• Импорт других необходимых компонентов и пакетов.
• Объявление переменной
• Методы / функции
• Крючки жизненного цикла
• Вычисляемые свойства и наблюдатели
• И так далее…

Стиль

Здесь мы пишем стили компонента в CSS или можем использовать любой препроцессор, который хотим использовать.

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

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

Чтобы использовать компонент, мы сначала должны импортировать компонент. Иначе как может Vue.js знает об этом? Мы можем просто импортировать компонент, добавив оператор «Импорт» в начало тега скрипта и объявив этот компонент в объекте «компоненты», используя следующий синтаксис.

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