Vue $data Object
উদাহরণ
আপনার নিজস্ব Vue সার্ভার পান
ক্লিক করার সময় একটি <div> উপাদানের রঙ পরিবর্তন করতে $data অবজেক্ট ব্যবহার করে।
export default {
data() {
return {
color: 'lightgreen'
}
},
methods: {
changeColor() {
this.$data.color = 'pink';
}
}
}নীচে আরো উদাহরণ দেখুন.
সংজ্ঞা এবং প্রয়োগ
$data অবজেক্ট Vue ইনস্ট্যান্সের ডেটা অংশে সংরক্ষিত সমস্ত বৈশিষ্ট্য উপস্থাপন করে।
উপরের উদাহরণে, রঙের প্রপার্টি এই.$data.color দিয়ে উপস্থাপন করা হয়েছে, কিন্তু একই প্রপার্টি this.color হিসেবে লেখা যেতে পারে, যা বেশি সাধারণ।
$data অবজেক্ট ব্যবহার করা হয় যখন একটি Vue ইনস্ট্যান্সের ডেটা অংশে একটি প্রপার্টি স্পষ্টভাবে উল্লেখ করা হয়।
বিশেষ ক্ষেত্রে
$data অবজেক্ট ব্যবহার করা উচিত একটি ডেটা অ্যাট্রিবিউট নির্দিষ্ট করার সময় যার নাম "_" বা "$" দিয়ে শুরু হয় কারণ এই উপসর্গটি একা এই ধরনের ক্ষেত্রে কাজ করবে না।
উদাহরণ
ডেটা() { ফিরে _private: 'গোপন', $special: 'মান' } } // এই._private কাজ করে না // এই.$ বিশেষ কাজ করে না // শুধুমাত্র $ডেটার মাধ্যমে: এই।$data._private এই।$ডেটা।$বিশেষ
আরো উদাহরণ
উদাহরণ
প্রতিবার ক্লিক করার সময় <div> উপাদানটির রঙ পরিবর্তন করতে $data অবজেক্ট ব্যবহার করে।
<div
v-on:click="$data.color+=100"
v-bind:style="{backgroundColor:'hsl('+$data.color+',80%,80%)'}"
>
<p>Click here</p>
</div>পরিস্থিতি 2: এর সাথে (অভিব্যক্তিতে)
<div
@click="incrementCounter"
:style="{ color: textColor }"
>
{{ counter }}
</div>
<script>
export default {
methods: {
incrementCounter() {
this.counter++;
}
}
}
</script>
এক্সপ্রেশনে $ডেটা
টেমপ্লেট এক্সপ্রেশনে, আপনি সরাসরি $data ব্যবহার করতে পারেন, যা আপনাকে ডেটা বৈশিষ্ট্যগুলি স্পষ্টভাবে চিহ্নিত করতে দেয়। যাইহোক, বেশিরভাগ ক্ষেত্রে এই অ্যাপ্লিকেশনটি পরিষ্কার।
কখন $ডেটা ব্যবহার করতে হবে
ব্যবহারিক কোডিং উদাহরণ
1. বিশেষ নাম সহ ডেটা বৈশিষ্ট্য
রপ্তানি ডিফল্ট { ডেটা() { ফিরে // স্বাভাবিক বৈশিষ্ট্য ব্যবহারকারীর নাম: 'জন', বয়স: 30, // বিশেষ বৈশিষ্ট্য _অভ্যন্তরীণ রাজ্য: 'সক্রিয়', $মেটাডেটা: { সংস্করণ: '1.0' }, $$privateFlag: সত্য } }, পদ্ধতি: { updateInternalState() { // এটি কাজ করে না: // this._internalState = 'নিষ্ক্রিয়'; // this.$metadata.version = '2.0'; // শুধুমাত্র $ডেটার মাধ্যমে: this.$data._internalState = 'নিষ্ক্রিয়'; this.$data.$metadata.version = '2.0'; this.$data.$$privateFlag = মিথ্যা; }, logAllData() { // সম্পূর্ণ $data অবজেক্ট দেখতে console.log(এই.$ডেটা); // ব্যক্তিগত সম্পত্তি অ্যাক্সেস করতে console.log('Username:', this.username); // কাজ করে console.log('Internal:', this.$data._internalState); // কাজ করে } } }2. ডাইনামিক অ্যাট্রিবিউট অ্যাক্সেস
রপ্তানি ডিফল্ট { ডেটা() { ফিরে ব্যবহারকারী: { নাম: 'এলিস', ইমেল: 'alice@example.com', বয়স: 25 } } }, পদ্ধতি: { updateProperty(propName, value) { // পরিবর্তনশীল নামের সাথে গতিশীল অ্যাক্সেস this.$data.user[propName] = মান; // এর সমতুল্য: // যদি (propName === 'নাম') this.user.name = মান; // যদি (propName === 'email') this.user.email = মান; // যদি (propName === 'বয়স') this.user.age = মান; }, getAllDataProperties() { // $ডেটাতে সমস্ত বৈশিষ্ট্য পান Object.keys(এই.$ডেটা); } } }ভিউ টিউটোরিয়াল
ব্যায়াম দিয়ে নিজেকে পরীক্ষা করুন