Vue.js מההתחלה

בס"ד הי כולם, מן הסתם אם הגעתם לכאן, יצא לכם להתעסק קצת בתכנות מונחה עצמים, או OOP. אז.. כן כן, גם בvue יש לנו אפשרות כזו. בבקשה: See the Pen vue - mixins - first example by adiel ( @adielsh ) on CodePen . כאן אנחנו רואים דוגמא של מופע vue, אובייקט (לא קומפוננט! אלא אובייקט רגיל ופשוט) בשם son, ועוד אובייקט בשם grandson. מכירים בבושקה? אז ממש דומה! כל אחד משני האובייקטים הנ"ל מכיל פונקציה שנקראת created המדפיסה את שם האובייקט מיד ביצירתו . ובנוסף, מכילה חלק הנקרא mixins שתפקידו הוא להכיל אובייקטים שונים ואת כל התוכן שלהם. אז אפשר לראות שכיוון שכל אחד מכיל את האובייקט שמעליו אז סדר ההדפסה יהיה נכד- בן -אבא. נשאלת השאלה, מה קורה כשישנן שתי פונקציות עם אותן שמות? See the Pen mixins conflict - vue by adiel ( @adielsh ) on CodePen . אז כמו שרואים בדוגמא כאן, הפונקציה של האובייקט הנוכחי  גוברת על הפוקנציה של כל אובייקט גוברת על האובייקטים האחרים שהוא יורש. כעת, נראה דוגמא לירושה מרובה: See the Pen mixins- multi mixins vue by adiel ( @ad...

בס"ד שלום לכולם, לסיכום החומר עד כה, הכנתי משחק שמאגד בתוכו הרבה מהחומר שהובא בפוסטים הקודמים. אז הנה המשחק: See the Pen GAME by adiel ( @adielsh ) on CodePen . אין כאן איזה חידוש רציני מהפוסטים הקודמים.. באופן כללי יצרתי מופע אב וcomponent בן, כל component כזה מייצג תא מה9 תאים. בתחילת המשחק ישנו טיימר חיצוני שקוצב את המשחק בזמן. ישנה פונקציה start שמתחילה את המשחק ולאחר אתחול הטיימר הפנימי קוראת לפונקציה render. הפונקציה render - יוצרת קריאה רקורסיבית לעצמה כל שניה (או פחות, תלוי ברמת קושי שבחרתם..) הקריאה כל שניה מבוצעת הודות לטיימר הפנימי. הפונקציה rand - משתמשת בפונקציית _random של ספריית loadsh המעולה (שווה להכיר!) הפונקציה clicked - מקבלת את טריגר הלחיצה מהקומפוננט בן, כאשר זה קורה, היא מזהה את הערך שנזרק מהקומפוננט והתקבל בפונקציה , במידה והערך true המשמעות היא שלחצנו על התא האדום, סך הנקודות שלנו עולה ב5! במידה והערך false אז סך הנקודות יורד ב5. כדי שלא יווצר מצב ששחקן לוחץ כמה פעמים על התא האדום וכך "גונב" כמה נקודות אז יצרתי נעילה...

בס"ד שלום לכולם! בפוסט זה אכתוב על נושא הslots בcomponents. אפתח בדוגמא: See the Pen components - slots by adiel ( @adielsh ) on CodePen . בדוגמא זו אני יוצר שני components שמוכלים בתוך אלמנט השורש. הcomponent בשם sec משתמש גם בcomponent בשם first. עד כאן מוכר.. כיוון שבcomponent בשם first ישנה תגית בשם slot, המשמעות היא שאם הcompontnet בשם sec שמשתמש בו, לא ייתן שום מימוש בתוך first  אז יישאר מה שכבר קיים בfirst,  אך כיוון שאני בדוגמא הכנסתי טקסט שונה לתוך הפקד (במקרה שלנו הbutton), אזי המילה "שלום", הוחלפה במילה "וברכה". כעת נראה דוגמא לnamed slots: See the Pen named slots by adiel ( @adielsh ) on CodePen . בדוגמא זו יצרתי slot עם שמות, כך שאני בוחר לדרוס את הslot הספציפי לפי השם שלו. ושאר החלקים בתוך הtemplate של הcomponent נשארים ללא שינוי.

בס"ד בפוסט הקודם התחלתי לגעת בנושא הcomponents. כפי שכבר כתבתי, component הוא נושא  מרכזי בVue. והוא למעשה עיקר המשמעות של עבודה עם vue. העובדה  שcomponents הן ישויות עצמאיות ולא תלויות בקוד שהולך מסביב, מאפשרת לנו לשתול אותן היכן שרק נרצה, והן יעשו את העבודה באותו האופן הכא והתם. כעת נראה דוגמא נוספת: See the Pen components props by adiel ( @adielsh ) on CodePen . בדוגמא זו אנו רואים מופע שורש, שלו מוצמדים 2 components. הcomponent הראשון פשוט מקבל מידע מה"אבא" שלו, ומציג אותו בתוך הtamplate של עצמו. ה component השני, מציג מידע אישי שלו, ולאחר מכן מידע מה"אבא" שלו.

בס"ד נושא ה components הוא אחד הדברים המרכזיים בVue. component מאפשרים לכמס קוד של js+html+css בתוך ישות עצמאית שלא תלויה בפרוייקט מסויים. כך שאפשר להרכיב פרוייקט מאוסף של components שמקבלות מידע ומעבירות מידע. נראה דוגמא: See the Pen components 1 by adiel ( @adielsh ) on CodePen . בדוגמא ישנו אתחול אובייקט מסוג Vue, הלא הוא מופע השורש (root instance) שחל על הexample# שהוא הroot element.  לאחר מכן שייכתי 2 components אל מופע השורש. כל component מכיל בתוכו תוכן html, שהוא הערך של מאפיין הtemplate. בדוגמא הזו, כהתחלה, הכנסתי רק תוכן html ללא לוגיקה. בחלק הhtml, פשוט מאוד! קראתי ל2 הcomponents ושמתי אותם בדף. אפשר להציג את הcomponents גם באופן הזה. See the Pen compontent from outside object by adiel ( @adielsh ) on CodePen . הcomponent, כמו מופע הroot Vue, הוא אובייקט.  להלן רשימה של מפתחות שמורים שנמצאים מובנים בתוך component: data   -  מכיל פונקציה שמחזירה אובייקט, המכיל בתוכו מידע השייך לcomponent. (שימו לב להבדל מ...

בס"ד כפי שראינו בפוסט הקודם, ישנם directives שתפקידם לבצע פעולות כבר בתוך הtemplate הלא הוא חלק הhtml. כעת נדבר עוד עלdirectives נוספים. נפתח בדוגמא: See the Pen v-model by adiel ( @adielsh ) on CodePen . נתחיל מחלק הJS: יש לנו data שמכיל בתוכו input1,input2 שהן מחרוזות פשוטות. וappear שמאותחל true פשוט מאוד.. בחלק הhtml: ישנו div כולל, עליו מופעל מופע הvue כפי שכבר הסברתי בפוסטים הקודמים. לאחר מכן, בדוגמא הראשונה, מופיע input טקסט, כשיש לה atribute של v-model. תפקידו הוא לקשר בין משתנה הנמצא בdata, לבין התצוגה, וזאת באופן דו כיווני.  v-model שונה מv-bind, כיוון שv-bind מקשר באופן חד כיווני (רק מהjs לכיוון הhtml), לעומת זאת ב v-model גם הhtml (כלומר, הקלט מהמשתמש) משפיע על הdata!  וכל שינוי בטקסט משפיע ישירות על הdata! זו דוגמא קלאסית לריאקטיביות המדהימה של vue, והפשטות בה היא ממומשת. בדוגמא השניה ניתן לראות span פשוט, שמופיע רק אם appear הוא ערך אמת. כיוון שכבר ראינו שappear מאותחל בtrue אזי הspan אכן יופיע. הspan גם מכיל @click,  וכפי שכ...

בפוסט זה אעסוק בנושא directives. כפי שראינו בפוסט הקודם, דף הHTML נראה באופן שונה כאשר עובדים עם vue. כביכול נוספות לדף תכונות נוספות שמאפשרות לvue לרנדר אותו באופן חכם ומקושר ישירות לחלק הJS שבפרוייקט. בדף זה אעבור על כמה מהמילות השמורות של vue להלן: directives, היוצרות קשר עם מופע הVue שנמצא בחלק הJS, וכל זאת ישירות מתוך דף הHTML  נעבור על דוגמא: See the Pen v-bind by adiel ( @adielsh ) on CodePen . ראשית נעבור על קובץ הjs. כפי שראינו כבר קודם, יש לנו איתחול של אובייקט מסוג Vue, הוא אובייקט השורש ממנו אנו מתחילים את העבודה. בתוכו יש את חלק הdata, שבדוגמא שלנו מכיל שדה name וcondition. ואת כל האובייקט הנ"ל אנו מכילים על תגית הHTML בשם example. נעבור על קובץ הHTML: התגית הראשונה example, עליה ועל כל מה שבתוכה פועל אובייקט הVue כאמור - כבר ידוע ומוכר.. התגית השניה מכילה דיירקטיב בשם v-bind, תפקידו הוא קישור אטריביוטים  מוכרים וידועים כדוגמת class, value וכדומה השייכים לפקדי html סטנדרטים, למידע שנמצא באובייקט הvue שלנו, ובנוסף אפשרות להוספת ...

בס"ד הי כולם, לאחר שהבנו בגדול איך נראה מופע של Vue, נעסוק כעת במחזור החיים (או באנגלית - life cycle ), של מופע הVue. בקושור כאן  מופיעה דיאגרמה הממחישה את הנאמר בהמשך באופן ויזואלי - מומלץ להציץ! ובכן, ניתן לראות שישנן ארבעה פונקציות מרכזיות שנמצאות בתוך מופע הvue, והן : created - מתרחשת ביצירת האובייקט על כל המידע והאירועים שלו. mounted - מתרחשת באתחול האלמנט בDOM (תצוגת הHTML) updated - מתרחשת כשישנו שינוי בDOM של האוביקט. destroyed - כאשר הפונקציה destroyed מתרחשת פונצקיה זו מופעלת. לכל אחת מהפונקציות הנ"ל ישנה פונקציה קודמת beforeCreated beforeMounted beforeUpdated beforeDestroyed נראה בהמשך שהlife cycle  הנ"ל רלוונטי גם לcomponents (לא להבהל - יוסבר בהמשך מהן components) יוצא מכל הנ"ל שאנחנו יכולים לשלוט היטב בתזמון של אירועים וזרימת מידע בתוך האובייקט, דבר שמאוד שימושי בהרבה סיטואציות. עד כאן להפעם...