Vue Directives

Vue নির্দেশাবলী শিখুন

Vue নির্দেশাবলী

Vue নির্দেশাবলীর একটি সেট আছে.

নির্দেশ ব্যাখ্যা
v-bind একটি ডেটা সম্পত্তির একটি বৈশিষ্ট্য আবদ্ধ করে
v-cloak প্রস্তুত না হওয়া পর্যন্ত একটি অসংকলিত টেমপ্লেট লুকিয়ে রাখে
v-for উপাদানের একটি তালিকা রেন্ডার করে
v-html টেমপ্লেটে HTML কোড প্রকাশ করে
v-if শর্তসাপেক্ষে একটি উপাদান রেন্ডার করে
v-else-if যদি যদি-বিবৃতির প্রথম অংশ মিথ্যা হয় তখন শর্তসাপেক্ষে একটি উপাদান রেন্ডার করে
v-else যদি যদি-বিবৃতির প্রথম অংশ মিথ্যা হয় তখন একটি উপাদান রেন্ডার করে
v-memo এক বা একাধিক নির্দিষ্ট বৈশিষ্ট্যে পরিবর্তন সনাক্ত না হওয়া পর্যন্ত একটি উপাদানের রেন্ডারিং স্থগিত করে
v-model একটি ইনপুট উপাদান এবং সংশ্লিষ্ট ডেটা সম্পত্তির মধ্যে একটি দ্বি-মুখী বাঁধাই তৈরি করে
v-on একটি ইভেন্টকে একটি কর্মের সাথে সংযুক্ত করে
v-once শুধুমাত্র একবার একটি উপাদান রেন্ডার করে
v-pre একটি উপাদান এবং এর বিষয়বস্তুর সংগ্রহ এড়িয়ে যায়
v-show শর্তসাপেক্ষে একটি উপাদানের চেহারা পরিবর্তন করে
v-slot একটি নামযুক্ত স্লটে বিষয়বস্তু নির্দেশ করে
v-text একটি উপাদানের পাঠ্য বিষয়বস্তু আপডেট করে

💡নির্দেশাবলী সম্পর্কে:

নির্দেশাবলী হল Vue-তে বিশেষ HTML বৈশিষ্ট্য যা v- উপসর্গ দিয়ে শুরু হয়। তারা Vue কে DOM উপাদানগুলিতে বিশেষ আচরণ প্রয়োগ করতে বলে। প্রতিটি নির্দেশের একটি নির্দিষ্ট উদ্দেশ্য রয়েছে এবং এটি Vue অ্যাপ্লিকেশন তৈরির জন্য বিল্ডিং ব্লক।

নির্দেশের প্রকার

বাধ্যতামূলক নির্দেশাবলী

  • v-bind:ডেটার সাথে অ্যাট্রিবিউট যুক্ত করে
  • v-model:দ্বি-মুখী ডেটা বাইন্ডিং
  • v-text:পাঠ্য বিষয়বস্তু আপডেট করে
  • v-html:HTML বিষয়বস্তু আপডেট করে

শর্তসাপেক্ষ নির্দেশাবলী

  • v-if / v-else-if / v-else:শর্তাধীন রেন্ডারিং
  • v-show:শর্তসাপেক্ষ চেহারা পরিবর্তন
  • v-for:তালিকা রেন্ডারিং

ইভেন্ট নির্দেশিকা

  • v-on:ইভেন্ট পরিচালনা
  • v-once:শুধুমাত্র একবার রেন্ডার
  • v-memo:স্মৃতিচারণ

বিশেষ নির্দেশনা

  • v-cloak:প্যাকেজ কভার
  • v-pre:প্যাকেজ পরিহার
  • v-slot:স্লট হ্যান্ডলিং

সাধারণ অ্যাপ্লিকেশন

v-bind:CSS শৈলী, ক্লাস, এবং অন্যান্য HTML বৈশিষ্ট্যগুলি গতিশীলভাবে সেট করতে
v-model:ইনপুট ক্ষেত্র গঠনের জন্য দ্বি-মুখী ডেটা বাইন্ডিং
v-for:অ্যারে বা অবজেক্ট থেকে উপাদানগুলির একটি তালিকা রেন্ডার করতে
v-if / v-show:শর্তের উপর ভিত্তি করে উপাদানগুলি দেখানো বা লুকানোর জন্য
v-on:ব্যবহারকারী ইন্টারফেসে এই ইভেন্টগুলি পরিচালনা করতে (ক্লিক, ইনপুট, ইত্যাদি)

⚠️নিরাপত্তা সতর্কতা:

v-htmlনির্দেশনাটি সাবধানে ব্যবহার করুন। এটি সরাসরি HTML সামগ্রী রেন্ডার করে, যা ক্রস-সাইট স্ক্রিপ্টিং (XSS) আক্রমণের দিকে নিয়ে যায়। শুধুমাত্র একটি বিশ্বস্ত উৎস থেকে HTML সামগ্রী রেন্ডার করতে v-html ব্যবহার করুন৷

ভিউ টিউটোরিয়াল

ব্যায়াম দিয়ে নিজেকে পরীক্ষা করুন

প্রশিক্ষণ:

কোন Vue নির্দেশিকাটি একটি ফর্ম ইনপুট ক্ষেত্র এবং একটি ডেটা সম্পত্তির মধ্যে দ্বি-মুখী ডেটা বাঁধাই তৈরি করতে ব্যবহৃত হয়?

v-bind
✗ ভুল! v-bind শুধুমাত্র একমুখী বাঁধাই প্রদান করে (ডেটা থেকে HTML পর্যন্ত)
v-on
✗ ভুল! v-on ইভেন্ট পরিচালনার জন্য, ডেটা বাইন্ডিং নয়
v-model
✓ ঠিক আছে! v-মডেল ইনপুট ক্ষেত্র গঠনের জন্য দ্বি-মুখী ডেটা বাইন্ডিং প্রদান করে
v-text
✗ ভুল! v-টেক্সট পাঠ্য বিষয়বস্তু আপডেট করার জন্য, দ্বিমুখী বাঁধনের জন্য নয়