Directives - חלק ב
בס"ד
כפי שראינו בפוסט הקודם, ישנם directives שתפקידם לבצע פעולות כבר בתוך הtemplate הלא הוא חלק הhtml.
כעת נדבר עוד עלdirectives נוספים.
נפתח בדוגמא:
נתחיל מחלק ה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, וכפי שכבר ראינו זהו event, שבמקרה שלנו משמעותו שבלחיצה על הspan הevent יהפוך לערך ההפוך שלו (true יהפוך לfalse, ואם appear הוא false אז יהפוך לtrue).
הspan מכיל טקסט שהוא הinput2 שמופיע בחלק הdata.
מתחתיו ישנה input טקסט המופיעה רק אם appear הוא false, כלומר בהתחלה היא לא תופיע (כי כאמור, appear מאותחל לtrue, הטקסט שיופיע בה הוא מה שנמצא בdata, וכיוון שיש לנו כאן v-model, אזי כל שינוי שנבצע בטקסט ישפיע על הdata, כאמור לעיל.
בסוף ישנם כמה events, שאומרים שבלחיצה על מקש אנטר, או בקליק, או ביציאה מפוקוס בinput, אזי הappear ישתנה לtrue, וממילא הinput יעלם לו, ובמקומו יופיע לו הspan.
פשוט ומגניב!
עד כאן להפעם..
כפי שראינו בפוסט הקודם, ישנם directives שתפקידם לבצע פעולות כבר בתוך הtemplate הלא הוא חלק הhtml.
כעת נדבר עוד עלdirectives נוספים.
נפתח בדוגמא:
נתחיל מחלק ה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, וכפי שכבר ראינו זהו event, שבמקרה שלנו משמעותו שבלחיצה על הspan הevent יהפוך לערך ההפוך שלו (true יהפוך לfalse, ואם appear הוא false אז יהפוך לtrue).
הspan מכיל טקסט שהוא הinput2 שמופיע בחלק הdata.
מתחתיו ישנה input טקסט המופיעה רק אם appear הוא false, כלומר בהתחלה היא לא תופיע (כי כאמור, appear מאותחל לtrue, הטקסט שיופיע בה הוא מה שנמצא בdata, וכיוון שיש לנו כאן v-model, אזי כל שינוי שנבצע בטקסט ישפיע על הdata, כאמור לעיל.
בסוף ישנם כמה events, שאומרים שבלחיצה על מקש אנטר, או בקליק, או ביציאה מפוקוס בinput, אזי הappear ישתנה לtrue, וממילא הinput יעלם לו, ובמקומו יופיע לו הspan.
פשוט ומגניב!
עד כאן להפעם..
תודה רבה
השבמחקהחומר מדהים!!!!!!!!!1
וממש נוח