यहाँ आपको Vue में डेटा बाइंडिंग के बारे में जानने की आवश्यकता है

वेब ऐप्स में बाइंडिंग डेटा ऐप के इंस्टेंस और UI (यूज़र इंटरफ़ेस) के बीच एक लिंक बनाता है। ऐप का इंस्टेंस डेटा, व्यवहार और घटकों का प्रबंधन करता है, जबकि UI उस विज़ुअल पहलू का प्रतिनिधित्व करता है जिसके साथ उपयोगकर्ता इंटरैक्ट करते हैं। बाध्यकारी डेटा आपको गतिशील वेब ऐप्स बनाने की अनुमति देता है।

यहाँ, आप Vue में विभिन्न बाइंडिंग के बारे में जानेंगे, जिसमें वन-वे और टू-वे बाइंडिंग शामिल हैं। आप इन बाइंडिंग को मूंछ वाले टेम्प्लेट और निर्देशों जैसे वी-बाइंड और वी-मॉडल के साथ लागू करना भी सीखेंगे।

Vue में इंटरपोलेशन

प्रक्षेप Vue के सबसे लोकप्रिय प्रकार के डेटा बाइंडिंग में से एक है। इंटरपोलेशन आपको अपने हाइपर टेक्स्ट मार्कअप लैंग्वेज (एचटीएमएल) टैग्स में मूंछ टेम्पलेट के साथ डेटा मान प्रदर्शित करने की अनुमति देता है, जिसे लोकप्रिय रूप से डबल कर्ली ब्रेसेस ({{ }}).

मूंछ टेम्पलेट के साथ, आप गतिशील ऐप सामग्री जैसे डेटा और विधि गुणों को अपने HTML में एकीकृत कर सकते हैं। आप इसे डेटा या विधि गुण नामों से संलग्न करके प्राप्त कर सकते हैं Vue में विकल्प वस्तु इन घुंघराले ब्रेसिज़ के भीतर।

यहाँ Vue में प्रक्षेप प्राप्त करने के लिए मूंछ टेम्पलेट का उपयोग करने वाले Vue ऐप का एक उदाहरण दिया गया है:

<शरीर>
<डिवपहचान="अनुप्रयोग">
<एच 1>{{ शीर्षक }}एच 1>
<पी>{{text.toUpperCase ()}}पी>
डिव>
<लिखी हुई कहानी>
 const ऐप = Vue.createApp({
 आंकड़े() {
 वापस करना {
 शीर्षक: "स्वागत है",
 टेक्स्ट: "यह आपकी दुनिया है?",
 };
 },
 });
 ऐप.माउंट ("#ऐप");
लिखी हुई कहानी>
शरीर>

उपरोक्त कोड ब्लॉक Vue ऐप के डेटा ऑब्जेक्ट में शीर्षक गुण का मान प्रदर्शित करने के लिए मूंछ टेम्पलेट का उपयोग करता है। आप प्रक्षेप के साथ जावास्क्रिप्ट अभिव्यक्ति परिणाम भी प्रदर्शित कर सकते हैं। उदाहरण के लिए, द {{text.toUpperCase()}} अभिव्यक्ति में पी टैग पाठ मान के अपरकेस संस्करण को प्रदर्शित करता है, जैसा कि नीचे दी गई छवि में दिखाया गया है:

जब आप एक Vue ऐप को माउंट करते हैं, तो Vue टेम्प्लेट में भावों का मूल्यांकन करता है और परिणामी मानों को HTML बॉडी में रेंडर करता है। डेटा गुणों में कोई भी परिवर्तन UI में संबंधित मानों को अद्यतन करता है।

उदाहरण के लिए:

<लिखी हुई कहानी>
 const ऐप = Vue.createApp({
 आंकड़े() {
 वापस करना {
 शीर्षक: "हैलो",
 टेक्स्ट: "यह आपकी दुनिया है?",
 };
 },
 });
 ऐप.माउंट ("#ऐप");
लिखी हुई कहानी>

उपरोक्त कोड ब्लॉक शीर्षक गुण को "में बदल देता है"नमस्ते". यह परिवर्तन स्वचालित रूप से UI में दिखाई देगा क्योंकि Vue ऐप टाइटल प्रॉपर्टी को UI तत्व से बांधता है, जैसा कि नीचे दिखाया गया है:

इंटरपोलेशन केवल डेटा को आउटपुट करता है जब डबल कर्ली ब्रैकेट HTML टैग्स को खोलने और बंद करने के बीच होते हैं।

वी-बाइंड डायरेक्टिव के साथ वन वे डेटा बाइंडिंग

इंटरपोलेशन की तरह, वन-वे डेटा बाइंडिंग ऐप के इंस्टेंस को UI से लिंक करता है। अंतर यह है कि यह डेटा और विधियों जैसे गुणों को HTML विशेषताओं से बांधता है।

वन-वे डेटा बाइंडिंग डेटा के एक-दिशात्मक प्रवाह का समर्थन करता है, उपयोगकर्ताओं को ऐसे परिवर्तन करने से रोकता है जो ऐप के इंस्टेंस पर डेटा गुणों को प्रभावित करते हैं। यह तब उपयोगी होता है जब आप ऐप उपयोगकर्ता को डेटा प्रदर्शित करना चाहते हैं लेकिन उपयोगकर्ता को इसे संशोधित करने से रोकते हैं।

आप Vue में वन-वे डेटा बाइंडिंग प्राप्त कर सकते हैं वि बाँध निर्देश या इसका आशुलिपि चरित्र (:):

 वी-बाइंड निर्देश 
<इनपुटप्रकार="मूलपाठ"वी-बाइंड: मान="मूलपाठ">
: आशुलिपि चरित्र 
<इनपुटप्रकार="मूलपाठ":कीमत="मूलपाठ">

कोड ब्लॉक इनपुट HTML टैग के मान को टेक्स्ट डेटा प्रॉपर्टी से बाइंड करने के लिए v-बाइंड डायरेक्टिव और उसके शॉर्टहैंड के उपयोग को दर्शाता है। यहाँ Vue ऐप का उपयोग करने का एक उदाहरण दिया गया है वि बाँध एक तरफ़ा डेटा बाइंडिंग प्राप्त करने का निर्देश:

<शरीर>
<डिवपहचान="अनुप्रयोग">
<इनपुटप्रकार="मूलपाठ"वी-बाइंड: मान="मूलपाठ">
<पी>{{ मूलपाठ }}पी>
डिव>
<लिखी हुई कहानी>
 const ऐप = Vue.createApp({
 आंकड़े() {
 वापस करना {
 पाठ: 'Vue बहुत बढ़िया है!'
 }
 }
 })
 ऐप.माउंट ('#ऐप')
लिखी हुई कहानी>
शरीर>

ऊपर, एक इनपुट फ़ील्ड और एक पैराग्राफ तत्व का मान प्रदर्शित करता है मूलपाठ संपत्ति। कीमत इनपुट फ़ील्ड की विशेषता का उपयोग कर टेक्स्ट प्रॉपर्टी के लिए बाध्य है वि बाँध निर्देश।

यह कोड ब्लॉक वन-वे बाइंडिंग बनाता है, जहाँ इसमें परिवर्तन होता है मूलपाठ संपत्ति इनपुट फ़ील्ड के मान को अपडेट करेगी, लेकिन इनपुट फ़ील्ड में किए गए परिवर्तन अपडेट नहीं होंगे मूलपाठ Vue ऐप के उदाहरण में संपत्ति।

इसे दिखाने के लिए, हम के प्रारंभिक मूल्य से शुरू कर सकते हैं मूलपाठ संपत्ति, "वू कमाल है!":

इनपुट फ़ील्ड के मान को "में बदलने के बाद"हैलो वर्ल्ड!", ध्यान दें कि Vue ऐप अपडेट नहीं किया गया था, और पैराग्राफ़ टैग में टेक्स्ट वही बना रहा:

हालाँकि, जब हम का मान बदलते हैं मूलपाठ संपत्ति को हैलो वर्ल्ड! इनपुट फ़ील्ड के बजाय Vue ऐप इंस्टेंस में, नए मान को दर्शाने के लिए इनपुट फ़ील्ड अपडेट हो जाता है:

डेटा को बाइंड करने का यह तरीका उन परिदृश्यों में आसान है जहाँ आप उपयोगकर्ता को डेटा प्रदर्शित करना चाहते हैं लेकिन उपयोगकर्ता को इसे सीधे संशोधित करने से रोकते हैं। Vue.js में v-bind का लाभ उठाकर, आप एक तरफ़ा बाइंडिंग स्थापित कर सकते हैं, आसानी से अपने ऐप के डेटा को UI तत्वों से जोड़ सकते हैं।

वी-मॉडल डायरेक्टिव के साथ टू वे डेटा बाइंडिंग

दो-तरफ़ा डेटा बाइंडिंग UI तत्व के मान में परिवर्तन को अंतर्निहित डेटा मॉडल में स्वचालित रूप से प्रतिबिंबित करने की अनुमति देता है और इसके विपरीत। अधिकांश फ्रंट-एंड जावास्क्रिप्ट ढांचे पसंद कोणीय दो तरफा बंधन का उपयोग करता है डेटा साझा करने और वास्तविक समय की घटनाओं को संभालने के लिए।

Vue.js के साथ दो-तरफ़ा बंधन संभव बनाता है वि मॉडल निर्देश। वि मॉडल निर्देश एक फॉर्म इनपुट तत्व और डेटा प्रॉपर्टी के बीच दो-तरफ़ा डेटा बाइंडिंग बनाता है। जब आप एक इनपुट तत्व में टाइप करते हैं, तो मूल्य स्वचालित रूप से डेटा गुण में अपडेट हो जाता है, और डेटा गुण में कोई भी परिवर्तन इनपुट तत्व को भी अद्यतन कर देगा।

यहाँ एक Vue ऐप का उदाहरण दिया गया है जो इसका उपयोग करता है वि मॉडल दो-तरफ़ा डेटा बाइंडिंग प्राप्त करने का निर्देश:

<सिर>
<शीर्षक>Vue में टू-वे डेटा बाइंडिंगशीर्षक>
<लिखी हुई कहानीस्रोत=" https://unpkg.com/vue@3/dist/vue.global.js">लिखी हुई कहानी>
सिर>
<शरीर>
<डिवपहचान="अनुप्रयोग">
<इनपुटप्रकार="मूलपाठ"वि मॉडल="मूलपाठ">
<पी>{{ मूलपाठ }}पी>
डिव>
<लिखी हुई कहानी>
 const ऐप = Vue.createApp({
 आंकड़े() {
 वापस करना {
 पाठ: 'Vue बहुत बढ़िया है!'
 }
 }
 })
 ऐप.माउंट ('#ऐप')
लिखी हुई कहानी>
शरीर>

उपरोक्त कोड ब्लॉक में एक इनपुट तत्व है वि मॉडल इसे बाध्य करने का निर्देश मूलपाठ डेटा संपत्ति। मूलपाठ संपत्ति शुरू में सेट है "वू कमाल है!".

जब आप इसमें टाइप करते हैं तो इनपुट फ़ील्ड टेक्स्ट प्रॉपर्टी को अपडेट करता है और टेक्स्ट प्रॉपर्टी में बदलावों को दर्शाता है पी उपनाम। Vue.js टू-वे डेटा बाइंडिंग प्राप्त करने के लिए वी-मॉडल निर्देश और इनपुट तत्व का उपयोग करता है।

जबकि वी-बाइंड वीयू ऐप से यूआई तक एक-दिशात्मक संचार की अनुमति देता है, वी-मॉडल वीयू ऐप और यूआई के बीच द्विदिश संचार प्रदान करता है। द्विदिश संचार को सक्षम करने की अपनी क्षमता के कारण, वि मॉडल Vue में प्रपत्र तत्वों के साथ काम करते समय अक्सर उपयोग किया जाता है।

Vue ऐप्स बनाने में अपनी विशेषज्ञता का विस्तार करें

आपने वीयू में डेटा बाइंडिंग के बारे में सीखा, जिसमें इंटरपोलेशन और वी-बाइंड और वी-मॉडल निर्देश शामिल हैं। ये डेटा बाइंडिंग आवश्यक हैं, क्योंकि वे Vue ऐप्स के आधार के रूप में काम करते हैं।

उपयोग के मामलों के लिए Vue के कई अन्य निर्देश हैं, जैसे सूची रेंडरिंग, ईवेंट बाइंडिंग और सशर्त रेंडरिंग। Vue निर्देशों को समझने से आपको अपने वेब एप्लिकेशन के लिए एक गतिशील और इंटरैक्टिव फ्रंट-एंड बनाने में मदद मिलती है।