צעדים ראשונים
מה שאנחנו רואים כאן זה מופע של VUE.
הרעיון מאוד פשוט:
אתחול של מופע מסוג Vue, הכנסת ערך לתוך הdata, והצגה של המידע לתוך{{}}, שתפקידם הוא לקשר את המידע שנמצא בתוך אחד המשתנים בתוך האובייקט, אל תוך דף הHTML.
כעת נראה דוגמא נוספת.
See the Pen vue example 2 by adiel (@adielsh) on CodePen.
כדי להבין את הדוגמא נקדים קצת על מבנה מופע הVue.
כשאני יוצר מופע מסוג Vue, אני בעצם יוצר אובייקט מיוחד, הבנוי להכיל מגוון ערכים:
לדוגמא: מידע פנימי, פונקציות, מידע חיצוני ועוד.
ישנם חלקים שונים באובייקט המופע. החלקים אותם הצגתי בדוגמא הם:
el - הוא מצביע על תגית הhtml עליה המופע יופעל.
data- אובייקט המכיל את המידע ששייך למופע שיצרנו.
methods - הפונקציות השייכות לאובייקט הVue שלנו.
computed- פונקציות המחזירות ערך, תפקידן הוא להציג באופן ספציפי מידע כלשהו שנרצה.
והן יכולות גם לבצע השמה של ערך.
נשאלת השאלהה, אם כך, מה ההבדל בינן לבין הmethods?
התשובה היא, שהן מתרנדרות רק כשהערך שנמצא בתוכן משנה את ערכו, מה שחוסך בזמן ריצה ובביצועי המערכת.
אם כן, ראינו חלק מהרכיבים של אובייקט המופע. כמובן שישנם עוד, ואותם נראה בהמשך אי"ה.
לאחר הקדמה זו נוכל להבין את הדוגמא טוב יותר:
חלק הhtml:
יש לנו את אלמנט השורש (root element) שהid שלו הוא exmaple, הוא למעשה האלמנט הראשי, וכל מופע הvue יחול על מה שנמצא בתוכו.
לאחר מכן אני מציג איזשהו מידע שנמצא לי בתוך מופע הvue, למידע הזה קראתי Message, (אפרט על כך עוד כמה שורות..)
בתוך התגית הראשית, יצרתי שני כפתורים, בלחיצה עליהם נקראת הפונקציה הכתובה בין הגרשיים. (הסימון @click הוא קיצור של v-on, שמזהה events שמופעל על אלמנט הhtml. בהמשך אסביר על כך בפירוט.
חלק הjs:
יצרתי מופע של vue, שיודע שהוא שייך לתגית השורש example, כיוון שאני אומר לו את זה מפורשות בel:example.
לאחר מכן בתוך הdata, שהוא למעשה אובייקט, שמרתי מידע בשם number שמכיל סתם מספר 123,
בחלק הmethods - יצירתי שתי פונקציות פשוטות שמוספיות או מפחיתות מהnumberהנמצא בdata.
שימו לב: הthis הוא המופע vue שיצרנו.
ובחלק הcomputed - אני מציג את הdata באופן אותו אני רוצה, כך שעשיתי תנאי שאם הnumber זוגי אז ידפיס את המספר בתוספת המילה "זוגי", אחרת ידפיס "אי זוגי". הפונקציה שעושה זאת נקראת Message. ואותה אני מדפיס בhtml כמו שראינו גם בדוגמא הקודמת.
כלומר ע"י סוגריים מסולסלים אני יכול להציג בתוך הhtml מידע הנמצא במופע הvue, או מידע שעבר עיבוד בתוך פונקצייה שנמצאת בcomputed.
עד כאן להפעם..
תגובות
הוסף רשומת תגובה