Phenquestions
Структура спрямована на надання таких функцій, які роблять процес розробки простішим та швидшим для розробників. Vue.js - це така збагачена функціями фреймворк JavaScript, яка надає безліч вбудованих функцій та директив для швидкого здійснення процесу розробки. Але, мусять виникнути деякі сценарії, коли вам потрібна якась функціональність, яка недоступна в рамках, тому вам доведеться створювати власну.
У цій публікації ми дізнаємось і подивимось на вбудовані директиви, надані Vue.js, і ми також навчимося створювати та використовувати власну власну директиву Vue.
Директива
Директиви - це атрибути, які ви можете зв’язати з елементами DOM, з префіксом речення “v-”, який допомагає знати бібліотеці, що це особливий тип синтаксису, який використовується для виконання деяких завдань. Директиви зазвичай використовуються для безпосереднього маніпулювання DOM. Деякі з найбільш вживаних і відомих директив - "v-if", "v-for" та "v-show".
Директиви використовуються для застосування ефектів до елементів DOM, але реактивно. Давайте розберемося на прикладі:
Директива “v-if”
Ви можете переглянути текст.
У вищезазначеному тегу “v-if” - це директива, яка видаляє або додає тег абзацу “
", Залежить від правдивості змінної" showText ".
Директива "v-show"
Аналогічно, ми маємо директиву "v-show", яка може виконувати ту ж функціональність, що описана вище:
Ви можете переглянути текст.
Тонка різниця між "v-if" і "v-show" полягає в тому, що "v-if" не відображає елемент під час завантаження сторінки, якщо зв'язана змінна не є істинною, і вона завантажується, коли змінна стає істинною. На противагу цьому, “v-show” відображатиме елемент під час завантаження веб-сторінки, але приховує його. Отже, "v-if" є ефективним у часі під час завантаження сторінки та займає багато часу, коли змінна стає істинною. Він повинен відображати весь елемент, в той час як “v-show” ефективно впливає на час за умови істинності змінної, яка забирає багато часу під час завантаження веб-сторінки.
Гаразд! Давайте подивимось на директиву, яка бере аргумент.
Директива “v-bind”
Іншою найбільш широко використовуваною директивою є "v-bind", яка використовується для взаємодії та оновлення атрибутів HTML. Наприклад, якщо ми хочемо прив'язати якусь змінну до атрибута “href” тег, ми можемо прив'язати атрибут “href” так:
Директива “v-on”
Подібно до директиви “v-bind”, Vue забезпечує директиву “v-on” для прив’язки змінної для прослуховування подій, запущених у DOM. Наприклад, для прослуховування події Click та прив'язки до неї якоїсь змінної синтаксис буде виглядати так:
У інвертованих комах ми можемо надати вираз, а також функції.
Висновок
Ми дізналися про директиви у Vue та побачимо, як використовувати директиви у Vue.js. Ми обговорили деякі найбільш використовувані та основні вбудовані директиви Vue.js, що дуже допомагає та економить величезну кількість часу на розробці.
