Data Binding Vue.js मा एक आधारभूत सुविधा हो जसले तपाइँलाई तपाइँको एप्लिकेसन र प्रयोगकर्ता इन्टरफेस मा डाटा बीच जडान स्थापित गर्न सक्षम बनाउँछ। यसले तपाईंलाई गतिशील रूपमा मोडेल र दृश्यको बीचमा डाटा सिङ्क्रोनाइज गर्न, सहज र प्रतिक्रियाशील प्रयोगकर्ता अनुभव प्रदान गर्न अनुमति दिन्छ।
Vue.js मा, त्यहाँ धेरै प्रकारहरू data binding उपलब्ध छन्:
१. Interpolation
Interpolation {{ }}
Vue.js मा तपाईंलाई टेम्प्लेटमा डबल घुमाउरो कोष्ठकहरू भित्र अभिव्यक्तिहरू इम्बेड गर्न अनुमति दिन्छ ।
उदाहरण:
माथिको उदाहरणमा, message
कम्पोनेन्टको डेटा गुण हो। जब मूल्य message
परिवर्तन हुन्छ, ट्याग भित्रको सामग्री <p>
स्वचालित रूपमा अद्यावधिक हुनेछ।
२. One-Way Binding
One-Way Binding तपाइँलाई कम्पोनेन्टको डाटा गुणबाट प्रयोगकर्ता इन्टरफेसमा डाटा बाँध्न अनुमति दिन्छ। डाटा गुणमा कुनै पनि परिवर्तन प्रयोगकर्ता इन्टरफेसमा प्रतिबिम्बित हुनेछ, तर वरपर अन्य तरिका होइन। उदाहरण:
जब "अपडेट" बटन क्लिक गरिन्छ, को मान message
परिवर्तन हुनेछ र प्रयोगकर्ता इन्टरफेसमा प्रदर्शित हुनेछ।
३. Two-Way Binding
Two-Way Binding मोडेल र प्रयोगकर्ता इन्टरफेस बीच डेटा सिङ्क्रोनाइज गर्न अनुमति दिन्छ। जब डेटा मोडेल वा प्रयोगकर्ता इन्टरफेसमा परिवर्तन हुन्छ, दुबै स्वचालित रूपमा अपडेट हुनेछन्।
उदाहरण:
माथिको उदाहरणमा, इनपुटमा प्रविष्ट गरिएको मान चरमा अद्यावधिक हुनेछ message
, र यसको विपरीत, यदि message
परिवर्तन भयो भने, इनपुटमा मान पनि अद्यावधिक हुनेछ।
४। 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 परियोजनाहरूमा लागू गर्न सकिन्छ।