इंटरपोलेशन और डायरेक्टिव
टेम्पलेट में मस्टैश इंटरपोलेशन और मुख्य डायरेक्टिव का उपयोग कीजिए
इंटरपोलेशन और डायरेक्टिव, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 3 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Vue Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Vue Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
टेम्पलेट सिंटैक्स का अवलोकन
Vue टेम्पलेट विशेष सिंटैक्स से बेहतर बनाए गए मान्य HTML होते हैं:
- टेक्स्ट के लिए Mustache इंटरपोलेशन
- व्यवहार के लिए निर्देश (v- प्रीफ़िक्स वाले एट्रिब्यूट)
Vue इन्हें कुशल रेंडर फ़ंक्शन में कंपाइल करता है।
Mustache इंटरपोलेशन
दोहरी घुंघराली ब्रेस, यानी Mustache सिंटैक्स, टेक्स्ट दिखाता है।
इसकी सामग्री केवल किसी चर का नाम नहीं, बल्कि JavaScript एक्सप्रेशन होती है।
<span>Hello, {{ userName }}</span>
<span>{{ price * quantity }}</span>
<span>{{ isActive ? "On" : "Off" }}</span>एट्रिब्यूट के लिए v-bind
HTML एट्रिब्यूट के भीतर Mustache काम नहीं करता। किसी एट्रिब्यूट में डेटा बाइंड करने के लिए v-bind का उपयोग करें।
<a v-bind:href="profileUrl">Profile</a>
<img v-bind:src="imagePath" v-bind:alt="caption" />
<button v-bind:disabled="isLoading">Submit</button>v-bind का संक्षिप्त रूप
v-bind इतना सामान्य है कि इसका एक संक्षिप्त रूप भी है: केवल कोलन।
<!-- Full syntax -->
<a v-bind:href="url">Link</a>
<!-- Shorthand -->
<a :href="url">Link</a>इवेंट के लिए v-on
v-on निर्देश DOM इवेंट सुनता है और हैंडलर चलाता है।
<button v-on:click="handleClick">Click me</button>
<input v-on:input="onType" />
<form v-on:submit="onSubmit">...</form>v-on का संक्षिप्त रूप
v-on का भी एक संक्षिप्त रूप है: at चिह्न।
<!-- Full syntax -->
<button v-on:click="save">Save</button>
<!-- Shorthand -->
<button @click="save">Save</button>इनलाइन बनाम विधि हैंडलर
इवेंट हैंडलर इनलाइन एक्सप्रेशन या विधि के नाम हो सकते हैं।
<!-- Inline expression -->
<button @click="count++">Add</button>
<!-- Method handler -->
<button @click="increment">Add</button>
<!-- Inline with the event object -->
<button @click="log($event)">Log</button>v-text
v-text निर्देश किसी तत्व की टेक्स्ट सामग्री सेट करता है। यह Mustache के समतुल्य है।
<!-- These two are equivalent -->
<span v-text="message"></span>
<span>{{ message }}</span>v-html
v-html निर्देश किसी स्ट्रिंग को एस्केप किए गए टेक्स्ट के बजाय वास्तविक HTML के रूप में रेंडर करता है।
<div v-html="rawHtml"></div>
<!-- If rawHtml = "<b>Bold</b>",
it renders actual bold text -->v-html और XSS में सावधानी
चेतावनी: अविश्वसनीय सामग्री के साथ v-html खतरनाक है।
- यह हानिकारक स्क्रिप्ट डाल सकता है (XSS हमले)
- इसका उपयोग केवल ऐसी सामग्री पर करें जिस पर आपको पूरा भरोसा हो
- उपयोगकर्ता द्वारा भेजे गए HTML को सीधे कभी रेंडर न करें
सामान्य टेक्स्ट के लिए हमेशा Mustache इंटरपोलेशन को प्राथमिकता दें, जो HTML को एस्केप करता है।
निर्देशों के आर्ग्युमेंट
कुछ निर्देश कोलन के बाद एक आर्ग्युमेंट लेते हैं, जैसे यह बताने के लिए कि कौन-सा एट्रिब्यूट या इवेंट उपयोग करना है।
<!-- argument is the attribute name -->
<a :href="url">Link</a>
<!-- argument is the event name -->
<button @click="run">Run</button>
<!-- dynamic argument -->
<a :[attrName]="value">Dynamic</a>त्वरित जाँच
इंटरपोलेशन और निर्देशों के बारे में अपनी समझ का परीक्षण करें।
पुनरावलोकन: इंटरपोलेशन और निर्देश
आपने Vue टेम्पलेट की मूल बातें सीखीं:
- {{ }} Mustache टेक्स्ट एक्सप्रेशन दिखाता है
- v-bind (संक्षिप्त रूप :) एट्रिब्यूट को बाइंड करता है
- v-on (संक्षिप्त रूप @) इवेंट संभालता है
- v-text टेक्स्ट सामग्री सेट करता है
- v-html कच्चा HTML रेंडर करता है (XSS का जोखिम, सावधानी से उपयोग करें)
अगला विषय: सशर्त रेंडरिंग और लूप।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 42
- पाठ
- 156
अक्सर पूछे जाने वाले प्रश्न
क्या “इंटरपोलेशन और डायरेक्टिव” पाठ निःशुल्क है?
हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “इंटरपोलेशन और डायरेक्टिव” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
“इंटरपोलेशन और डायरेक्टिव” में मैं क्या सीखूँगा?
टेम्पलेट में मस्टैश इंटरपोलेशन और मुख्य डायरेक्टिव का उपयोग कीजिए आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Vue Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Vue Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 1वाँ पाठ है।
“इंटरपोलेशन और डायरेक्टिव” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Vue Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Vue Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- इंटरपोलेशन और डायरेक्टिव
- कंडीशनल और लूप
- एट्रिब्यूट और क्लास बाइंडिंग