ভিইউই

🌈ভিইউই কি?

📋ভিইউই হলো ডিরেক্টিভ ব্যবহার করার পদ্ধতি।

⚒️ভিইউই ডিরেক্টিভ ব্যবহার করতে ব্যবহৃত হয়।

ভিইউই সমূহ

ভিইউই এবং সেগুলোর ব্যবহারের তালিকা

➡️ v-model - মডেল তৈরি করা
➡️ v-if - শর্ত যাচাই সত্য হলে কোড ব্লক কার্যকর করা
➡️ v-else - ইফ শর্তের বিকল্প কোড ব্লক কার্যকর করা
➡️ v-else-if - পূর্বের শর্ত মিথ্যা হলে পরবর্তী শর্ত যাচাই করা
➡️ v-for - নির্দিষ্ট বারের জন্য পুনরাবৃত্তি করা
➡️ v-on - ইভেন্টের সাথে মেথড বা এক্সপ্রেশন যুক্ত করা
➡️ v-show - লুকানো উপাদান প্রদর্শন করা
➡️ v-html - উপাদানের মধ্যে এইচটিএমএল যুক্ত করা
➡️ v-text - উপাদানের মধ্যে টেক্সট যুক্ত করা
➡️ v-once - উপাদানকে একবার রেন্ডার করা
➡️ v-memo - নির্দিষ্ট নির্ভরতার ভিত্তিতে রেন্ডারিং নিয়ন্ত্রণ করা
➡️ v-pre - পূর্বনির্ধারিত টেক্সট প্রদর্শন করা

v-model - মডেল তৈরি করার উদাহরণ।

vue

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <label>আপনার নাম:</label>
  <input
    type="text"
    v-model="name"
  >
  <p>স্বাগতম: {{name}}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref} = Vue;
createApp({
  setup() {
    const name = ref("");
    return {name};
  }
}).mount("#app");
</script>
</body>
</html>

v-if - শর্ত যাচাই সত্য হলে কোড ব্লক কার্যকর করার উদাহরণ।

vue

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <button @click="show = !show">ফলাফল</button>
  <p v-if="show">হ্যালো বিশ্ব</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref} = Vue;
createApp({
  setup() {
    const show = ref(true);
    return {show};
  }
}).mount("#app");
</script>
</body>
</html>

v-else - ইফ শর্তের বিকল্প কোড ব্লক কার্যকর করার উদাহরণ।

vue

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <button @click="show = !show">টুগল</button>
  <p v-if="show">শো</p>
  <p v-else></p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref} = Vue;
createApp({
  setup() {
    const show = ref(true);
    return {show};
  }
}).mount("#app");
</script>
</body>
</html>

v-else-if - পূর্বের শর্ত মিথ্যা হলে পরবর্তী শর্ত যাচাই করার উদাহরণ।

vue

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <button @click="score++">ফলাফল</button>
  <p>{{score}}</p>
  <p v-if="score >= 80">চমৎকার</p>
  <p v-else-if="score >= 50"></p>
  <p v-else></p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref} = Vue;
createApp({
  setup() {
    const score = ref(40);
    return {score};
  }
}).mount("#app");
</script>
</body>
</html>

v-for - নির্দিষ্ট বারের জন্য পুনরাবৃত্তি করার উদাহরণ।

vue

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <ul>
    <li v-for="fruit in fruits">{{fruit}}</li>
  </ul>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref} = Vue;
createApp({
  setup() {
    const fruits = ref(["আপেল", "আঙ্গুর", "কমলা", "কলা"]);
    return {fruits};
  }
}).mount("#app");
</script>
</body>
</html>

v-on - ইভেন্টের সাথে মেথড বা এক্সপ্রেশন যুক্ত করার উদাহরণ।

vue

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <button v-on:click="count++">বৃদ্ধি</button>
  <p>কাউন্ট: {{count}}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref} = Vue;
createApp({
  setup() {
    const count = ref(0);
    return {count};
  }
}).mount("#app");
</script>
</body>
</html>

v-show - লুকানো উপাদান প্রদর্শন করার উদাহরণ।

vue

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <button @click="show = !show">ফলাফল</button>
  <p v-show="show">হ্যালো বিশ্ব</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref} = Vue;
createApp({
  setup() {
    const show = ref(true);
    return {show};
  }
}).mount("#app");
</script>
</body>
</html>

v-html - উপাদানের মধ্যে এইচটিএমএল যুক্ত করার উদাহরণ।

vue

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <div v-html="content"></div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp} = Vue;
createApp({
  data() {
    return {
      content: "<h2>প্রোগ্রামিং শিখুন</h2>"
    };
  }
}).mount("#app");
</script>
</body>
</html>

v-text - উপাদানের মধ্যে টেক্সট যুক্ত করার উদাহরণ।

vue

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <p v-text="message"></p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp} = Vue;
createApp({
  data() {
    return {
      message: "প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন"
    };
  }
}).mount("#app");
</script>
</body>
</html>

v-once - উপাদানকে একবার রেন্ডার করার উদাহরণ।

vue

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <button @click="count++">বৃদ্ধি</button>
  <p v-once>: {{count}}</p>
  <p>বর্তমান: {{count}}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref} = Vue;
createApp({
  setup() {
    const count = ref(0);
    return {count};
  }
}).mount("#app");
</script>
</body>
</html>

v-memo - নির্দিষ্ট নির্ভরতার ভিত্তিতে রেন্ডারিং নিয়ন্ত্রণ করার উদাহরণ।

vue

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <button @click="count++">বৃদ্ধি</button>
  <div v-memo="[count]">
    <p>কাউন্ট: {{count}}</p>
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp, ref} = Vue;
createApp({
  setup() {
    const count = ref(0);
    return {count};
  }
}).mount("#app");
</script>
</body>
</html>

v-pre - পূর্বনির্ধারিত টেক্সট প্রদর্শন করার উদাহরণ।

vue

<!DOCTYPE html>
<html>
<body>

<div id="app">
  <p v-pre>{{message}}</p>
  <p>{{message}}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp} = Vue;
createApp({
  data() {
    return {
      message: "হ্যালো"
    };
  }
}).mount("#app");
</script>
</body>
</html>

ভিইউই সম্পর্কিত বিস্তারিত তথ্য

কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক

নাম	বিবরণ
v-model	মডেল তৈরি করতে ব্যবহৃত হয়।
v-if	শর্ত যাচাই সত্য হলে কোড ব্লক কার্যকর করতে ব্যবহৃত হয়।
v-else	ইফ শর্তের বিকল্প কোড ব্লক কার্যকর করতে ব্যবহৃত হয়।
v-else-if	পূর্বের শর্ত মিথ্যা হলে পরবর্তী শর্ত যাচাই করতে ব্যবহৃত হয়।
v-for	নির্দিষ্ট বারের জন্য পুনরাবৃত্তি করতে ব্যবহৃত হয়।
v-on	ইভেন্টের সাথে মেথড বা এক্সপ্রেশন যুক্ত করতে ব্যবহৃত হয়।
v-show	লুকানো উপাদান প্রদর্শন করতে ব্যবহৃত হয়।
v-html	উপাদানের মধ্যে এইচটিএমএল যুক্ত করতে ব্যবহৃত হয়।
v-text	উপাদানের মধ্যে টেক্সট যুক্ত করতে ব্যবহৃত হয়।
v-once	উপাদানকে একবার রেন্ডার করতে ব্যবহৃত হয়।
v-memo	নির্দিষ্ট নির্ভরতার ভিত্তিতে রেন্ডারিং নিয়ন্ত্রণ করতে ব্যবহৃত হয়।
v-pre	পূর্বনির্ধারিত টেক্সট প্রদর্শন করতে ব্যবহৃত হয়।