v-on (@) का उपयोग
v-on click और input जैसे DOM events सुनता है, और @ इसका short form है।
In this page:
Syntax
<button @click="handler">text</button>
<button v-on:click="count++">text</button>v-on (@)
Events पर react करने के लिए @click="handler" या @click="count++" लिखें। Handlers native event receive करते हैं, और आप $event से arguments pass कर सकते हैं। .prevent, .stop, .once जैसे modifiers और .enter जैसे key modifiers handlers को clean रखते हैं।
Note:
@submit.prevent browser को page reload करने से रोकता है।
उदाहरण: v-on (@)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button @click="hits++">Hits: {{ hits }}</button>
<button @click="greet('Ada', $event)">Greet</button>
<button @click.once="onceCount++">Once: {{ onceCount }}</button>
<p>{{ log }}</p>
</div>
<script>
Vue.createApp({
data() { return { hits: 0, onceCount: 0, log: "" }; },
methods: { greet(name, e) { this.log = "Hello " + name + " from " + e.type; } },
}).mount("#app");
const [b1, b2, b3] = document.querySelectorAll("button");
b1.click(); b1.click(); b2.click(); b3.click(); b3.click();
Vue.nextTick(() => console.log(document.querySelector("#app").textContent.replace(/\s+/g, " ").trim()));
</script>
</body>
</html>
<!-- Output:
Rendered: Hits: 2GreetOnce: 1Hello Ada from click
console: Hits: 2GreetOnce: 1Hello Ada from click
-->Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- attributes में गलती से parentheses के साथ method call करना
- form submits पर .prevent भूल जाना
- @click की बजाय onclick लिखना
चैप्टर सारांश
- @event DOM events सुनता है
- $event native event है
- Modifiers: prevent, stop, once उपलब्ध हैं
- .enter जैसे Key modifiers
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: