Vue.js
संशोधक

परिचय

इवेंट संशोधक

Vue एक डॉट द्वारा निर्देशित निर्देश उपसर्गों को कॉल करके v-on लिए इवेंट संशोधक प्रदान करता है।

• .stop
• .prevent
• .capture
• .self
• .once

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

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- use capture mode when adding the event listener -->
<div v-on:click.capture="doThis">...</div>

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>

प्रमुख संशोधक

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

• .enter
• .tab
• .delete ("हटाएं" और "बैकस्पेस" कुंजी दोनों को पकड़ता है)
• .esc
• .space
• .up
• .down
• .left
• .right

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

<input v-on:keyup.enter="submit">

इनपुट संशोधक

• .trim

यदि आप चाहते हैं कि उपयोगकर्ता इनपुट स्वचालित रूप से ट्रिम हो जाए, तो आप trim संशोधक को अपने v-model प्रबंधित इनपुट में जोड़ सकते हैं:

<input v-model.trim="msg">

• .number

यदि आप चाहते हैं कि उपयोगकर्ता इनपुट स्वचालित रूप से एक नंबर के रूप में टाइपकास्ट हो, तो आप निम्नानुसार कर सकते हैं:

<input v-model.number="age" type="number">

• .lazy

आम तौर पर, v-model प्रत्येक इनपुट ईवेंट के बाद डेटा के साथ इनपुट को सिंक करता है, लेकिन आप परिवर्तन के परिवर्तन के साथ सिंक करने के बजाय lazy संशोधक जोड़ सकते हैं:

<input v-model.lazy="msg" >