components - חלק ב

-
בס"ד

 בפוסט הקודם התחלתי לגעת בנושא הcomponents.

 כפי שכבר כתבתי, component הוא נושא  מרכזי בVue. והוא למעשה עיקר המשמעות של עבודה עם vue.
העובדה  שcomponents הן ישויות עצמאיות ולא תלויות בקוד שהולך מסביב, מאפשרת לנו לשתול אותן היכן שרק נרצה,
והן יעשו את העבודה באותו האופן הכא והתם.



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