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

Vue.js е прогресивна рамка на javascript, която се използва за изграждане на потребителски интерфейси (потребителски интерфейси) и SPA (приложения с една страница). Можем да започнем да изграждаме уеб приложения в Vue.js с основните познания по HTML, CSS и Javascript. Vue.js е изграден чрез комбиниране на най-добрите функции от вече съществуващите рамки Angular и response. Разработчиците обичат да кодират и чувстват свобода и комфорт, докато изграждат приложения във 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 знаят за това? Можем просто да импортираме компонент, като добавим оператор „Импортиране“ в началото на маркера на скрипта и декларираме този компонент в обекта „компоненти“, като използваме следния синтаксис.

След като импортираме компонента успешно, можем да го използваме в шаблона по този начин