कैसे Vue में घटनाओं को संभालने के लिए

उपयोगकर्ता घटनाओं को सुनना किसी भी उत्तरदायी वेब ऐप का एक अभिन्न अंग है, और Vue ऐप्स कोई अपवाद नहीं हैं। वी-ऑन निर्देश के साथ घटनाओं को संभालने के लिए वू एक सरल और कुशल तरीके से बनाया गया है।

Vue में इवेंट बाइंडिंग क्या है?

इवेंट बाइंडिंग एक Vue.js फीचर है जो आपको इवेंट लिसनर को a से अटैच करने की अनुमति देता है दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) तत्व। जब कोई ईवेंट होता है, तो ईवेंट श्रोता आपके Vue ऐप में एक क्रिया या प्रतिक्रिया को ट्रिगर करता है।

आप के साथ Vue में ईवेंट-बाध्यकारी प्राप्त कर सकते हैं वि पर निर्देश। यह निर्देश आपके ऐप को उपयोगकर्ता ईवेंट जैसे क्लिक, एंटर या की-अप ईवेंट सुनने की अनुमति देता है।

किसी ईवेंट श्रोता को किसी तत्व का उपयोग करके संलग्न करने के लिए वि पर, निर्देश में पैरामीटर के रूप में इवेंट का नाम जोड़ें:

<एचटीएमएल>
<सिर>
<लिखी हुई कहानीस्रोत=" https://unpkg.com/vue@3/dist/vue.global.js">लिखी हुई कहानी>
सिर>
<शरीर>
<डिवपहचान="अनुप्रयोग">
<बटनवी-ऑन: क्लिक करें="काउंटर++">मुझे क्लिक करेंबटन>
<पी>{{ विरोध करना}}पी>





instagram viewer


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

उपरोक्त कोड ब्लॉक एक Vue ऐप का उदाहरण दिखाता है जो सुनता है क्लिक आयोजन। कोड ब्लॉक एक का उपयोग करता है बटन बढ़ाने के लिए विरोध करना Vue उदाहरण की डेटा प्रॉपर्टी में एक के बाद एक मान।

उपरोक्त कोड ब्लॉक जावास्क्रिप्ट अभिव्यक्ति को बांधता है काउंटर ++ बटन के लिए क्लिक घटना के साथ वि पर निर्देश। वू उपयोग करता है @ के स्थान पर आशुलिपि के रूप में वर्ण वि पर निर्देश के कारण वि परका लगातार उपयोग:

<बटन @क्लिक="काउंटर++">मुझे क्लिक करेंबटन>

Vue में ईवेंट बाइंडिंग क्लिक ईवेंट तक सीमित नहीं है। Vue अन्य ईवेंट्स को हैंडल करता है, जैसे की प्रेस इवेंट्स, माउसओवर इवेंट्स, और बहुत कुछ।

इनमें से किसी भी घटना को बाँधने के लिए वि पर निर्देश, प्रतिस्थापित करें क्लिक वांछित घटना के नाम के साथ घटना:

<बटन @keydown.enter="काउंटर++">मुझे क्लिक करेंबटन>

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

अधिकांश Vue ऐप्स में, आप विशिष्ट घटनाओं के आधार पर अधिक जटिल लॉजिक को हैंडल कर सकते हैं। ईवेंट और विधियाँ किसी ईवेंट के आधार पर ऐप क्रियाएँ करने के लिए साथ-साथ काम करती हैं।

तरीकों में संपत्ति Vue के विकल्प Object बढ़ी हुई प्रतिक्रियाशीलता के लिए आपके Vue ऐप के लिए आवश्यक महत्वपूर्ण कार्य करता है। Vue में मेथड्स प्रॉपर्टी के साथ, आप ईवेंट के आधार पर जटिल लॉजिक को हैंडल कर सकते हैं।

यहां एक Vue ऐप का उदाहरण दिया गया है, जो मेथड्स प्रॉपर्टी द्वारा हैंडल किए गए ईवेंट दिखाता है:

<एचटीएमएल>
<सिर>
<लिखी हुई कहानीस्रोत=" https://unpkg.com/vue@3/dist/vue.global.js">लिखी हुई कहानी>
सिर>
<शरीर>
<डिवपहचान="अनुप्रयोग">
<बटन @क्लिक="वृद्धि">1 जोड़ेंबटन>
<बटन @क्लिक="कम करना">कम करें 1बटन>
<पी>{{ विरोध करना }}पी>
डिव>
<लिखी हुई कहानी>
 const ऐप = Vue.createApp({
 आंकड़े() {
 वापस करना {
 टेक्स्ट: 'Vue is Awesome!',
 काउंटर: 0
 }
 },
 तरीके: {
 वेतन वृद्धि () {
 यह काउंटर = यह काउंटर + 1
 },
 कम करना() {
 यह काउंटर = यह काउंटर - 1
 }
 }
 })
 ऐप.माउंट ('#ऐप')
लिखी हुई कहानी>
शरीर>
एचटीएमएल>

ऊपर दिए गए Vue ऐप में दिखाया गया है कि इवेंट को तरीकों से कैसे लिंक किया जाए। ऐप में दो बटन हैं जिन पर क्लिक करके उपयोगकर्ता डेटा प्रॉपर्टी में काउंटर वैल्यू को बढ़ा या घटा सकते हैं।

ऐप इसे हासिल करता है @क्लिक करें निर्देश। @क्लिक करें निर्देश काउंटर वैल्यू में हेरफेर करने के लिए मेथड्स प्रॉपर्टी में फ़ंक्शंस की ओर इशारा करता है।

किसी तर्क को क्लिक ईवेंट से लिंक करते समय, आप विधि में पास किए गए तर्क के आधार पर काउंटर वैल्यू को जोड़ने या कम करने के लिए वृद्धि को अनुकूलित कर सकते हैं और विधियों को कम कर सकते हैं।

जैसे इतना:

<शरीर>
<डिवपहचान="अनुप्रयोग">
<बटन @क्लिक="वृद्धि (5)">5 जोड़ेंबटन>
<बटन @क्लिक="कम करें (3)">कम करना 3बटन>
<पी>{{ विरोध करना }}पी>
डिव>
<लिखी हुई कहानी>
 const ऐप = Vue.createApp({
 आंकड़े() {
 वापस करना {
 टेक्स्ट: 'Vue is Awesome!',
 काउंटर: 0
 }
 },
 तरीके: {
 वृद्धि (संख्या) {
 यह काउंटर = यह काउंटर + संख्या
 },
 कम करें (संख्या) {
 यह काउंटर = यह काउंटर - संख्या
 }
 }
 })
 ऐप.माउंट ('#ऐप')
लिखी हुई कहानी>
शरीर>

यह कोड ब्लॉक बटन पर क्लिक इवेंट श्रोता से जुड़े तरीकों के तर्कों को पारित करने की अनुमति देने के लिए पिछले Vue ऐप पर फैला हुआ है।

Vue उदाहरण में वृद्धि और कमी के तरीके काउंटर प्रॉपर्टी को बढ़ाने या घटाने के लिए एक तर्क संख्या लेते हैं।

यह उदाहरण दिखाता है कि कैसे आप तर्कों के साथ काम कर सकते हैं जब तरीकों को Vue में घटनाओं के साथ जोड़ा जा सकता है। घटनाओं के साथ विधियों को जोड़ने से Vue ऐप्स को अधिक इंटरैक्टिव बनाने में मदद मिल सकती है।

Vue में रोकें और रोकें संशोधक की खोज करें

Vue में ईवेंट संशोधक आपको बेहतर ईवेंट श्रोता बनाने की अनुमति देते हैं जो आपके एप्लिकेशन की विशिष्ट आवश्यकताओं को पूरा करते हैं। इन ईवेंट संशोधक का उपयोग करने के लिए, आप संशोधक को Vue में ईवेंट से जोड़ते हैं।

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

<प्रपत्र @सबमिट करें। रोकें="हैंडल सबमिट करें">
<इनपुटप्रकार="मूलपाठ"वि मॉडल="मूलपाठ">
<बटनप्रकार="जमा करना">जमा करनाबटन>
प्रपत्र>

चेन के ऊपर कोड ब्लॉक रोकना सबमिट ईवेंट में संशोधक। रोकना Vue में प्रपत्रों के साथ काम करते समय आमतौर पर संशोधक का उपयोग किया जाता है।

रोकना संशोधक का उद्देश्य फॉर्म सबमिशन के डिफ़ॉल्ट व्यवहार को रोकना है, जो पेज को फिर से लोड करना है। का उपयोग करते हुए रोकना, Vue अपनी प्रक्रियाओं को जारी रख सकता है जबकि हैंडल सबमिट करें विधि फॉर्म जमा करने का ख्याल रखती है।

एक बहुत ही उपयोगी संशोधक का एक और उदाहरण है रुकना घटना संशोधक। रुकना ईवेंट संशोधक किसी ईवेंट को DOM ट्री में आगे बढ़ने से रोकता है।

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

यह समझने के लिए कि कैसे रुकना संशोधक एक DOM ट्री के आगे घटनाओं के प्रसार को रोकता है, नीचे दिए गए कोड ब्लॉक पर विचार करें:

<शरीर>
<डिवपहचान="अनुप्रयोग">
<डिव @क्लिक="बाहरी क्लिक"कक्षा="बाहरी">
<डिव @क्लिक बंद करो="इनरक्लिक"कक्षा="भीतरी">
<बटन @क्लिक="बटनक्लिक"कक्षा="बटन">मुझे क्लिक करेंबटन>
डिव>
डिव>
डिव>
<लिखी हुई कहानी>
 const ऐप = Vue.createApp({
 तरीके: {
 आउटरक्लिक () {
 कंसोल.लॉग ('बाहरी क्लिक')
 },
 इनरक्लिक () {
 कंसोल.लॉग ('आंतरिक क्लिक')
 },
 बटनक्लिक () {
 कंसोल.लॉग ('बटन क्लिक')
 }
 }
 });
 ऐप.माउंट ("#ऐप");
लिखी हुई कहानी>
शरीर>

उपरोक्त कोड ब्लॉक में तीन अलग-अलग तत्वों से जुड़े तीन ईवेंट श्रोता हैं। बटन तत्व div के अंदर है भीतरी क्लास, जबकि div के साथ भीतरी वर्ग div के अंदर है आउटर कक्षा।

तीन तत्वों में से प्रत्येक एक के लिए सुनता है क्लिक घटना और कंसोल के लॉग, क्लिक किए गए HTML तत्व का नाम। उपरोक्त कोड ब्लॉक को समझने में आसान बनाने के लिए नीचे अतिरिक्त क्लास CSS स्टाइलिंग है:

<सिर>
<शैली>
 बाहरी {
 पैडिंग: 20 पीएक्स;
 पृष्ठभूमि-रंग: काला;
 }
 ।भीतरी {
 पैडिंग: 20 पीएक्स;
 पृष्ठभूमि-रंग: ग्रे;
 }
 बटन {
 पैडिंग: 10 पीएक्स;
 पृष्ठभूमि-रंग: सफेद;
 बॉर्डर: 2px सॉलिड ब्लैक;
 फ़ॉन्ट-आकार: 16 पीएक्स;
 फोंट की मोटाई: बोल्ड;
 कर्सर: सूचक;
 }
शैली>
सिर>

प्रोग्राम चलाने पर, बनाया गया Vue ऐप इस तरह दिखेगा:

ध्यान दें कि जब आप बटन पर क्लिक करते हैं, तो प्रोग्राम कॉल करता है बटन क्लिक करें विधि और कंसोल के लिए एक संदेश लॉग करता है। कार्यक्रम भी कहते हैं innerClick तरीका।

हालाँकि, प्रोग्राम कॉल नहीं करता है आउटरक्लिक विधि क्योंकि कोड ब्लॉक ने a रुकना के लिए संशोधक innerClick घटना श्रोता। यह घटना को DOM ट्री में आगे बढ़ने से रोकता है।

के बिना रुकना संशोधक, प्रोग्राम कॉल करेगा बटन क्लिक करें विधि जब आप बटन पर क्लिक करते हैं, और घटना पेड़ तक पहुंचती रहेगी, तक पहुंचती रहेगी innerClick विधि और उसके बाद आउटरक्लिक तरीका।

वेब ऐप्स में इवेंट्स को हैंडल करना

आपने सीखा है कि ईवेंट श्रोताओं को तत्वों से जोड़ने के लिए Vue में ईवेंट बाइंडिंग का उपयोग कैसे करें और ईवेंट होने पर विधियों को कैसे कॉल करें। आप यह भी समझ गए हैं कि ईवेंट व्यवहार को अनुकूलित करने के लिए ईवेंट संशोधक का उपयोग कैसे करें।

कार्य करने के लिए वेब ऐप्स कुछ प्रकार के उपयोगकर्ता ईवेंट पर निर्भर करते हैं। इन घटनाओं की एक किस्म को पकड़ने और संभालने के लिए जावास्क्रिप्ट बहुत सारी विधियों के साथ अंतर्निहित है। ये इवेंट इंटरएक्टिव ऐप्स बनाने में मदद करते हैं।