Vue.js היא ספרייה רבת עוצמה, קלה ללימוד ונגישה, שעם הידע ב- HTML, CSS ו- Javascript, נוכל להתחיל לבנות בה יישומי אינטרנט. Vue.js נבנה על ידי שילוב התכונות הטובות ביותר ממסגרת Angular קיימת כבר. זוהי מסגרת מתקדמת ותגובתית של Javascript המשמשת לבניית ממשקי משתמש (ממשקי משתמש) ו- SPA (יישומים בדף יחיד), ולכן המפתחים אוהבים לקודד ולהרגיש חופש ונוחות בעת פיתוח יישומים ב- Vue.js. אם אנו תסתכל על האזנה וטיפול באירועים ב- Vue.js., נדע שהיא מספקת הנחיית v-on להאזנה וטיפול באירועים. אנו יכולים להשתמש בהנחיית v-on כדי להאזין ל- DOM ולבצע את המשימות הנדרשות. הוא מספק גם מטפלים לאירועים רבים. עם זאת, במאמר זה, נלמד רק ונשמור על מיקודנו באירועי הקלקות. אז בואו נתחיל!
בדיוק כמו אירוע onClick של Javascript, Vue.js מספק v-on: click לאירועי האזנה.
התחביר לאירוע v-on: click יהיה כזה:
< לַחְצָן v-on: לחץ='functionName'>נְקִישָׁה</ לַחְצָן >
Vue.js מספקת קצרנות @ במקום להשתמש גם ב- v-on.
< לַחְצָן @נְקִישָׁה='functionName'> לחץ</ לַחְצָן >
Vue.js לא מפסיק רק להאזין לאירוע הקלקות ולקרוא לפונקציה. זה גם יאפשר לנו לכתוב ישירות כל פעולת חשבון או כל דבר שקשור ל- Javascript בתוך המרכאות. בדיוק ככה:
< לַחְצָן @נְקִישָׁה='num += 1'> הוסף</ לַחְצָן >
Vue.js מספקת לנו לקרוא לשיטה או לפונקציה בהצהרת Javascript מוטבעת, כפי שמוצג להלן:
< לַחְצָן @נְקִישָׁה='הודעה (' היי ')'> הצג</ לַחְצָן >באמצעות מטפלים לאירועים של Vue.js, נוכל לגשת לאירוע DOM גם באמצעות משפט מוטבע, על ידי העברת משתנה האירוע $ של Vue.js המסופק במיוחד לטענת השיטה, בדיוק כמו הדוגמה שלהלן:
< לַחְצָן @נְקִישָׁה='הודעה (' היי ', $ אירוע)'> שלח</ לַחְצָן >
Vue.js מספק לנו גם לקרוא למספר פונקציות או שיטות. אנו יכולים לקרוא ליותר מפונקציה אחת ולהפריד ביניהם באמצעות פסיקים, כמו דוגמה זו:
< לַחְצָן @נְקִישָׁה='הראשון (' שלום '), השני (' היי ', אירוע $)> שלח</ לַחְצָן >Vue.js מספקת גם שינויי אירועים.
משני אירועים
לעתים קרובות אנו צריכים לקרוא לשינויים יחד עם האירועים. אז Vue.js מספק כמה מהשינויים הבאים:
.תפסיק
זה יעצור את שידור אירוע הקליקים.
< ל @click.stop='תעשה את זה'></ ל >.לִמְנוֹעַ
זה ימנע את טעינת הדף מחדש או הפניה מחדש.
< טופס @submit.prevent='onSubmit'></ טופס >.פַּעַם
זה יפעיל את אירוע הקלקות רק פעם אחת.
< ל @קליק. פעם='תעשה את זה'></ ל >.לִלְכּוֹד
הוא משמש בעיקר להוספת מאזין לאירועים.
< div @click.capture='תעשה את זה'> ...</ div >אנו יכולים גם לרשת את השינויים. עם זאת, זכור כי סדר המשנים אכן משנה, וזה ישפיע על התוצאות.
< ל @click.stop.prevent='לעשות את זה'></ ל >סיכום
במאמר זה, סקרנו את כל מושגי הטיפול באירועי קליק החל מה- noob ועד רמת הנינג'ה. למדנו על התחבירים השונים של כתיבת אירועי קליק והדרכים השונות לשימוש | _+_ | הנחיה המסופקת על ידי Vue.js לנוחות המפתחים ומשתני אירועים שונים. לקבלת תוכן שימושי יותר כמו זה הקשור ל- Vue.js, המשך לבקר ב- linuxhint.com.