Data Binding Vue.js मधील एक मूलभूत वैशिष्ट्य आहे जे तुम्हाला तुमच्या ऍप्लिकेशनमधील डेटा आणि वापरकर्ता इंटरफेस दरम्यान कनेक्शन स्थापित करण्यास सक्षम करते. हे तुम्हाला मॉडेल आणि व्ह्यू दरम्यान डेटा डायनॅमिकली अपडेट आणि सिंक्रोनाइझ करण्याची परवानगी देते, एक अखंड आणि प्रतिक्रियाशील वापरकर्ता अनुभव प्रदान करते.
Vue.js मध्ये, अनेक प्रकार data binding उपलब्ध आहेत:
१. Interpolation
Interpolation {{ }}
Vue.js मध्ये तुम्हाला टेम्प्लेटमधील दुहेरी कर्ली ब्रेसेसमध्ये एक्सप्रेशन एम्बेड करण्याची परवानगी मिळते .
उदाहरण:
वरील उदाहरणात, message
घटकाचा डेटा गुणधर्म आहे. जेव्हा मूल्य message
बदलते, तेव्हा टॅगमधील सामग्री <p>
स्वयंचलितपणे अद्यतनित केली जाईल.
2. One-Way Binding
One-Way Binding तुम्हाला घटकाच्या डेटा गुणधर्मातील डेटा वापरकर्ता इंटरफेसमध्ये बांधण्याची परवानगी देते. डेटा मालमत्तेतील कोणतेही बदल वापरकर्ता इंटरफेसमध्ये प्रतिबिंबित होतील, परंतु त्याउलट नाही. उदाहरण:
जेव्हा "अपडेट" बटण क्लिक केले जाते, तेव्हा चे मूल्य message
बदलेल आणि वापरकर्ता इंटरफेसमध्ये प्रदर्शित होईल.
3. Two-Way Binding
Two-Way Binding तुम्हाला मॉडेल आणि यूजर इंटरफेस दरम्यान डेटा सिंक्रोनाइझ करण्याची परवानगी देते. जेव्हा मॉडेल किंवा यूजर इंटरफेसमध्ये डेटा बदलतो तेव्हा दोन्ही आपोआप अपडेट होतील.
उदाहरण:
वरील उदाहरणामध्ये, इनपुटमध्ये प्रविष्ट केलेले मूल्य व्हेरिएबलमध्ये अद्यतनित केले जाईल message
आणि त्याउलट, message
बदल झाल्यास, इनपुटमधील मूल्य देखील अद्यतनित केले जाईल.
4. Computed Properties
गणना केलेले गुणधर्म तुम्हाला घटकातील इतर डेटा गुणधर्मांवर आधारित मूल्यांची गणना करण्यास अनुमती देतात.
उदाहरण:
वरील उदाहरणामध्ये, fullName
गणना केलेली मालमत्ता आहे firstName
आणि lastName
. केव्हा firstName
किंवा lastName
बदल, fullName
देखील अद्यतनित केले जाईल.
५. Watchers:
Watchers तुम्हाला विशिष्ट डेटा गुणधर्म बदलांचे निरीक्षण करण्याची आणि जेव्हा बदल होतो तेव्हा असिंक्रोनस किंवा जटिल क्रिया करण्यास अनुमती देते.
उदाहरण:
वरील उदाहरणामध्ये, जेव्हा जेव्हा मूल्य count
बदलते तेव्हा निरीक्षक ट्रिगर होईल आणि संबंधित क्रिया करेल.
या तंत्रांचा वापर करून Data Binding, तुम्ही मॉडेल आणि वापरकर्ता इंटरफेस यांच्यात सरळ आणि कार्यक्षम पद्धतीने डेटा सहजपणे व्यवस्थापित आणि सिंक्रोनाइझ करण्यासाठी Vue.js च्या लवचिकतेचा लाभ घेऊ शकता.
या तंत्रांचा वापर करून data binding, तुम्ही तुमच्या Vue.js ऍप्लिकेशन्समध्ये डायनॅमिक आणि परस्परसंवादी वापरकर्ता इंटरफेस तयार करू शकता. Vue.js एक शक्तिशाली आणि लवचिक data binding प्रणाली प्रदान करते जी डेटा व्यवस्थापित आणि अद्यतनित करण्याची प्रक्रिया सुलभ करते. चला या प्रत्येक data binding पध्दतीचे अन्वेषण करूया आणि ते तुमच्या Vue.js प्रकल्पांमध्ये कसे लागू केले जाऊ शकतात ते पाहू या.