بیاموزید که چگونه مدیریت رویداد خود را با دستور Vue’s v-on ارتقا دهید.
گوش دادن به رویدادهای کاربر بخشی جدایی ناپذیر از هر برنامه وب پاسخگو است و برنامه های Vue نیز از این قاعده مستثنی نیستند. Vue با یک راه ساده و کارآمد برای مدیریت رویدادها با دستور v-on خود ساخته شده است.
Event Binding در Vue چیست؟
Event binding یک ویژگی Vue.js است که به شما امکان می دهد یک شنونده رویداد را به یک عنصر Document Object Model (DOM) متصل کنید. وقتی رویدادی رخ می‌دهد، شنونده رویداد یک عمل یا پاسخ را در برنامه Vue شما راه‌اندازی می‌کند.
با دستور v-on می توانید به رویداد-binding در Vue دست پیدا کنید. این دستورالعمل به برنامه شما اجازه می دهد تا به رویدادهای کاربر مانند رویدادهای کلیک، ورود یا کلید زدن گوش دهد.
برای پیوست کردن شنونده رویداد به یک عنصر با استفاده از v-on، نام رویداد را به عنوان پارامتر به دستورالعمل اضافه کنید:
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="counter++">Click me</button>
<p>{{ counter}}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
}
})
app.mount('#app')
</script>
</body>
</html>
بلوک کد بالا نمونه ای از برنامه Vue را نشان می دهد که به یک رویداد کلیک گوش می دهد. بلوک کد از یک دکمه برای افزایش یک مقدار شمارنده در ویژگی داده نمونه Vue استفاده می کند.
بلوک کد بالا عبارت counter++ JavaScript را با دستور v-on به رویداد کلیک دکمه متصل می کند. Vue به دلیل استفاده مکرر از v-on از کاراکتر @ به‌عنوان خلاصه‌نویسی به جای دستور v-on استفاده می‌کند:
<button @click="counter++">Click me</button>
اتصال رویداد در Vue به رویدادهای کلیک محدود نمی شود. Vue رویدادهای دیگر را مدیریت می‌کند، مانند رویدادهای فشار کلید، رویدادهای انتقال ماوس و موارد دیگر.
برای اتصال هر یک از این رویدادها به دستور v-on، رویداد کلیک را با نام رویداد مورد نظر جایگزین کنید:
<button @keydown.enter="counter++">Click me</button>
کد بالا یک شنونده رویداد را روی دکمه ای تنظیم می کند که به رویداد keydown گوش می دهد. هنگامی که کلیدی فشار داده می شود در حالی که دکمه فوکوس دارد، Vue عبارت counter++ را ارزیابی می کند.
پیوند رویدادها با متدها در Vue
در اکثر برنامه های Vue، می توانید منطق پیچیده تری را بر اساس رویدادهای خاص انجام دهید. رویدادها و روش ها دست به دست هم می دهند تا اقدامات برنامه را بر اساس یک رویداد انجام دهند.
ویژگی روش ها در Vue’s Options Object دارای توابع مهمی است که برنامه Vue شما برای واکنش پذیری افزایش یافته به آن نیاز دارد. با ویژگی روش ها در Vue، می توانید منطق پیچیده را بر اساس رویدادها مدیریت کنید.
در اینجا مثالی از یک برنامه Vue آورده شده است که رویدادهایی را نشان می دهد که توسط ویژگی روش ها مدیریت می شوند:
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button @click="increment">Add 1</button>
<button @click="reduce">reduce 1</button>
<p>{{ counter }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
},
methods: {
increment(){
this.counter = this.counter + 1
},
reduce() {
this.counter = this.counter - 1
}
}
})
app.mount('#app')
</script>
</body>
</html>
برنامه Vue در بالا نحوه پیوند دادن رویدادها را با روش ها نشان می دهد. این برنامه دارای دو دکمه است که کاربران می توانند برای افزایش یا کاهش مقدار شمارنده در ویژگی داده کلیک کنند.
این برنامه با دستور @click به این مهم دست می یابد. دستور @click به توابع موجود در ویژگی method برای دستکاری مقدار شمارنده اشاره می کند.
هنگام پیوند دادن یک آرگومان به رویداد کلیک، می‌توانید روش‌های افزایش و کاهش را سفارشی کنید تا مقدار شمارنده را براساس آرگومانی که به متد ارسال می‌کنید، اضافه یا کاهش دهید.
اینطوری:
<body>
<div id="app">
<button @click="increment(5)">Add 5</button>
<button @click="reduce(3)">reduce 3</button>
<p>{{ counter }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
},
methods: {
increment(num){
this.counter = this.counter + num
},
reduce(num) {
this.counter = this.counter - num
}
}
})
app.mount('#app')
</script>
</body>
این بلوک کد در برنامه قبلی Vue گسترش می‌یابد تا امکان ارسال آرگومان‌ها به روش‌های مرتبط با شنونده رویداد کلیک روی دکمه را فراهم کند.
متدهای افزایش و کاهش در نمونه Vue یک آرگومان num برای افزایش یا کاهش خاصیت counter می گیرند.
این مثال نشان می‌دهد که چگونه می‌توانید هنگام پیوند متدها با رویدادها در Vue با آرگومان‌ها کار کنید. پیوند روش‌ها با رویدادها می‌تواند به تعاملی‌تر کردن برنامه‌های Vue کمک کند.
کاوش در Prevent and Stop Modifiers در Vue
اصلاح‌کننده‌های رویداد در Vue به شما امکان می‌دهند شنوندگان رویداد بهتری ایجاد کنید که نیازهای خاص برنامه شما را برآورده می‌کنند. برای استفاده از این اصلاح‌کننده‌های رویداد، اصلاح‌کننده‌ها را به رویدادهای Vue زنجیر می‌کنید.
مثلا:
<form @submit.prevent="handleSubmit">
<input type="text" v-model="text">
<button type="submit">Submit</button>
</form>
بلوک کد بالا اصلاح کننده پیشگیری را به رویداد ارسال زنجیره می کند. هنگام کار با فرم ها در Vue معمولاً از اصلاح کننده پیشگیری استفاده می شود.
هدف اصلاح کننده prevent جلوگیری از رفتار پیش فرض ارسال فرم است که بارگذاری مجدد صفحه است. با استفاده از prevent، Vue می‌تواند فرآیندهای خود را ادامه دهد در حالی که متد handleSubmit از ارسال فرم مراقبت می‌کند.
نمونه دیگری از یک اصلاح کننده بسیار مفید، اصلاح کننده رویداد توقف است. اصلاح‌کننده رویداد توقف، انتشار یک رویداد را در بالای درخت DOM متوقف می‌کند.
معمولاً رویداد یک عنصر فرزند HTML از طریق درخت DOM حباب می شود و هر شنونده رویداد متصل به عناصر والد را فعال می کند. می‌توانید از انتشار این رویداد با اصلاح‌کننده توقف جلوگیری کنید و از تحریک شنوندگان رویداد بیشتر جلوگیری کنید.
برای درک اینکه چگونه مدیفایر توقف انتشار رویدادها را در بالای درخت DOM متوقف می کند، بلوک کد زیر را در نظر بگیرید:
<body>
<div id="app">
<div @click="outerClick" class="outer">
<div @click.stop="innerClick" class="inner">
<button @click="buttonClick" class="button">Click me</button>
</div>
</div>
</div>
<script>
const app = Vue.createApp({
methods: {
outerClick() {
console.log('Outer click')
},
innerClick() {
console.log('Inner click')
},
buttonClick() {
console.log('Button click')
}
}
});
app.mount("#app");
</script>
</body>
بلوک کد بالا دارای سه شنونده رویداد است که به سه عنصر مختلف متصل هستند. عنصر دکمه در داخل div با کلاس داخلی است، در حالی که div با کلاس داخلی در داخل div با کلاس خارجی قرار دارد.
هر یک از سه عنصر به رویداد کلیک گوش می دهد و به کنسول وارد می شود، نام عنصر HTML کلیک می شود. در زیر یک استایل کلاس CSS اضافی برای درک آسان بلوک کد بالا آورده شده است:
<head>
<style>
.outer {
padding: 20px;
background-color: black;
}
.inner {
padding: 20px;
background-color: gray;
}
button {
padding: 10px;
background-color: white;
border: 2px solid black;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
در اجرای برنامه، برنامه Vue ایجاد شده به شکل زیر خواهد بود:
توجه داشته باشید که وقتی روی دکمه کلیک می کنید، برنامه روش buttonClick را فراخوانی می کند و پیامی را به کنسول ثبت می کند. این برنامه روش innerClick را نیز فراخوانی می کند.
با این حال، برنامه روش outerClick را فراخوانی نمی کند زیرا بلوک کد یک تغییر دهنده توقف به شنونده رویداد innerClick اضافه کرده است. این رویداد از انتشار بیشتر در درخت DOM جلوگیری می کند.
بدون تغییر دهنده توقف، برنامه با کلیک روی دکمه، متد buttonClick را فراخوانی می کند و رویداد به انتشار درخت ادامه می دهد و به روش innerClick و سپس روش outerClick می رسد.
مدیریت رویدادها در برنامه های وب
شما یاد گرفته اید که چگونه از Binding رویداد در Vue برای پیوست کردن شنوندگان رویداد به عناصر و نحوه فراخوانی متدها هنگام وقوع رویدادها استفاده کنید. شما همچنین درک کرده اید که چگونه از اصلاح کننده های رویداد برای سفارشی کردن رفتار رویداد استفاده کنید.
برنامه های وب برای انجام عملکردها به نوعی از رویدادهای کاربر متکی هستند. جاوا اسکریپت با روش های زیادی برای ضبط و مدیریت انواع این رویدادها تعبیه شده است. این رویدادها به ساخت برنامه های تعاملی کمک می کنند.