VueJS - ईवेंट

v-on VueJS में घटनाओं को सुनने के लिए DOM तत्वों में जोड़ा गया गुण है।

ईवेंट पर क्लिक करें

उदाहरण

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "displaynumbers">Click ME</button>
         <h2> Add Number 100 + 200 = {{total}}</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               num1: 100,
               num2 : 200,
               total : ''
            },
            methods : {
               displaynumbers : function(event) {
                  console.log(event);
                  return this.total =  this.num1+ this.num2;
               }
            },
         });
      </script>
   </body>
</html>

उत्पादन

निम्नलिखित कोड का उपयोग DOM तत्व के लिए एक क्लिक ईवेंट असाइन करने के लिए किया जाता है।

<button v-on:click = "displaynumbers">Click ME</button>

वी-ऑन के लिए एक आशुलिपि है, जिसका अर्थ है कि हम घटना को इस प्रकार भी कह सकते हैं -

<button @click = "displaynumbers">Click ME</button>

बटन पर क्लिक करने पर, यह 'डिस्प्लेनेट' विधि को कॉल करेगा, जो ईवेंट में लेता है और हमने ब्राउज़र में उसी को सांत्वना दी है जैसा कि ऊपर दिखाया गया है।

अब हम एक और घटना माउसओवर माउसआउट की जाँच करेंगे।

उदाहरण

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               num1: 100,
               num2 : 200,
               total : '',
               styleobj : {
                  width:"100px",
                  height:"100px",
                  backgroundColor:"red"
               }
            },
            methods : {
               changebgcolor : function() {
                  this.styleobj.backgroundColor = "green";
               },
               originalcolor : function() {
                  this.styleobj.backgroundColor = "red";
               }
            },
         });
      </script>
   </body>
</html>

उपरोक्त उदाहरण में, हमने 100px के रूप में चौड़ाई और ऊंचाई के साथ एक div बनाया है। इसे बैकग्राउंड कलर रेड दिया गया है। माउसओवर पर, हम रंग को हरा में बदल रहे हैं, और माउसआउट पर हम रंग को वापस लाल में बदल रहे हैं।

इसलिए, माउसओवर के दौरान, एक विधि कहा जाता है changebgcolor और एक बार जब हम माउस को div से बाहर ले जाते हैं, तो एक विधि कहलाती है originalcolor

यह निम्नानुसार किया जाता है -

<div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>

दो घटनाओं - माउसओवर और माउसआउट - को div को सौंपा गया है जैसा कि ऊपर दिखाया गया है। हमने एक स्टाइलबज वैरिएबल बनाया है और डिव को असाइन करने के लिए आवश्यक स्टाइल दिया है। उसी चर को v-bind: style = "styleobj" के उपयोग से div पर बाँध दिया जाता है।

Changebgcolor में, हम निम्नलिखित कोड का उपयोग करके रंग को हरा में बदल रहे हैं।

changebgcolor : function() {
   this.styleobj.backgroundColor = "green";
}

स्टाइलोबेज वेरिएबल का उपयोग करके, हम रंग को हरे रंग में बदल रहे हैं।

इसी तरह, निम्नलिखित कोड का उपयोग इसे मूल रंग में वापस बदलने के लिए किया जाता है।

originalcolor : function() {
   this.styleobj.backgroundColor = "red";
}

यह हम ब्राउज़र में देखते हैं।

जब हम माउसओवर करते हैं, तो निम्न स्क्रीनशॉट में दिखाए अनुसार रंग हरा हो जाएगा।

इवेंट संशोधक

Vue में इवेंट मॉडिफ़ायर उपलब्ध है जो वी-ऑन विशेषता पर है। निम्नलिखित संशोधक उपलब्ध हैं -

.Once

ईवेंट को केवल एक बार निष्पादित करने देता है।

वाक्य - विन्यास

<button v-on:click.once = "buttonclicked">Click Once</button>

ऊपर दिए गए सिंटैक्स में दिखाए गए संशोधक को कॉल करते समय हमें डॉट ऑपरेटर को जोड़ना होगा। आइए हम इसे एक उदाहरण में उपयोग करें और एक बार संशोधक के काम को समझें।

उदाहरण

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button>
         Output:{{clicknum}}
         <br/><br/>
         <button v-on:click = "buttonclicked"  v-bind:style = "styleobj">Click Me</button>
         Output:{{clicknum1}}
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               clicknum : 0,
               clicknum1 :0,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               buttonclickedonce : function() {
                  this.clicknum++;
               },
               buttonclicked : function() {
                  this.clicknum1++;
               }
            }
         });
      </script>
   </body>
</html>

उत्पादन

उपर्युक्त उदाहरण में, हमने दो बटटॉन बनाए हैं। क्लिक वन्स लेबल वाले बटन ने एक बार संशोधक जोड़ दिया है और दूसरा बटन बिना किसी संशोधक के है। यह बटन को परिभाषित करने का तरीका है।

<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button>
<button v-on:click = "buttonclicked"  v-bind:style = "styleobj">Click Me</button>

पहला बटन विधि को "बटनक्लेक्टोनस" कहता है और दूसरा बटन विधि को "बटनक्लिप्ड" कहता है।

buttonclickedonce : function() {
   this.clicknum++;
},
buttonclicked : function() {
   this.clicknum1++;
}

Clicknum और clicknum1 में दो चर निर्धारित हैं। बटन क्लिक होने पर दोनों बढ़े हुए हैं। दोनों वेरिएबल्स को 0 में इनिशियलाइज़ किया गया है और डिस्प्ले ऊपर आउटपुट में देखा गया है।

पहले बटन पर क्लिक करने पर, वैरिएबल क्लिकनुमा वेतन वृद्धि 1. दूसरी क्लिक पर, संख्या बढ़ाई नहीं जाती है क्योंकि संशोधक इसे बटन के क्लिक पर असाइन किए गए किसी भी एक्शन आइटम को निष्पादित या निष्पादित करने से रोकता है।

दूसरे बटन पर क्लिक करने पर, वही कार्रवाई की जाती है, अर्थात चर को बढ़ाया जाता है। प्रत्येक क्लिक पर, मूल्य बढ़ा हुआ और प्रदर्शित किया जाता है।

इसके बाद ब्राउजर में हमें आउटपुट मिलता है।

.prevent

Syntax

<a href = "http://www.google.com" v-on:click.prevent = "clickme">Click Me</a>

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <a href = "http://www.google.com" v-on:click = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               clicknum : 0,
               clicknum1 :0,
               styleobj: {
                  color: '#4CAF50',
                  marginLeft: '20px',
                  fontSize: '30px'
               }
            },
            methods : {
               clickme : function() {
                  alert("Anchor tag is clicked");
               }
            }
         });
      </script>
   </body>
</html>

Output

यदि हम क्लिकमेम लिंक पर क्लिक करते हैं, तो यह "एंकर टैग पर क्लिक किया जाता है" के रूप में एक अलर्ट भेजेगा और यह लिंक खोल देगा https://www.google.com एक नए टैब में जैसा कि निम्नलिखित स्क्रीनशॉट में दिखाया गया है।

अब यह एक सामान्य तरीके के रूप में काम करता है, अर्थात जैसा हम चाहते हैं, लिंक खुल जाता है। यदि हम लिंक नहीं खोलना चाहते हैं, तो हमें घटना में एक संशोधन 'रोकने' की आवश्यकता है जैसा कि निम्नलिखित कोड में दिखाया गया है।

<a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>

एक बार जोड़ने पर, यदि हम बटन पर क्लिक करते हैं, तो यह एक अलर्ट संदेश भेजेगा और अब लिंक नहीं खोलेगा। रोकने वाला संशोधक लिंक को खोलने से रोकता है और केवल टैग को दी गई विधि को निष्पादित करता है।

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               clicknum : 0,
               clicknum1 :0,
               styleobj: {
                  color: '#4CAF50',
                  marginLeft: '20px',
                  fontSize: '30px'
               }
            },
            methods : {
               clickme : function() {
                  alert("Anchor tag is clicked");
               }
            }
         });
      </script>
   </body>
</html>

Output

लिंक पर क्लिक करने पर, यह अलर्ट संदेश प्रदर्शित करेगा और अब url को नहीं खोलता है।

घटना - प्रमुख संशोधक

VueJS प्रमुख संशोधक प्रदान करता है जिसके आधार पर हम ईवेंट हैंडलिंग को नियंत्रित कर सकते हैं। विचार करें कि हमारे पास एक टेक्स्टबॉक्स है और हम चाहते हैं कि विधि केवल तभी दर्ज की जाए जब हम Enter दबाते हैं। हम घटनाओं में प्रमुख संशोधक जोड़कर ऐसा कर सकते हैं।

वाक्य - विन्यास

<input type = "text"  v-on:keyup.enter = "showinputvalue"/>

हम अपने ईवेंट को लागू करना चाहते हैं वह कुंजी है V-on.eventname.keyname (ऊपर दिखाये अनुसार)

हम कई keynames का उपयोग कर सकते हैं। उदाहरण के लिए,V-on.keyup.ctrl.enter

उदाहरण

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue" v-bind:style = "styleobj" placeholder = "Enter your name"/>
         <h3> {{name}}</h3>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name:'',
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.name=event.target.value;
               }
            }
         });
      </script>
   </body>
</html>

उत्पादन

टेक्स्टबॉक्स में कुछ टाइप करें और हम देखेंगे कि जब हम Enter दबाते हैं, तो यह प्रदर्शित होता है।

कस्टम ईवेंट

मूल विशेषता का उपयोग करके माता-पिता अपने घटक को डेटा पास कर सकते हैं, हालांकि, हमें बच्चे के घटक में परिवर्तन होने पर माता-पिता को बताने की आवश्यकता है। इसके लिए हम कस्टम इवेंट का उपयोग कर सकते हैं।

मूल घटक का उपयोग करके बच्चा घटक घटना सुन सकता है v-on विशेषता।

उदाहरण

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div id = "counter-event-example">
            <p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
            <button-counter
            v-for = "(item, index) in languages"
            v-bind:item = "item"
            v-bind:index = "index"
            v-on:showlanguage = "languagedisp"></button-counter>
         </div>
      </div>
      <script type = "text/javascript">
         Vue.component('button-counter', {
            template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
            data: function () {
               return {
                  counter: 0
               }
            },
            props:['item'],
            methods: {
               displayLanguage: function (lng) {
                  console.log(lng);
                  this.$emit('showlanguage', lng);
               }
            },
         });
         var vm = new Vue({
            el: '#databinding',
            data: {
               languageclicked: "",
               languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
            },
            methods: {
               languagedisp: function (a) {
                  this.languageclicked = a;
               }
            }
         })
      </script>
   </body>
</html>

उत्पादन

उपरोक्त कोड मूल घटक और चाइल्ड घटक के बीच डेटा ट्रांसफर को दर्शाता है।

घटक निम्न कोड का उपयोग करके बनाया गया है।

<button-counter
   v-for = "(item, index) in languages"
   v-bind:item = "item"
   v-bind:index = "index"
   v-on:showlanguage = "languagedisp">
</button-counter>

वहां एक है v-forविशेषता, जो भाषाओं के सरणी के साथ लूप करेगी। सरणी में भाषाओं की एक सूची है। हमें बाल घटक को विवरण भेजने की आवश्यकता है। सरणी के मान आइटम और इंडेक्स में संग्रहीत हैं।

v-bind:item = "item"
v-bind:index = "index"

सरणी के मूल्यों को संदर्भित करने के लिए, हमें इसे पहले एक चर में बाँधने की आवश्यकता है और इस प्रकार के रूप में रंगमंच की सामग्री का उपयोग करके चर को संदर्भित किया जाता है।

Vue.component('button-counter', {
   template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
   data: function () {
      return {
         counter: 0
      }
   },
   props:['item'],
   methods: {
      displayLanguage: function (lng) {
         console.log(lng);
         this.$emit('showlanguage', lng);
      }
   },
});

प्रॉप्स प्रॉपर्टी में एरे फॉर्म में आइटम होता है। हम सूचकांक का भी उल्लेख कर सकते हैं -

props:[‘item’, ‘index’]

घटक के लिए एक घटना भी इस प्रकार है -

<button-counter
   v-for = "(item, index) in languages"
   v-bind:item = "item"
   v-bind:index = "index"
   v-on:showlanguage = "languagedisp">
</button-counter>

घटना का नाम है showlanguage और यह एक विधि कहलाती है languagedisp जिसे Vue उदाहरण में परिभाषित किया गया है।

घटक में, टेम्पलेट निम्नानुसार परिभाषित किया गया है -

template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',

एक बटन बनाया है। बटन भाषा सरणी में कई गिनती के साथ बनाया जाएगा। बटन पर क्लिक करने पर एक विधि प्रदर्शित होती है जिसे डिस्प्ले लैंग्वेज कहते हैं और बटन क्लिक की गई वस्तु को फंक्शन के लिए एक परम के रूप में पारित किया जाता है। अब घटक को क्लिक किए गए तत्व को मूल घटक पर प्रदर्शन के लिए भेजने की आवश्यकता है जो निम्नानुसार किया जाता है -

Vue.component('button-counter', {
   template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
   data: function () {
      return {
         counter: 0
      }
   },
   props:['item'],
   methods: {
      displayLanguage: function (lng) {
         console.log(lng);
         this.$emit('showlanguage', lng);
      }
   },
});

प्रक्रिया displayLanguage कॉल this.$emit(‘showlanguage’, lng);

$emitमूल घटक विधि को कॉल करने के लिए उपयोग किया जाता है। विधि showlanguage v-on के साथ घटक पर दिया गया ईवेंट नाम है।

<button-counter
   v-for = "(item, index) in languages"
   v-bind:item = "item"
   v-bind:index = "index"
   v-on:showlanguage = "languagedisp">
</button-counter>

हम एक पैरामीटर पास कर रहे हैं, अर्थात मुख्य पैरेंट Vue उदाहरण की विधि पर क्लिक की गई भाषा का नाम जिसे निम्नानुसार परिभाषित किया गया है।

var vm = new Vue({
   el: '#databinding',
   data: {
      languageclicked: "",
      languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
   },
   methods: {
      languagedisp: function (a) {
         this.languageclicked = a;
      }
   }
})

यहां, एमिट ट्रिगर शोले को ट्रिगर करता है जो बदले में कॉल करता है languagedispVue उदाहरण विधियों से। यह चर के लिए क्लिक की गई भाषा प्रदान करता हैlanguageclicked और ब्राउज़र में वही दिखाया जाता है जैसा कि निम्नलिखित स्क्रीनशॉट में दिखाया गया है।

<p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>

इसके बाद ब्राउजर में हमें आउटपुट मिलता है।