از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
راهنمای مدیریت رویداد Vue با v-روی: موس، صفحه کلید، فرم و رویدادهای سفارشی مدیریت رویداد یک مفهوم بسیار مهم در هنگام تلاش برای ایجاد یک برنامه تعاملی است. به طور کلی، یک رویداد نشان دهنده تعامل بین یک کاربر و برنامه ما است – کلیک کردن، تایپ کردن روی یک صفحه کلید و غیره روی. برنامه های کاربردی تعاملی و واکنشی در اصل بر اساس مفهوم …
سرفصلهای مطلب
معرفی
رسیدگی به رویداد یک مفهوم بسیار مهم هنگام تلاش برای ایجاد یک برنامه تعاملی است. به طور کلی، یک رویداد نشانگر تعامل بین کاربر و برنامه ما است – کلیک کردن، تایپ کردن روی یک صفحه کلید و غیره روی. برنامه های کاربردی تعاملی و واکنشی، در اصل، بر اساس مفهوم واکنش به رویدادها ساخته شده اند – هر بار که یک رویداد شناسایی می شود، یک برنامه کاربردی یک تابع مربوطه را فراخوانی می کند که رویداد شناسایی شده را مدیریت می کند.
این توابع به نام شناخته می شوند گردانندگان رویداد.
Vue تفاوتی ندارد. دارای مکانیزم مدیریت رویداد است که به شما امکان می دهد رویدادها را از درون هر فایل جزء مستقل دریافت و مدیریت کنید. رویدادها می توانند به عنوان ورودی کاربر ظاهر شوند یا می توانیم به صورت دستی آنها را در کد ایجاد کنیم و در صورت نیاز آنها را منتشر کنیم.
در این مقاله، روش مدیریت رویدادها در Vue با استفاده از آن را بررسی خواهیم کرد
v-رویبخشنامه مدیریت رویداد ما را قادر می سازد جاوا اسکریپت را به عنوان پاسخی به رویدادهای DOM اجرا کنیم. ما یاد خواهیم گرفت که چگونه با آن برخورد کنیم کلیک، ارسال، طومار، و قدری صفحه کلید مناسبت ها.
v-روی دستورالعمل در Vue
Vue از v-روی دستورالعمل برای گرفتن و رسیدگی به رویدادها. این یک رویداد DOM را که به آن گوش می دهد تعریف می کند و یک تابع جاوا اسکریپت را اختصاص می دهد که هنگام شناسایی رویداد اجرا می شود:
<div v-روی:click="handleClick"/>
<div @click="handleClick"/>
توجه داشته باشید: v-روی دستورالعمل به جای هم استفاده می شود @ سمبل – v-روی:event-name برابر است با @event-name.
رویدادهای رایج در Vue
اتفاقات زیادی وجود دارد که می توان آنها را ضبط کرد! اگرچه، همه آنها استفاده نمی شوند روی به صورت روزانه اکثر رویدادهایی که معمولاً ردیابی می کنید را می توان به سه دسته تقسیم کرد: موش، صفحه کلید، و رویدادها را تشکیل می دهند.
هر یک از آنها دارای تمایزات خاصی هستند، بنابراین اجازه دهید نگاهی عمیق تر به هر گروه و روش رسیدگی به آنها بیندازیم.
رویدادهای ماوس در Vue
رویدادهای موش هر بار که کاربر روی یک مورد خاص کلیک کند، بکشد، رها کند یا کاری را با ماوس انجام دهد فعال می شوند. به عنوان مثال، کد زیر زمانی که کاربر یک هشدار می دهد کلیک می کند یک دکمه با استفاده از v-روی:click:
<div>
<!-- `v-روی:click` detects the click event -->
<button v-روی:click="showAlert('Thank you for clicking the button!')" >
Show alert
</button>
</div>
<script>
export default {
methods: {
showAlert: (message) => {
alert(message);
}
}
};
</script>
متناوبا، ما می توانیم از آن استفاده کنیم @ نماد و اجتناب از استفاده v-روی همانطور که در زیر مشاهده می شود:
<div>
<button @click="showAlert('Thank you for clicking the button!')">
Show alert
</button>
</div>
رویدادهای صفحه کلید در Vue
رویدادهای صفحه کلید زمانی فعال می شوند که کاربر دکمه خاصی را تایپ کند روی صفحه کلید. هنگامی که کاربر در حال فشار دادن یک کلید (keydown، شروع به فشار دادن یک کلید (keypress، یا کلیدی را رها می کند (keyup):
<input type='text' placeholder='Type something' @keypress='handleKeyPressed' @keydown='handleKeyDown' @keyup='handleKeyUp' />
برای مثال، فرض کنید می‌خواهیم یک هشدار برای نشان دادن آنچه در فیلد ورودی تایپ می‌شود، با فشار دادن کلید enter نشان دهد. روی صفحه کلید ما این را می توان به راحتی با استفاده از @keyup.enter:
<div>
<input type="text" v-model="name" @keyup.enter="showAlert(name)" />
</div>
<script>
export default {
data() {
return {
name: ""
};
},
methods: {
showAlert: (message) => {
alert(message);
}
}
};
</script>
با نگاهی به کد بالا، متوجه خواهید شد که ما اضافه کردیم اصلاح کننده های رویداد کلیدی – مانند .enter. اصلاح‌کننده‌های رویداد کلیدی در Vue پشتیبانی گسترده‌ای برای گوش دادن به ورودی‌های صفحه کلید ارائه می‌کنند.
اصلاح کننده رویداد کلیدی از ساختار پیروی می کند:
v-روی.keyevent.keyname
// Or
v-روی.keyevent.keycode
توجه داشته باشید: کدهای کلید به طور کلی هستند منسوخ و باید از استفاده از آنها خودداری کنید زیرا اکثر مرورگرهای مدرن دیگر از آنها پشتیبانی نمی کنند. استفاده از آنها فقط به دلایل قدیمی معقول است – اگر نیاز به پشتیبانی از مرورگرهای قدیمی دارید که از اصلاح کننده های نام کلید پشتیبانی نمی کنند.
Vue با ارائه نام مستعار برای رایج ترین کدهای کلیدی کار شما را آسان می کند – .enter، .tab، .delete (کلیدهای “Delete” و “Backspace” را محصور می کند)، .esc، .space، .up، .down، .left، .right.
در هر صورت، شما باید در صورت امکان از نام های کلید به جای کدهای کلیدی استفاده کنید – این راهی برای اثبات کد شما در آینده است!
نام های کلیدی از قرارداد نامگذاری ساده در Vue پیروی می کنند. اولین چیزی که باید بدانید این است که می توانید همه نام های کلیدی معتبر را در آن پیدا کنید KeyboardEvent.key. این نام ها از پوشش شتر استفاده می کنند (مثلاً CapsLock)، اما از نام های کلیدی در Vue استفاده می شود روکش کباب (به عنوان مثال caps-lock).
بنابراین، برای پیدا کردن یک نام کلید Vue معتبر، به نام آن نگاهی بیندازید KeyboardEvent.key و آن را به کباب خوری تبدیل کنید. به همین سادگی!
توجه داشته باشید: شما همچنین می توانید زنجیر چندین نام کلیدی مانند v-روی.keyup.ctrl.enter.
در صورتی که باید از کدهای کلیدی استفاده کنید، دوباره می توانید، حتی اگر توصیه نمی شود:
<input type="text" v-model="name" @keyup.13="showAlert(name)" />
کلید سیزدهم است “وارد”.
توجه داشته باشید: می توانید کدهای کلید را بررسی کنید اینجا.
رویدادها را در Vue تشکیل دهید
رویدادها را تشکیل دهید توسط اقدامات فرم مانند ارسال، تغییر فیلد ورودی و بسیاری موارد دیگر – با استفاده از نام‌های رویداد مانند :submit، :change، :reset. کد زیر نشان می دهد که چگونه می توانید یک پیام هشدار را هنگام ارسال داده های فرم ارسال کنید:
<form className="new-task" @submit="handleSubmit">
<input
type="text"
placeholder="Type to add new tasks"
v-model="newTask"
/>
</form>
<script>
export default {
data() {
return {
newTask: ""
};
},
methods: {
handleSubmit() {
alert(this.newTask);
}
}
};
</script>
نکته ای که باید هنگام مدیریت فرم های ارسالی در برنامه های جاوا اسکریپت در نظر داشته باشید این است که باید از نسخه بومی استفاده کنید. preventDefault() عملکرد رویداد ارسال قبل از اجرای تابع مدیریت فرم شما. در غیر این صورت، page قبل از اینکه تابع اعتبارسنجی فرم فرصتی برای تایید یک فرم داشته باشد، هدایت می شود. این به این دلیل است که به طور پیش‌فرض، اقدام مورد انتظار بعدی، ارسال داده‌ها به REST API سرور است که در اینجا نداریم.
این کار به راحتی با Vue با افزودن a انجام می شود prevent اصلاح کننده رویداد مستقیماً به قالب فرم، به جای انجام دستی آن در کنترلر خود. وقتی اضافه شد، الف prevent اصلاح کننده مطمئن می شود که رویداد ارسال مجدداً بارگیری نمی شود page. شایان ذکر است که اصلاح کننده بعد از درج شده است . در بخشنامه:
<form @submit.prevent="handleSubmit"></form>
Vue پیشنهاد می کند چندین اصلاح کننده رویداد که در سناریوهای رایج رسیدگی به رویداد مفید هستند:
.stop– توقف انتشار رویدادهای کلیک:
<a v-روی:click.stop="doThis"></a>
.capture– رویدادی که عنصر فرزند را هدف قرار می دهد، در یک عنصر والد، ابتدا توسط والد مدیریت می شود، قبل از اینکه به فرزند تفویض شود:
<div v-روی:click.capture="doThis"></div>
موارد دیگری مانند وجود دارد .self، .once، .passive، و غیره.
توجه داشته باشید: اصلاح کننده ها می توانند باشند زنجیر شده همچنین. مثلا v-روی:click.stop.prevent="handleClick".
نوشتن و انتشار رویدادهای سفارشی در Vue
تا کنون، ما در مورد مدیریت رویدادهای بومی بحث کرده ایم. حالا بیایید روش درست کردن را بررسی کنیم یک جزء رویداد خود را منتشر می کند، با توجه به اینکه Vue a است چارچوب مبتنی بر مؤلفه.
فرض کنید ما می خواهیم یک جزء فرزند اطلاعات را به یک جزء والد منتقل کند. داده های Prop فقط می توانند از والدین به فرزند ارسال شوند، نه برعکس، بنابراین ما نمی توانیم از آن در اینجا استفاده کنیم. راه حل این است که جزء فرزند یک رویداد را منتشر کند و والدین به آن گوش دهند.
هنگامی که می خواهید رویداد منتشر شود، استفاده کنید this.$emit("my-event-name") از جزء فرزند فرض کنید یک جزء داریم ChildComponent که باید به والدین خود اطلاع دهد MainPage که بسته شده است.
ChildComponent
export default {
methods: {
onClose() {
this.$emit('close-dialog');
},
},
};
علاوه بر این، شما همچنین می توانید داده ها را در رویداد سفارشی خود ارسال کنید. MainPage می تواند به آن داده ها در تابع کنترل کننده دسترسی پیدا کند close-dialog رویداد:
onClose() {
this.$emit("close-dialog", { time: Date.now() });
}
صفحه اصلی
جزء والد (MainPage) سپس می تواند رویداد سفارشی را دقیقاً مانند یک رویداد بومی مدیریت کند.
<div>
<dialog-component @close-dialog="handleEvent" />
</div>
کنترل کننده رویداد می تواند به داده های ارسال شده در زمانی که close-dialog رویداد منتشر شد:
handleEvent ({ time }) {
console.log(`The Dialog was closed at ${time}`);
}
نتیجه
در این مقاله، روش مدیریت رویدادها در Vue را با استفاده از آن یاد گرفتیم v-روی. ما رایج ترین انواع رویدادها – رویدادهای ماوس، رویدادهای فرم و رویدادهای صفحه کلید را توضیح داده ایم.
علاوه بر این، روش ایجاد رویدادهای سفارشی در Vue را توضیح داده‌ایم. پس از خواندن این مقاله، باید یک مرور کلی از مدیریت رویداد در Vue داشته باشید، باید بتوانید تمام رویدادهای بومی را مدیریت کنید و بتوانید رویدادهای سفارشی خود را از نشاسته ایجاد کنید.
منتشر شده در 1403-01-10 20:53:06
