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, което помага много и спестява огромно количество време в разработката.
