Vue $el অবজেক্ট
$el অবজেক্ট Vue কম্পোনেন্টের মূল DOM নোডকে প্রতিনিধিত্ব করে।
Vue অ্যাপ্লিকেশন লোড না হওয়া পর্যন্ত $el অবজেক্টটি বিদ্যমান নেই।
আপনার নিজস্ব Vue সার্ভার পান
রুট অবস্থানে <div> ট্যাগের পটভূমির রঙ পরিবর্তন করতে $el অবজেক্ট ব্যবহার করে।
Example
methods: {
changeColor() {
this.$el.style.backgroundColor = 'lightgreen';
}
}দ্রষ্টব্য:
নীচে আরো উদাহরণ দেখুন.
সংজ্ঞা এবং প্রয়োগ
$el অবজেক্ট Vue কম্পোনেন্টের মূল DOM নোডকে প্রতিনিধিত্ব করে।
Vue অ্যাপ্লিকেশন লোড না হওয়া পর্যন্ত $el অবজেক্টটি বিদ্যমান নেই।
যদি <টেমপ্লেট>-এ শুধুমাত্র একটি HTML উৎস উপাদান থাকে:
- $el অবজেক্ট হবে সেই রুট এলিমেন্ট।
- $el অবজেক্ট ব্যবহার করে সরাসরি DOM পরিবর্তন করা সম্ভব (উপরের উদাহরণ দেখুন), কিন্তু এটি সুপারিশ করা হয় না।
- আরও স্থিতিশীল এবং সহজে রক্ষণাবেক্ষণের কোডের জন্য, DOM পরিবর্তন করতে Vue ref বৈশিষ্ট্য এবং অন্যান্য Vue ফাংশন ব্যবহার করা ভাল ধারণা (নীচের উদাহরণ 1 দেখুন)।
যদি <টেমপ্লেট> একাধিক HTML উৎস উপাদান থাকে:
- $el অবজেক্ট হল Vue ইন্টারনালের জন্য একটি স্থানধারক DOM পাঠ্য নোড (প্রকৃত DOM উপাদান নয়)।
- একাধিক রুট উপাদান থাকলে $el অবজেক্ট ব্যবহার করে DOM পরিবর্তন করা যাবে না (নীচের উদাহরণ 2 দেখুন)।
দ্রষ্টব্য:
Vue 3 এর কম্পোজিশন API-এ, $el অ্যাট্রিবিউটটি <script setup> (সেটআপ ফাংশন ব্যবহার করে) অ্যাক্সেস করা যাবে না।
আরো উদাহরণ
Example 1
প্রস্তাবিত হিসাবে, $el অবজেক্ট ব্যবহার না করে রেফ অ্যাট্রিবিউট ব্যবহার করে <div> ট্যাগের পটভূমির রঙ পরিবর্তন করুন।
Template
<template>
<div ref="rootDiv">
<h2>Example $el Object</h2>
<p>It is recommended, and more consistent, to use the ref attribute instead of the $el object to change the background color root DIV tag.</p>
<button v-on:click="changeColor">Click here</button>
</div>
</template>Script
<script>
export default {
methods: {
changeColor() {
this.$refs.rootDiv.style.backgroundColor = 'lightgreen';
}
}
}
</script>Example 2
যখন <টেমপ্লেট> একাধিক উপাদান ধারণ করে, $el অবজেক্ট হল Vue-এর অভ্যন্তরীণ ব্যবহারের জন্য একটি পাঠ্য নোড উপস্থাপনা (প্রকৃত DOM উপাদান নয়)।
এই ধরনের ক্ষেত্রে $el অবজেক্ট দিয়ে DOM পরিবর্তন করা যাবে না।
Template
<template>
<div>
<h2>Example $el Object</h2>
<p>We are not able to use the $el object to change the background color of the root DIV tag when there are other tags on the root level. Open browser console to see the error generated.</p>
<button v-on:click="changeColor">Click here</button>
</div>
<p>With this extra p-tag there are two tags on the root level.</p>
</template>Example 3
<h2> চাইল্ড এলিমেন্টের পটভূমির রঙ পরিবর্তন করতে $el এলিমেন্ট ব্যবহার করুন।
Script
<script>
export default {
methods: {
changeColor() {
this.$el.children[0].style.backgroundColor = 'lightblue';
}
}
}
</script>