Vue.js
अनिवार्य तथ्य

टेक्स्ट

डेटा बाइंडिंग का सबसे मूल रूप "मूंछ" सिंटैक्स (डबल घुंघराले ब्रेस) का उपयोग करके पाठ प्रक्षेप है:

<span>Message: {{ msg }}</span>

मूंछ टैग को इसी डेटा ऑब्जेक्ट पर msg संपत्ति के मूल्य के साथ बदल दिया जाएगा। जब भी डेटा ऑब्जेक्ट का msg गुण बदलता है तो उसे भी अपडेट किया जाएगा।

आप एक बार के प्रक्षेप भी कर सकते हैं जो डेटा परिवर्तन पर अद्यतन नहीं करते हैं:

<span>This will never change: {{* msg }}</span>

कच्चा HTML

डबल मूंछें डेटा की व्याख्या सादे पाठ के रूप में करती हैं, HTML की नहीं। वास्तविक HTML आउटपुट करने के लिए, आपको ट्रिपल मूंछों का उपयोग करना होगा:

<div>{{{ raw_html }}}</div>

सामग्री को सादे HTML के रूप में डाला जाता है - डेटा बाइंडिंग को अनदेखा किया जाता है। यदि आपको टेम्पलेट के टुकड़ों का पुन: उपयोग करने की आवश्यकता है, तो आपको भाग का उपयोग करना चाहिए।

गुण

HTML विशेषताओं के अंदर भी मूंछें इस्तेमाल की जा सकती हैं:

<div id="item-{{ id }}"></div>

ध्यान दें कि विशेषता प्रक्षेपों को Vue.js निर्देशों और विशेष विशेषताओं में अस्वीकृत कर दिया जाता है। चिंता न करें, Vue.js आपके लिए चेतावनी बढ़ाएंगे जब मूंछें गलत स्थानों पर उपयोग की जाती हैं।

फिल्टर

Vue.js आपको "पाइप" प्रतीक द्वारा निरूपित एक अभिव्यक्ति के अंत में वैकल्पिक "फिल्टर" संलग्न करने की अनुमति देता है:

{{ message | capitalize }}

यहां हम अंतर्निहित capitalize फिल्टर के माध्यम से message अभिव्यक्ति का मूल्य "पाइपिंग" कर रहे हैं, जो वास्तव में केवल एक जावास्क्रिप्ट फ़ंक्शन है जो पूंजीकृत मान लौटाता है। Vue.js बिल्ट-इन फिल्टर्स की एक संख्या प्रदान करता है, और हम इस बारे में बात करेंगे कि बाद में अपने फ़िल्टर कैसे लिखें।

ध्यान दें कि पाइप सिंटैक्स जावास्क्रिप्ट सिंटैक्स का हिस्सा नहीं है, इसलिए आप अभिव्यक्तियों के अंदर फ़िल्टर नहीं मिला सकते हैं; आप केवल एक अभिव्यक्ति के अंत में उन्हें जोड़ सकते हैं।

फिल्टर जंजीर कर सकते हैं:

{{ message | filterA | filterB }}

फिल्टर भी ले सकते हैं तर्क:

{{ message | filterA 'arg1' arg2 }}

फ़िल्टर फ़ंक्शन हमेशा पहले तर्क के रूप में अभिव्यक्ति का मूल्य प्राप्त करता है। उद्धृत तर्कों को सादे स्ट्रिंग के रूप में व्याख्या की जाती है, जबकि अन-कोटेड का मूल्यांकन अभिव्यक्ति के रूप में किया जाएगा। यहां, सादे स्ट्रिंग 'arg1' को दूसरे तर्क के रूप में फ़िल्टर में पारित किया जाएगा, और अभिव्यक्ति arg2 के मूल्य का मूल्यांकन किया जाएगा और तीसरे तर्क के रूप में पारित किया जाएगा।