Vue.js मुख्य रूप से एप्लिकेशन के विज़ुअलाइज़ेशन भाग पर केंद्रित है, जिसे फ्रंट-एंड डेवलपमेंट भी कहा जाता है। Vue.js दिन-ब-दिन लोकप्रिय हो रहा है क्योंकि इसे अन्य परियोजनाओं और पुस्तकालयों के साथ एकीकृत करना बहुत आसान है। इसे स्थापित करना और उपयोग करना बहुत आसान है।
Vue.js एक प्रगतिशील जावास्क्रिप्ट ढांचा है खुला स्रोत इंटरैक्टिव वेब यूजर इंटरफेस और सिंगल पेज एप्लिकेशन (एसपीए) विकसित करने के लिए उपयोग किया जाता है। Vue.js को आमतौर पर Vue कहा जाता है और इसका उच्चारण "view.js" या "view" के रूप में किया जाता है।
एक सिंगल पेज एप्लिकेशन या एसपीए एक वेब एप्लिकेशन या वेबसाइट है जो उपयोगकर्ताओं को डेस्कटॉप एप्लिकेशन के समान एक बहुत ही सहज, उत्तरदायी और तेज़ अनुभव प्रदान करती है। एक पृष्ठ के अनुप्रयोग में एक ही पृष्ठ पर एक मेनू, बटन और ब्लॉक होते हैं। जब कोई उपयोगकर्ता उनमें से किसी एक पर क्लिक करता है, तो यह सर्वर से पूरे नए पृष्ठ लोड करने के बजाय गतिशील रूप से वर्तमान पृष्ठ को फिर से लिखता है। इसकी उत्तरदायी गति के पीछे यही कारण है।
Vue मूल रूप से फ्रंटएंड डेवलपमेंट के लिए बनाया गया है, इसलिए इसे बहुत सारी HTML, JavaScript और CSS फ़ाइलों को संभालना पड़ता है। Vue.js उपयोगकर्ताओं के लिए निर्देश नामक HTML विशेषताओं के साथ HTML का विस्तार करना आसान बनाता है। Vue.js अंतर्निहित निर्देश और कई निर्देश प्रदान करता है defiHTML अनुप्रयोगों की कार्यक्षमता में सुधार के लिए उपयोगकर्ता द्वारा नाइट।
नीचे Vue.js की सबसे महत्वपूर्ण विशेषताओं की सूची दी गई है:
Vue.js घटक इस ढांचे की महत्वपूर्ण विशेषताओं में से एक हैं। वे पुन: प्रयोज्य कोड को समाहित करने के लिए मूल HTML तत्वों का विस्तार करने के लिए उपयोग किए जाते हैं। आप Vue.js अनुप्रयोगों में पुन: प्रयोज्य कस्टम तत्व बना सकते हैं जिन्हें बाद में HTML में पुन: उपयोग किया जा सकता है।
Vue.js HTML-आधारित टेम्प्लेट प्रदान करता है जिसका उपयोग प्रदान किए गए DOM को Vue उदाहरण डेटा के साथ जोड़ने के लिए किया जा सकता है। सभी Vue टेम्प्लेट मान्य HTML हैं जिन्हें विशिष्ट-अनुरूप ब्राउज़रों और HTML पार्सर्स द्वारा पार्स किया जा सकता है। Vue.js मॉडल को वर्चुअल DOM रेंडरिंग फ़ंक्शंस में संकलित करता है। ब्राउज़र को रीफ्रेश करने से पहले Vue घटकों को वर्चुअल DOM मेमोरी में रेंडर करता है। Vue फिर से प्रस्तुत करने के लिए घटकों की न्यूनतम संख्या की गणना भी कर सकता है और आवेदन की स्थिति बदलते समय DOM हेरफेर की न्यूनतम मात्रा को लागू कर सकता है।
Vue एक रिस्पॉन्सिबिलिटी सिस्टम प्रदान करता है जो सरल जावास्क्रिप्ट ऑब्जेक्ट्स का उपयोग करता है और री-रेंडरिंग को ऑप्टिमाइज़ करता है। इस प्रक्रिया में, प्रत्येक घटक अपनी प्रतिक्रियाशील निर्भरता का ट्रैक रखता है, इसलिए सिस्टम को ठीक से पता होता है कि कब और किन घटकों को फिर से प्रस्तुत करना है।
पेज नेविगेशन vue-router की मदद से किया जाता है। आप अपने सिंगल पेज एप्लिकेशन के लिए आधिकारिक तौर पर समर्थित वीयू-राउटर लाइब्रेरी का उपयोग कर सकते हैं।
जब तत्व डाले जाते हैं, अद्यतन किए जाते हैं या DOM से निकाले जाते हैं, तो Vue आपको विभिन्न संक्रमण प्रभावों का उपयोग करने की अनुमति देता है।
Vue.js का उपयोग करने के कई तरीके हैं। आप इसकी आधिकारिक साइट पर जाकर इसे स्थापित कर सकते हैं या आप सीडीएन लाइब्रेरी से भी Vue.js फ़ाइल का उपयोग शुरू कर सकते हैं। अपने प्रोजेक्ट में Vue.js का उपयोग करने के कुछ तरीके यहां दिए गए हैं।
अगर आप टैग का उपयोग करना चाहते हैं <script> Vue.js सीधे आपकी HTML फ़ाइल में, आपको इसे आधिकारिक वेबसाइट से डाउनलोड करना होगा।
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> आइए Vue.js की आधिकारिक वेबसाइट पर जाएं https://vuejs.org/v2/guide/installation.html अपनी आवश्यकताओं के अनुसार vue.js डाउनलोड करने के लिए।
आप अपने आवेदन में सीडीएन से वीयू.जेएस फ़ाइल का भी उपयोग कर सकते हैं। तत्व के अंदर https://unpkg.com/vue@3/dist/vue.global.js लिंक का उपयोग करें <script>, नीचे के अनुसार:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js वेब विकास और सिंगल पेज एप्लिकेशन (एसपीए) के निर्माण के लिए व्यापक रूप से उपयोग की जाने वाली नवीनतम सॉफ्टवेयर तकनीकों में से एक है। जैसा कि आप नाम से अनुमान लगा सकते हैं, यह ज्यादातर यूआई या प्रोजेक्ट के डिस्प्ले साइड के लिए उपयोग किया जाता है।
आइए अपने प्रोजेक्ट में Vue.js का उपयोग करने के लाभ देखें:
Vue.js का एक सबसे बड़ा लाभ यह है कि यह आकार में बहुत छोटा है। जावास्क्रिप्ट ढांचे की सफलता इसके आकार पर बहुत कुछ निर्भर करती है और यह रोमांचक जावास्क्रिप्ट प्लगइन केवल 18-21 केबी है, इसलिए आप इसे बहुत आसानी से डाउनलोड और उपयोग कर सकते हैं।
Vue.js ढांचे की एक बहुत ही सरल संरचना है और इसे समझना बहुत आसान है। यह इस ढांचे की लोकप्रियता के कारणों में से एक है। यदि आप HTML और JavaScript से परिचित हैं, तो आप आसानी से Vue.js में कोड कर सकते हैं। उपयोगकर्ता इसकी सरल संरचना और विकसित अनुप्रयोगों के कारण आसानी से Vue.js को अपने वेब प्रोजेक्ट में जोड़ सकते हैं।
Vue.js में हर चीज के लिए कई घटक हैं और मौजूदा अनुप्रयोगों के साथ बहुत जल्दी एकीकृत किए जा सकते हैं। आप इसे जावास्क्रिप्ट में लिखे किसी भी एप्लिकेशन के साथ एकीकृत कर सकते हैं।
Vue.js की लचीली प्रकृति भी React.js, Angular.js, और किसी भी अन्य नए JavaScript फ्रेमवर्क के डेवलपर्स को समझने में आसान बनाती है। यह HTML फ़ाइलों, जावास्क्रिप्ट फ़ाइलों और शुद्ध जावास्क्रिप्ट फ़ाइलों को लिखने के लिए वर्चुअल नोड्स का उपयोग करने के लिए बहुत अधिक लचीलापन प्रदान करता है।
आप कस्टम तत्व बना सकते हैं जो Vue.js अनुप्रयोगों में पुन: प्रयोज्य हैं।
Vue.js बहुत ही सरल, पूर्ण और विस्तृत प्रलेखन प्रदान करता है, इसलिए जिन डेवलपर्स को HTML और जावास्क्रिप्ट के बारे में कम जानकारी है, वे इसे प्रोग्राम करने के लिए उपयोग कर सकते हैं।
Vue.js अन्य मौजूदा फ्रेमवर्क जैसे ReactJS, Ember, आदि के समान वर्चुअल DOM का उपयोग करता है। वर्चुअल DOM मूल HTML DOM का हल्का इन-मेमोरी ट्री प्रतिनिधित्व है और प्रारंभिक DOM को प्रभावित किए बिना अपडेट किया जाता है।
Vue.js अपने मॉडल व्यू व्यू मॉडल (एमवीवीएम) आर्किटेक्चर के साथ दो-तरफा संचार प्रदान करता है जो एचटीएमएल ब्लॉकों को संभालने को आसान बनाता है।
ढांचा एक ऐसी प्रणाली के साथ आता है जो हमें सरल और सीधे मॉडल सिंटैक्स का उपयोग करके डीओएम को घोषित रूप से डेटा प्रस्तुत करने की अनुमति देता है।
यहाँ एक उदाहरण है:
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'This is a simple Vue.js Declarative Rendering example!'
}
})
</script>
</body>Vue.js ढांचा हमें इसकी अनुमति देता है defiकेवल HTML विशेषताओं को निर्देश कहा जाता है, जिनका उपयोग HTML अनुप्रयोगों को कार्यक्षमता प्रदान करने के लिए किया जाता है।
Vue.js में दो प्रकार के निर्देश हैं:
Vue.js डेटा के लिए प्लेसहोल्डर के रूप में डबल ब्रेसिज़ {{}} का उपयोग करता है, और Vue.js निर्देश HTML विशेषताएँ हैं जो v- उपसर्ग का उपयोग करती हैं।
एक Vue ऐप एक एकल DOM तत्व से जुड़ता है और इसे पूरी तरह से नियंत्रित करता है। उपरोक्त उदाहरण में, यह #app है।
Vue के साथ हम HTML को प्रवेश बिंदु के रूप में मान सकते हैं, और बाकी सब कुछ बनाए गए Vue उदाहरण के अंदर होता है।
आइए एक उदाहरण देखें जहां हम तत्व और विशेषता बंधन का प्रयास करते हैं:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-2">
<span v-bind:title="message">
Hover mouse over me for a few seconds
and see a dynamically bound title which I have set!
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
</script>
</body>
</html> इस मामले में, नया वी-बाइंड विशेषता निर्देश है। निर्देशों का उपयोग v- उपसर्ग के साथ यह इंगित करने के लिए किया जाता है कि वे Vue द्वारा प्रदान की गई अद्वितीय विशेषताएँ हैं, और रेंडर किए गए DOM के लिए विशेष प्रतिक्रियाशील व्यवहार लागू करने के लिए उपयोग किए जाते हैं।
उदाहरण का परिणाम निम्न है
Ercole Palmeri
रंग भरने के माध्यम से बढ़िया मोटर कौशल विकसित करना बच्चों को लेखन जैसे अधिक जटिल कौशल के लिए तैयार करता है। रंग भरना…
नौसैनिक क्षेत्र एक सच्ची वैश्विक आर्थिक शक्ति है, जो 150 अरब के बाज़ार की ओर बढ़ चुका है...
पिछले सोमवार को, फाइनेंशियल टाइम्स ने OpenAI के साथ एक समझौते की घोषणा की। एफटी अपनी विश्व स्तरीय पत्रकारिता को लाइसेंस देता है...
लाखों लोग स्ट्रीमिंग सेवाओं के लिए मासिक सदस्यता शुल्क का भुगतान करते हैं। यह आम राय है कि आप...
