জয়েন লগইন

ভিইউই

🌈ভিইউই কি?

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

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

ভিইউই সমূহ

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

  • ➡️ data - কম্পোনেন্টের ডেটা নির্ধারণ করা
  • ➡️ setup - কম্পোনেন্টের প্রাথমিক যুক্তি নির্ধারণ করা
  • ➡️ render - কম্পোনেন্টের রেন্ডারিং নির্ধারণ করা
  • ➡️ mounted - কম্পোনেন্ট মাউন্ট হওয়ার পর প্রক্রিয়া সম্পন্ন করা

data - কম্পোনেন্টের ডেটা নির্ধারণ করার উদাহরণ।

vue
<!DOCTYPE html>
<html>
<body>

<div id="app">
  <h1>{{header}}</h1>
</div>

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

setup - কম্পোনেন্টের প্রাথমিক যুক্তি নির্ধারণ করার উদাহরণ।

vue
<!DOCTYPE html>
<html>
<body>

<div id="app">
  <input v-model="name" placeholder="আপনার নাম">
  <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>

render - কম্পোনেন্টের রেন্ডারিং নির্ধারণ করার উদাহরণ।

vue
<!DOCTYPE html>
<html>
<body>

<div id="app"></div>

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

mounted - কম্পোনেন্ট মাউন্ট হওয়ার পর প্রক্রিয়া সম্পন্ন করার উদাহরণ।

vue
<!DOCTYPE html>
<html>
<body>

<div id="app">
  <h1 ref="title">প্রোগ্রামিং শিখুন</h1>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const {createApp} = Vue;
createApp({
  mounted() {
    this.$refs.title.textContent = "প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন";
  }
}).mount("#app");
</script>
</body>
</html>

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

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

নাম বিবরণ
data কম্পোনেন্টের ডেটা নির্ধারণ করতে ব্যবহৃত হয়।
setup কম্পোনেন্টের প্রাথমিক যুক্তি নির্ধারণ করতে ব্যবহৃত হয়।
render কম্পোনেন্টের রেন্ডারিং নির্ধারণ করতে ব্যবহৃত হয়।
mounted কম্পোনেন্ট মাউন্ট হওয়ার পর প্রক্রিয়া সম্পন্ন করতে ব্যবহৃত হয়।