components - slots

-
בס"ד

שלום לכולם!

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

תגובות

הוסף רשומת תגובה

פוסטים פופולריים מהבלוג הזה

הקדמה

-
שלום לכולם! בבלוג זה אעסוק בע"ה בהסבר הספריה Vue.js, גרסא 2. ההחלטה לכתוב בלוג על ספריה זו נבעה מעיסוק רב בפיתוח צד לקוח, והבנה שהשימוש ב Vue מפשט מאוד את העבודה בצד לקוח. במהלך המדריך אשלב דוגמאות שונות כדי להבין באופן מוחשי את ההסברים המובאים. קצת רקע לספריית Vue: ספרית vue  היא ספריית צד לקוח שפותחה ע"י Evan You , במטרה לאגד את היתרונות בספריות מובילות אחרות כדוגמת React  וAngular.js, ולאחד אותם בתוך ספריה קיימת. ספריה זו צברה פופולריות רבה במהלך השנים האחרונות, (ובפרט בשנה האחרונה) וקצב הצמיחה שלה הוא מאוד מהיר, זאת תודות ליתרונות הרבים שהיא מאגדת בתוכה. בלוג זה מטרתו להנגיש את הדוגמאות המובאות באתר הרשמי של Vue וכמו גם להוסיף עליהן דוגמאות אחרות, וכל זאת בעברית! התוכן בבלוג מיועד לכאלו בעלי ידע בסיסי בג'אווהסקריפט, html, וcss. השימוש בבלוג זה באחריות המשתמש. כל התכנים בבלוג זה נכתבו כפי הבנתי, אי לכך ייתכנו טעויות או אי דיוקים כאלו ואחרים. במידה ומצאת כאלו, אשמח להארות/הערות. שיהיה בהנאה רבה! עדיאל.
המשך לקרוא

Directives - חלק א

-
בפוסט זה אעסוק בנושא 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 שלנו, ובנוסף אפשרות להוספת ...
המשך לקרוא

משחק מסכם

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