Vue.js מההתחלה

בס"ד שלום לכולם! בפוסט זה אכתוב על נושא ה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,  וכפי שכ...