पिछले ब्लॉग/लेख में, हमने सीखा कि घटकों को कैसे बनाया जाए, आयात किया जाए और उनका उपयोग कैसे किया जाए। इस बार, हम घटकों में डेटा बाइंडिंग का पता लगाएंगे।

घटकों के भीतर डेटा का उपयोग करना

एक घटक में डेटा को परिभाषित करना
डेटा को डेटा() फ़ंक्शन में परिभाषित किया गया है और एक ऑब्जेक्ट के रूप में लौटाया गया है।
यहाँ एक उदाहरण है:

data() {
  return {
    message: 'Hello World!'
  };
}

निर्देशों के साथ बंधन

वी-बाइंड: HTML विशेषताओं को डेटा से बांधें।

वी-मॉडल: वी-मॉडल निर्देश का उपयोग फॉर्म इनपुट पर दो-तरफ़ा डेटा बाइंडिंग के लिए किया जाता है। यह इनपुट मान को Vue इंस्टेंस डेटा के साथ समन्वयित रखता है। अनिवार्य रूप से, वी-मॉडल @input (जो परिवर्तनों को सुनता है) और :value (जो इनपुट मान सेट करता है) को जोड़ता है। उदाहरण के लिए:

यह इसके बराबर है:

यहां बताया गया है कि आप :value और @input को अलग-अलग कैसे उपयोग कर सकते हैं:

v-if निर्देश सशर्त रूप से बूलियन मान के आधार पर तत्वों को प्रस्तुत करता है। यदि शर्त सत्य है, तो तत्व प्रस्तुत किया जाएगा; यदि गलत है, तो यह नहीं होगा। उदाहरण के लिए:

This is visible!

v-for निर्देश का उपयोग तत्वों को प्रस्तुत करने के लिए किसी सरणी या ऑब्जेक्ट के माध्यम से लूप करने के लिए किया जाता है। बेहतर प्रदर्शन के लिए प्रत्येक तत्व को एक अद्वितीय कुंजी दी जा सकती है। उदाहरण के लिए:

• {{ item.name }}

वी-ऑन
वी-ऑन निर्देश का उपयोग तत्वों पर घटनाओं को सुनने के लिए किया जाता है। सुविधा के लिए आप शॉर्टहैंड @ का उपयोग कर सकते हैं। उदाहरण के लिए:

Click me!

इसे छोटा किया जा सकता है:

Click me!