Vue.js এ ডিরেকটিভস হল বিশেষ HTML অ্যাট্রিবিউট যা Vue এর নিজস্ব কার্যকারিতা বা লজিক পরিচালনা করতে সাহায্য করে। সাধারণত ডিরেকটিভগুলি v- প্রিফিক্স দিয়ে চিহ্নিত করা হয়, যেমন v-if, v-for, v-bind, v-model, ইত্যাদি। Vue.js এ ডিরেকটিভস দুটি ভাগে বিভক্ত করা যেতে পারে:
- গ্লোবাল ডিরেকটিভস (Global Directives)
- লোকাল ডিরেকটিভস (Local Directives)
এখানে গ্লোবাল এবং লোকাল ডিরেকটিভসের পার্থক্য এবং তাদের ব্যবহারের পদ্ধতি সম্পর্কে বিস্তারিত আলোচনা করা হলো।
১. গ্লোবাল ডিরেকটিভস
গ্লোবাল ডিরেকটিভস হল সেই ডিরেকটিভগুলি যা আপনার পুরো Vue অ্যাপ্লিকেশনে ব্যবহৃত হতে পারে, একবার Vue ইনস্ট্যান্সে রেজিস্টার করার পর। Vue.js কিছু ডিফল্ট গ্লোবাল ডিরেকটিভস প্রদান করে যেমন v-bind, v-if, v-for, v-model ইত্যাদি। আপনি Vue ইনস্ট্যান্সে নতুন ডিরেকটিভ গ্লোবালি রেজিস্টারও করতে পারেন।
গ্লোবাল ডিরেকটিভসের উদাহরণ:
Vue.js এ কিছু ডিফল্ট গ্লোবাল ডিরেকটিভস এর উদাহরণ:
- v-bind: একটি অ্যাট্রিবিউটের মান বাইন্ডিং করতে ব্যবহার করা হয়।
<div id="app">
<a v-bind:href="url">Go to Vue</a>
</div>
<script>
new Vue({
el: '#app',
data: {
url: 'https://vuejs.org'
}
});
</script>
- v-if: একটি উপাদান শো বা হাইড করার জন্য শর্ত নির্ধারণ করা হয়।
<div id="app">
<p v-if="isVisible">This is visible</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
});
</script>
- v-for: লুপিং করার জন্য ব্যবহৃত হয়।
<div id="app">
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: ['Apple', 'Banana', 'Orange']
}
});
</script>
এগুলি Vue.js এর গ্লোবাল ডিরেকটিভস এর কিছু সাধারণ উদাহরণ। তবে, Vue.js আপনাকে নিজের কাস্টম ডিরেকটিভও গ্লোবালি রেজিস্টার করার সুযোগ দেয়।
গ্লোবাল ডিরেক্টিভ রেজিস্টারিং:
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
});
এখানে focus একটি কাস্টম গ্লোবাল ডিরেকটিভ হিসেবে রেজিস্টার করা হয়েছে, যা যেকোনো উপাদানকে ফোকাস করবে যখন তা DOM এ ইনসার্ট হবে।
২. লোকাল ডিরেকটিভস
লোকাল ডিরেক্টিভস হল সেই ডিরেকটিভগুলি যা শুধু নির্দিষ্ট কম্পোনেন্টের মধ্যে ব্যবহার করা হয়। আপনি Vue.js এর কম্পোনেন্টে ডিরেকটিভটিকে লোকালি রেজিস্টার করতে পারেন, এবং এটি শুধুমাত্র ওই কম্পোনেন্টে কার্যকর হবে।
লোকাল ডিরেকটিভসের উদাহরণ:
লোকাল ডিরেকটিভ রেজিস্টার করা:
Vue.component('my-component', {
template: `<input v-focus>`,
directives: {
focus: {
inserted: function (el) {
el.focus();
}
}
}
});
এখানে, focus ডিরেকটিভটি শুধুমাত্র my-component কম্পোনেন্টে ব্যবহারযোগ্য এবং এটি সেই কম্পোনেন্টে ইনপুট এলিমেন্টে ফোকাস করবে।
৩. গ্লোবাল এবং লোকাল ডিরেকটিভসের মধ্যে পার্থক্য
| বৈশিষ্ট্য | গ্লোবাল ডিরেকটিভস | লোকাল ডিরেকটিভস |
|---|---|---|
| ব্যবহার | পুরো অ্যাপ্লিকেশনে ব্যবহার করা যায় | নির্দিষ্ট কম্পোনেন্টে ব্যবহৃত হয় |
| রেজিস্টার করার জায়গা | Vue ইনস্ট্যান্সের মাধ্যমে রেজিস্টার করা হয় | কম্পোনেন্টে directives অপশন ব্যবহার করে |
| প্রয়োগ | অ্যাপের সমস্ত কম্পোনেন্টে প্রযোজ্য | শুধুমাত্র ওই কম্পোনেন্টে প্রযোজ্য |
৪. কাস্টম ডিরেকটিভস তৈরি করা
Vue.js এর সাহায্যে আপনি কাস্টম ডিরেকটিভস তৈরি করতে পারেন, যা আপনার অ্যাপ্লিকেশনের নির্দিষ্ট কার্যকারিতাকে সম্পাদন করতে সহায়তা করবে। কাস্টম ডিরেকটিভ তৈরি করার সময় আপনি binding, hook functions, modifiers ইত্যাদি ব্যবহার করতে পারেন।
কাস্টম ডিরেকটিভস তৈরি করার উদাহরণ:
Vue.directive('color', {
bind(el, binding) {
el.style.color = binding.value;
}
});
new Vue({
el: '#app',
data: {
textColor: 'red'
}
});
এখানে, v-color ডিরেকটিভটি যেকোনো এলিমেন্টে রঙ পরিবর্তন করার জন্য ব্যবহার করা হয়েছে।
<div id="app">
<p v-color="textColor">This is red text!</p>
</div>
এভাবে, Vue.js আপনাকে কাস্টম ডিরেকটিভ তৈরি করার জন্য অনেক flexibility প্রদান করে।
সারাংশ
- গ্লোবাল ডিরেকটিভস: পুরো অ্যাপ্লিকেশন জুড়ে ব্যবহৃত হয় এবং একবার রেজিস্টার করলে তা সব কম্পোনেন্টে প্রযোজ্য হয়।
- লোকাল ডিরেকটিভস: নির্দিষ্ট কম্পোনেন্টের মধ্যে ব্যবহৃত হয় এবং তা শুধু সেই কম্পোনেন্টের মধ্যে কার্যকর হয়।
- কাস্টম ডিরেকটিভস: আপনার প্রয়োজন অনুযায়ী ডিরেকটিভ তৈরি করতে পারবেন, যা অ্যাপের কার্যকারিতা বৃদ্ধিতে সাহায্য করবে।
Vue.js এর ডিরেকটিভস আপনাকে ডোম ম্যানিপুলেশন, শর্তাধীন রেন্ডারিং, ইভেন্ট হ্যান্ডলিং ইত্যাদির জন্য অনেক সুবিধা প্রদান করে।
Read more
