Vue.js

উপস্থিতি

এই পৃষ্ঠায়

Built-in Special Attributes ​

key ​

key বিশেষ বৈশিষ্ট্যটি প্রাথমিকভাবে Vue-এর ভার্চুয়াল DOM অ্যালগরিদমের জন্য একটি ইঙ্গিত হিসাবে ব্যবহৃত হয় যাতে পুরানো তালিকার বিপরীতে নোডের নতুন তালিকার পার্থক্য করার সময় vnodes সনাক্ত করা হয়।

  • Expects: number | string | symbol

  • ** বিস্তারিত**

    কী ব্যতীত, Vue একটি অ্যালগরিদম ব্যবহার করে যা উপাদানের গতিবিধি কমিয়ে দেয় এবং যতটা সম্ভব একই ধরণের উপাদানের প্যাচ/পুনঃব্যবহার করার চেষ্টা করে। কীগুলির সাহায্যে, এটি কীগুলির ক্রম পরিবর্তনের উপর ভিত্তি করে উপাদানগুলিকে পুনর্বিন্যাস করবে এবং কীগুলির সাথে যে উপাদানগুলি আর উপস্থিত থাকবে না সেগুলি সর্বদা সরানো/ধ্বংস করা হবে৷

    একই অভিভাবকের সন্তানদের অবশ্যই অনন্য কী থাকতে হবে। ডুপ্লিকেট কী রেন্ডার ত্রুটির কারণ হবে।

    সবচেয়ে সাধারণ ব্যবহারের ক্ষেত্রে v-for এর সাথে মিলিত হয়:

    template
    <ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

    এটি পুনঃব্যবহারের পরিবর্তে একটি উপাদান/ কম্পোনেন্টকে জোর করে প্রতিস্থাপন করতেও ব্যবহার করা যেতে পারে। আপনি যখন চান তখন এটি কার্যকর হতে পারে:

    • সঠিকভাবে একটি উপাদানের লাইফসাইকেল হুক ট্রিগার
    • ট্রিগার ট্রানজিশন

    উদাহরণ স্বরূপ:

    template
    <transition>
  <span :key="text">{{ text }}</span>
</transition>

    যখন text পরিবর্তিত হয়, <span> সর্বদা প্যাচের পরিবর্তে প্রতিস্থাপিত হবে, তাই একটি রূপান্তর ট্রিগার হবে।

  • আরো দেখুন Guide - List Rendering - Maintaining State with key

ref ​

Denotes a template ref.

  • Expects: string | Function

  • ** বিস্তারিত**

    একটি উপাদান বা একটি চাইল্ড উপাদানের একটি রেফারেন্স নিবন্ধন করতে ref ব্যবহার করা হয়।

    অপশন এপিআই-এ, রেফারেন্সটি কম্পোনেন্টের this.$refs অবজেক্টের অধীনে নিবন্ধিত হবে:

    template
    <!-- stored as this.$refs.p -->
<p ref="p">hello</p>

    কম্পোজিশন এপিআই-তে, রেফারেন্সটি মিলিত নামের সাথে একটি রেফারেন্সে সংরক্ষণ করা হবে:

    vue
    <script setup>
import { ref } from 'vue'

const p = ref()
</script>

<template>
  <p ref="p">hello</p>
</template>

    একটি সাধারণ DOM উপাদানে ব্যবহার করা হলে, রেফারেন্সটি সেই উপাদান হবে; একটি চাইল্ড উপাদান ব্যবহার করা হলে, রেফারেন্স চাইল্ড উপাদান উদাহরণ হবে.

    বিকল্পভাবে ref একটি ফাংশন মান গ্রহণ করতে পারে যা রেফারেন্স কোথায় সংরক্ষণ করতে হবে তার উপর সম্পূর্ণ নিয়ন্ত্রণ প্রদান করে:

    template
    <ChildComponent :ref="(el) => child = el" />

    রেফ রেজিস্ট্রেশনের সময় সম্পর্কে একটি গুরুত্বপূর্ণ নোট: যেহেতু রেন্ডার ফাংশনের ফলে রেফগুলি নিজেই তৈরি হয়, সেগুলি অ্যাক্সেস করার আগে আপনাকে উপাদানটি মাউন্ট করা পর্যন্ত অপেক্ষা করতে হবে।

    this.$refsও অ-প্রতিক্রিয়াশীল, তাই আপনার ডেটা-বাইন্ডিংয়ের জন্য টেমপ্লেটগুলিতে এটি ব্যবহার করার চেষ্টা করা উচিত নয়।

  • আরো দেখুন

is ​

Used for binding dynamic components.

  • Expects: string | Component

  • Usage on native elements 3.1+

    যখন একটি নেটিভ HTML এলিমেন্টে is অ্যাট্রিবিউট ব্যবহার করা হয়, তখন এটিকে কাস্টমাইজ করা বিল্ট-ইন এলিমেন্ট হিসেবে ব্যাখ্যা করা হবে, যা একটি নেটিভ ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য।

    যাইহোক, একটি ব্যবহারের ক্ষেত্রে রয়েছে যেখানে আপনাকে একটি Vue উপাদান দিয়ে একটি নেটিভ উপাদান প্রতিস্থাপন করতে Vue-এর প্রয়োজন হতে পারে, যেমনটি in-DOM Template Parsing Caveats এ ব্যাখ্যা করা হয়েছে। আপনি is অ্যাট্রিবিউটের মানকে vue: দিয়ে প্রিফিক্স করতে পারেন যাতে Vue উপাদানটিকে Vue কম্পোনেন্ট হিসেবে রেন্ডার করবে:

    template
    <table>
  <tr is="vue:my-row-component"></tr>
</table>

  • আরো দেখুন

GitHub-এ এই পৃষ্ঠাটি সম্পাদনা করুন