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 שלנו, ובנוסף אפשרות להוספת לוגיקה אם צריך.

בדוגמא כאן, לתוך האטריביוט class הכנסתי תנאי, שאם condition (ההוא שנמצא בdata..) הוא TRUE אז תיישם את מחלקת red (שבסה"כ צובעת את הטקסט באדום) על הdiv הזה.
פשוט מאוד!

נעבור הלאה..
בפסקה השניה יש לנו דיירקטיב בשם v-if, שתפקידו לגרום לאלמנט להיות קיים או לא, בהתאם לערך אותו הוא מקבל.
מובן שהערך אותו הוא מקבל אמור להיות בשורה תחתונה בולאני (אמת או שקר).
בדוגמא שלנו האטריביוט מקבל true ולכן הפסקה מופיעה.
מתחתיה יש פסקה המקבלת false ולכן היא לא מופיעה.

בדוגמא מתחת ישנו אטריביוט בשם v-show, הוא מאוד דומה לv-if, רק שאם הוא מקבל false, אזי האלמנט עדיין נמצא בדף הhtml אך לא מופיע בתצוגה כיוון שקיים עליה display: none;.

מוזמנים ללחוץ על מקש F12 ותחת כרטיסיית Elements לבדוק שאכן כך..

נמשיך הלאה, הדיירקטיב המוצג בדוגמא הינו v-for.

תפקידו הוא לבצע איטרציה על קבוצה, לדוגמא מערך.

בדוגמא שלנו, הv-for רץ על כל האיברים במערך personArr (שנמצא בdata..) ומדפיס כל פעם את הperson.name וזאת במידה והגיל אינו קטן מ20. (לכן משה לא מוצג)

בהמשך אכתוב בע"ה עוד על directives,
זהו לבינתיים..