components - חלק א

-
בס"ד

 נושא ה 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. (שימו לב להבדל מdata של מופע השורש - שם הdata פשוט מכיל מידע, אך כאן הdata מכיל פונקציה שמחזירה אובייקט של מידע).
methods - מכיל פונקציות השייכות לcomponent.
computed- מכיל פונקציות שמחזירות ערך.
watch - מאזין לשינויים במשתנים של הcomponent.
created
mounted
updated
destroyed

 עד כאן הרשימה כמעט זהה למופע השורש שראינו בפוסטים הקודמים.

אבל בפוסט הבא בעז"ה נראה אילו תוספות מיוחדות ישנן ל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. כדי שלא יווצר מצב ששחקן לוחץ כמה פעמים על התא האדום וכך "גונב" כמה נקודות אז יצרתי נעילה...
המשך לקרוא