Хичээлээр директивийн боломжуудыг хэрхэн өргөжүүлэхийг авч үзье. Эхлээд төслийн кодыг багахан цэгцлэе. Хичээлд Өөрийн директив үүсгэх , Директивийн амьдралын цикл хичээлийн жишээг ашиглах тул хичээлүүдийг үзэхийг зөвлөе. Директивийн амьдралын циклийг шалгахаар App компонентод нэмсэн товчнуудыг хасан
<template>
<div>
<h2 v-colored>{{ title }}</h2>
</div>
</template>
<script>
export default {
data () {
return {
title: "Hello I am Vue!"
}
}
}
</script>кодтой болгосон.
Директивийн амьдралын циклүүдийн аргуудыг color.js файлаас хасан
export default {
bind(el, bindings, vnode) {
el.style.color = 'green'
}
}ганцхан bind аргыг үлдээсэн. Төслийг ажлуулбал хөтөч дээр
хуудсыг үзүүлж байх ёстой. Манай директив colored нэртэй ч одоо текстэд ганцхан ногоон өнгийг өгч байгаа. Уул нь хуудасны элементүүдэд дурын өнгийг өгч байвал нэрэндээ илүү тохирохоор. Иймээс директивт параметр дамжуулан элементэд хүссэн өнгийг өгөх гэж оролдоё. Үүний тулд директивийг холбон өгч буй App компонентийн кодыг
<template>
<div>
<h2 v-colored="'blue'">{{ title }}</h2>
</div>
</template>
<script>
export default {
data () {
return {
title: "Hello I am Vue!"
}
}
}
</script>гэж өөрчилье. Компонентийн хэвд colored директивийг тодорхойлж буй атрибутын утгыг javascript -ийн бичлэгийн дүрмээр буюу дан хашилтыг ашиглан тодорхойлон өгсөн. Энэ утга бол colored директив дамжуулж байгаа параметр юм. Дээрх кодоор бол h2 гарчигт үзүүлэх текстийг хөх өнгөөр үзүүл гэсэн үг. Одоо colored директивээс дамжуулсан параметрт хандах хэрэгтэй. Үүнийг bind аргад bindings обьектын value талбарын утгыг элементийн өнгийг тодорхойлох хэвд олгон
export default {
bind(el, bindings, vnode) {
el.style.color = bindings.value
}
}хийнэ. bindings обьектын value талбарт директивт дамжуулсан параметрийн утга агуулагдаж байдаг. Кодын өөрчлөлтийг хадгалаад хөтөч дээрх хуудсаа харвал
текст хөх өнгөөр харагдана. Гарчигийн өнгийг улаан болгоё гэвэл App компонентод <h2 v-colored="'red'">{{ title }}</h2> гэж өгөхөд л хангалттай. Ийм аргаар директивт параметрүүд дамжуулан түүний ажиллагааг илүү универсиал болгох боломжтой.
функц өгөгдөв.
тэгшитгэлийн шийдийг ол.