למד כיצד להעלות את הטיפול באירוע שלך עם הוראת ה-v-on של Vue.

האזנה לאירועי משתמשים היא חלק בלתי נפרד מכל אפליקציית אינטרנט רספונסיבית, ואפליקציות Vue אינן יוצאות דופן. Vue מגיעה עם דרך פשוטה ויעילה לטפל באירועים עם הוראת ה-v-on שלה.

מה זה מחייב אירועים ב-Vue?

כריכת אירועים היא תכונה של Vue.js המאפשרת לך לצרף מאזין אירועים ל-a מודל אובייקט מסמך (DOM) אֵלֵמֶנט. כאשר מתרחש אירוע, מאזין האירועים מפעיל פעולה או תגובה באפליקציית Vue שלך.

אתה יכול להשיג קשירת אירועים ב-Vue עם ה v-on הוֹרָאָה. הנחיה זו מאפשרת לאפליקציה שלך להאזין לאירועי משתמשים כמו אירועי לחיצה, כניסה או מפתח.

לצרף מאזין אירועים לאלמנט באמצעות v-on, הוסף את שם האירוע כפרמטר להנחיה:

<html>
<רֹאשׁ>
<תַסרִיטsrc=" https://unpkg.com/vue@3/dist/vue.global.js">תַסרִיט>
רֹאשׁ>
<גוּף>
<divתְעוּדַת זֶהוּת="אפליקציה">
<לַחְצָןv-on: לחץ="counter++">לחץ עלילַחְצָן>
<ע>{{ counter}}ע>
div>
<תַסרִיט>
const app = Vue.createApp({
 נתונים() {
לַחֲזוֹר {
 טֶקסט: 'וו הוא מדהים!',
 מונה: 0
 }
 }
 })
 app.mount('אפליקציה#')
תַסרִיט>
גוּף>
html>

בלוק הקוד למעלה מציג דוגמה לאפליקציית Vue שמאזינה ל-a

instagram viewer
נְקִישָׁה מִקרֶה. בלוק הקוד משתמש ב-a לַחְצָן כדי להגדיל את דֶלְפֵּק ערך במאפיין הנתונים של מופע Vue באחד.

בלוק הקוד שלמעלה מחייב את ביטוי JavaScript counter++ לשל הכפתור נְקִישָׁה אירוע עם ה v-on הוֹרָאָה. Vue משתמש ב- @ תו כקיצור במקום ה v-on הנחיה בשל v-onהשימוש התכוף של:

<לַחְצָן @נְקִישָׁה="counter++">לחץ עלילַחְצָן>

קשירת אירועים ב-Vue אינה מוגבלת לאירועי קליקים. Vue מטפל באירועים אחרים, כמו אירועי לחיצה על מקשים, אירועי העברה בעכבר ועוד.

לקשור כל אחד מהאירועים הללו ל- v-on הוראה, החלף את נְקִישָׁה אירוע עם שם האירוע הרצוי:

<לַחְצָן @keydown.enter="counter++">לחץ עלילַחְצָן>

הקוד למעלה מגדיר מאזין אירועים ב- לַחְצָן שמקשיב ל מקלדת מִקרֶה. כאשר מקש כלשהו נלחץ בזמן שהלחצן מתמקד, Vue מעריך את counter++ ביטוי.

ברוב אפליקציות Vue, אתה יכול להתמודד עם היגיון מורכב יותר בהתבסס על אירועים ספציפיים המתרחשים. אירועים ושיטות עובדים יד ביד כדי לבצע פעולות אפליקציה על סמך אירוע.

השיטות נכסות ב אובייקט האפשרויות של Vue מחזיק בפונקציות חשובות שאפליקציית Vue שלך ​​צריכה עבור תגובתיות משופרת. עם מאפיין methods ב-Vue, אתה יכול לטפל בהיגיון מורכב המבוסס על אירועים.

הנה דוגמה לאפליקציית Vue המציגה אירועים המטופלים על ידי מאפיין המתודות:

<html>
<רֹאשׁ>
<תַסרִיטsrc=" https://unpkg.com/vue@3/dist/vue.global.js">תַסרִיט>
רֹאשׁ>
<גוּף>
<divתְעוּדַת זֶהוּת="אפליקציה">
<לַחְצָן @נְקִישָׁה="תוֹסֶפֶת">הוסף 1לַחְצָן>
<לַחְצָן @נְקִישָׁה="לְהַפחִית">להפחית 1לַחְצָן>
<ע>{{ counter }}ע>
div>
<תַסרִיט>
 const app = Vue.createApp({
 נתונים() {
 החזר {
 text: 'Vue זה מדהים!',
 מונה: 0
 }
 },
 שיטות: {
 תוֹסֶפֶת(){
 this.counter = this.counter + 1
 },
 reduce() {
 this.counter = this.counter - 1
 }
 }
 })
 app.mount('#app')
תַסרִיט>
גוּף>
html>

אפליקציית Vue למעלה מתארת ​​כיצד לקשר אירועים עם שיטות. לאפליקציה יש שני לחצנים שמשתמשים יכולים ללחוץ עליהם כדי להגדיל או להקטין את ערך המונה במאפיין הנתונים.

האפליקציה משיגה זאת עם @נְקִישָׁה הוֹרָאָה. ה @נְקִישָׁה ההנחיה מצביעה על הפונקציות במאפיין methods כדי לתפעל את ערך המונה.

בעת קישור ארגומנט לאירוע הקליק, אתה יכול להתאים אישית את התוספת ולהקטין שיטות כדי להוסיף או להקטין את ערך המונה בהתבסס על הארגומנט שאתה מעביר למתודה.

ככה:

<גוּף>
<divתְעוּדַת זֶהוּת="אפליקציה">
<לַחְצָן @נְקִישָׁה="תוספת (5)">הוסף 5לַחְצָן>
<לַחְצָן @נְקִישָׁה="להפחית (3)">להפחית 3לַחְצָן>
<ע>{{ counter }}ע>
div>


<תַסרִיט>
 const app = Vue.createApp({
 נתונים() {
 החזר {
 text: 'Vue זה מדהים!',
 מונה: 0
 }
 },
 שיטות: {
 תוספת (מספר){
 this.counter = this.counter + num
 },
 להפחית (מספר) {
 this.counter = this.counter - מספר
 }
 }
 })
 app.mount('#app')
תַסרִיט>
גוּף>

בלוק קוד זה משתרע על אפליקציית Vue הקודמת כדי לאפשר העברת ארגומנטים לשיטות המקושרות למאזין אירועי הלחיצה על הכפתור.

השיטות מגדילות ומקטינות במופע Vue לוקחות ארגומנט num כדי להגדיל או להקטין את מאפיין המונה.

דוגמה זו מראה כיצד ניתן לעבוד עם ארגומנטים בעת קישור שיטות עם אירועים ב-Vue. קישור שיטות לאירועים יכול לעזור להפוך את אפליקציות Vue לאינטראקטיביות יותר.

בחינת המשנים של מניעה ועצירה ב-Vue

מתקנים לאירועים ב-Vue מאפשרים לך ליצור מאזינים טובים יותר לאירועים הנותנים מענה לצרכים הספציפיים של האפליקציה שלך. כדי להשתמש במתאמים אלה, אתה משרשר את השינויים לאירועים ב-Vue.

לדוגמה:

<טופס @submit.prevent="handleSubmit">
<קֶלֶטסוּג="טֶקסט"דגם v="טֶקסט">
<לַחְצָןסוּג="שלח">שלחלַחְצָן>
טופס>

בלוק הקוד שלמעלה משרשר את לִמְנוֹעַ משנה לאירוע השליחה. ה לִמְנוֹעַ בדרך כלל נעשה שימוש ב-modifier כאשר עובדים עם טפסים ב-Vue.

ה לִמְנוֹעַ מטרת השינוי היא למנוע את התנהגות ברירת המחדל של שליחת טופס, שהיא לטעון מחדש את הדף. באמצעות לִמְנוֹעַ, Vue יכול להמשיך את התהליכים שלו בזמן שה handleSubmit השיטה דואגת להגשת הטופס.

דוגמה נוספת לשינוי שימושי מאוד היא תפסיק שינוי אירוע. ה תפסיק שינוי האירועים עוצר אירוע מלהתפשט במעלה עץ ה-DOM.

בדרך כלל, אירוע של רכיב צאצא HTML מבצבץ דרך עץ ה-DOM, ומפעיל את מאזיני האירועים המחוברים לרכיבי אב. אתה יכול למנוע זאת הפצת אירועים עם ה תפסיק לשנות ולמנוע מהאירוע להפעיל מאזינים נוספים לאירוע.

כדי להבין איך ה תפסיק השינוי עוצר את התפשטות האירועים במעלה עץ DOM, שקול את בלוק הקוד שלהלן:

<גוּף>
<divתְעוּדַת זֶהוּת="אפליקציה">
<div @נְקִישָׁה="חיצוני קליק"מעמד="חִיצוֹנִי">
<div @click.stop="innerClick"מעמד="פְּנִימִי">
<לַחְצָן @נְקִישָׁה="לחצן קליק"מעמד="לַחְצָן">לחץ עלילַחְצָן>
div>
div>
div>
<תַסרִיט>
 const app = Vue.createApp({
 שיטות: {
 outerClick() {
 console.log('לחיצה חיצונית')
 },
 innerClick() {
 console.log('קליק פנימי')
 },
 buttonClick() {
 console.log('לחיצה על כפתור')
 }
 }
 });
 app.mount("#app");
תַסרִיט>
גוּף>

לבלוק הקוד למעלה יש שלושה מאזינים לאירועים המחוברים לשלושה אלמנטים שונים. ה לַחְצָן האלמנט נמצא בתוך ה-div עם ה- פְּנִימִי כיתה, בעוד ה-div עם ה פְּנִימִי הכיתה נמצאת בתוך ה-div עם ה חִיצוֹנִי מעמד.

כל אחד משלושת האלמנטים מאזין עבור א נְקִישָׁה אירוע ויומנים למסוף, שם רכיב ה-HTML לחצו. להלן סגנון CSS נוסף בכיתה כדי להפוך את בלוק הקוד לעיל לקל יותר להבנה:

<רֹאשׁ>
<סִגְנוֹן>
 .outer {
 ריפוד: 20px;
 צבע רקע: שחור;
 }
 .inner {
 ריפוד: 20px;
 צבע רקע: אפור;
 }
 כפתור {
 ריפוד: 10px;
 צבע רקע: לבן;
 גבול: 2px שחור מלא;
 גודל גופן: 16px;
 מודגש;
 סמן: מצביע;
 }
סִגְנוֹן>
רֹאשׁ>

בהפעלת התוכנית, אפליקציית Vue שנוצרה תיראה כך:

שים לב שכאשר אתה לוחץ על הכפתור, התוכנית קוראת ל- לחצן לחץ שיטה ורושמת הודעה למסוף. התוכנית מכנה גם את innerClick שיטה.

עם זאת, התוכנית לא קוראת ל- חיצוני קליק שיטה מכיוון שבלוק הקוד הוסיף א תפסיק משנה ל- innerClick מאזין אירועים. זה מונע מהאירוע להתפשט בהמשך עץ ה-DOM.

בלי ה תפסיק משנה, התוכנית תקרא ל- לחצן לחץ שיטה כאשר תלחץ על הכפתור, והאירוע ימשיך להתפשט במעלה העץ, ויגיע ל- innerClick השיטה ולאחר מכן את חיצוני קליק שיטה.

טיפול באירועים באפליקציות אינטרנט

למדת כיצד להשתמש באיגוד אירועים ב-Vue כדי לצרף מאזיני אירועים לאלמנטים וכיצד לקרוא לשיטות כאשר מתרחשים אירועים. הבנת גם כיצד להשתמש במדיפי אירועים כדי להתאים אישית את התנהגות האירוע.

אפליקציות אינטרנט מסתמכות על צורה כלשהי של אירועי משתמש כדי לבצע פונקציות. JavaScript מגיע מובנה עם הרבה שיטות ללכוד ולטפל במגוון אירועים אלה. אירועים אלו עוזרים בבניית אפליקציות אינטראקטיביות.