Vue में इवेंट हैंडलर्स जोड़ना
आइए अब हम अपनी मेथड को किसी
इवेंट पर चलाएं। किसी DOM एलिमेंट
पर इवेंट जोड़ने के लिए, हमें
v-on डायरेक्टिव का उपयोग
करना होगा।
इस डायरेक्टिव में कोलन के बाद इवेंट का नाम देना होता है, और वैल्यू के रूप में उस मेथड का नाम देना होता है, जिसे इस इवेंट के होने पर कॉल करना है।
आइए इसे प्रैक्टिस में ट्राई करते हैं। मान लीजिए कि हमारे पास निम्नलिखित मेथड है:
methods: {
show: function() {
alert('!');
}
}
मान लीजिए कि हमारे पास निम्नलिखित बटन है:
<template>
<button>text</button>
</template>
आइए ऐसा करें कि इस बटन पर क्लिक करने पर
show मेथड कॉल हो:
<template>
<button v-on:click="show">text</button>
</template>
आमतौर पर सभी लोग v-on के शॉर्टकट
का उपयोग करते हैं। यह इवेंट के नाम से
पहले @ सिंबल के रूप में होता है:
<template>
<button @click="show">text</button>
</template>
एक बटन बनाएं, जिस पर क्लिक करने पर
alert के माध्यम से वर्तमान तिथि
प्रदर्शित हो।
पिछले टास्क को ऐसे मॉडिफाई करें कि
alert क्लिक पर नहीं, बल्कि माउस के
होवर करने पर प्रदर्शित हो।
