Vue.js

Vue.js (המכונה בדרך כלל Vue; מבוטא "וִיוּ" כמו "view" ) היא שלד תוכנה בקוד פתוח של model–view–viewmodel פרונטאנד JavaScript לבניית ממשקי משתמש ויישומי עמוד בודד. השלד נוצר על ידי אוון יו, ומתוחזק על ידו ועל ידי שאר חברי צוות הליבה הפעילים. Vue.js כולל ארכיטקטורה הניתנת להתאמה הדרגתית ומתמקדת בעיבוד הצהרתי והרכבת רכיבים. ספריית הליבה מתמקדת בשכבת התצוגה בלבד. תכונות מתקדמות הנדרשות ליישומים מורכבים כגון ניתוב, ניהול מצב וכלי בנייה מוצעים באמצעות ספריות וחבילות תומכות שמתוחזקות באופן רשמי. Vue.js מאפשר הרחבת HTML עם תכונות HTML הנקראות הנחיות. ההנחיות מציעות פונקציונליות ליישומי HTML ומגיעות כהנחיות מובנות או בהגדרת משתמש. Vue נוצר על ידי אוון יו לאחר שעבד עבור Google באמצעות AngularJS במספר פרויקטים. מאוחר יותר הוא סיכם את תהליך החשיבה שלו: "חשבתי, מה אם אני יכול פשוט לחלץ את החלק שמאוד אהבתי ב-Angular ולבנות משהו ממש קליל". תרומת קוד המקור הראשונה לפרויקט הייתה מתוארכת ליולי 2013, ו-Vue שוחרר לראשונה בפברואר הבא, ב-2014. שמות הגרסאות נגזרים לעיתים קרובות ממנגה ואנימה, רובם בתוך ז'אנר המדע הבדיוני. כאשר משוחררת גרסה עיקרית חדשה, כלומר v3.yz, הגרסה המשנית האחרונה, כלומר 2.xy הופכת לגרסת LTS (תמיכה ארוכת טווח) למשך 18 חודשים (תיקוני באגים ותיקוני אבטחה) ובמשך 18 החודשים הבאים יהיה במצב תחזוקה (תיקוני אבטחה בלבד). רכיבי Vue מרחיבים רכיבי HTML בסיסיים כדי להכיל קוד לשימוש חוזר. ברמה גבוהה, רכיבים הם אלמנטים מותאמים אישית שאליהם מצרף המהדר של ה-Vue התנהגות. ב-Vue, רכיב הוא בעצם מופע Vue עם אפשרויות מוגדרות מראש. קטע הקוד שלהלן מכיל דוגמה של רכיב Vue. הרכיב מציג כפתור ומדפיס את מספר הפעמים שהלחצן נלחץ: <template> <div id="tuto"> <button-clicked v-bind:initial-count="0"></button-clicked> </div> </template> <script> Vue.component('button-clicked', { props: ['initialCount'], data: () => ({ count: 0, }), template: '<button v-on:click="onClick">Clicked {{ count }} times</button>', computed: { countTimesTwo() { return this.count * 2; }, }, watch: { count(newValue, oldValue) { console.log(`The value of count is changed from ${oldValue} to ${newValue}.`); }, }, methods: { onClick() { this.count += 1; }, }, mounted() { this.count = this.initialCount; }, }); new Vue({ el: '#tuto', }); </script> Vue משתמש בתחביר תבנית מבוסס HTML המאפשר לקשור את ה-DOM המעובד לנתונים באובייקט של Vue. כל תבניות Vue הן HTML חוקי שניתן לנתח על ידי דפדפנים תואמי מפרט ומנתחי HTML. ה-Vue מרכיב את התבניות לפונקציות עיבוד של DOM וירטואליות. מודל אובייקט מסמך וירטואלי (או "DOM") מאפשר ל-Vue לעבד רכיבים בזיכרון שלו לפני עדכון הדפדפן. בשילוב עם מערכת התגובתיות, Vue יכול לחשב את המספר המינימלי של רכיבים לעיבוד מחדש ולהחיל את הכמות המינימלית של מניפולציות DOM כאשר מצב האפליקציה משתנה. Vue כולל מערכת תגובתיות המשתמשת באובייקטי JavaScript פשוטים ובעיבוד מחדש מאופטם. כל רכיב עוקב אחר התלות התגובתית שלו במהלך העיבוד שלו, כך שהמערכת יודעת בדיוק מתי לעבד מחדש, ואילו רכיבים לעבד מחדש. Vue מספקת מגוון דרכים להחיל אפקטי מעבר כאשר פריטים מוכנסים, מתעדכנים או מוסרים מה-DOM. זה כולל כלים ל: החלה באופן אוטומטי של קלאסים עבור מעברי CSS ואנימציות אינטגרציה של ספריות צד שלישי אנימציה CSS, כגון Animate.css שימוש ב-JavaScript כדי לבצע מניפולציה ישירה של ה-DOM במהלך Hooking של מעברים אינטגרציה של ספריות צד שלישי אנימציה של JavaScript, כגון Velocity.js כאשר אלמנט עטוף ברכיב מעבר מוכנס או מוסר, זה מה שקורה: Vue ירחרח אוטומטית אם לרכיב היעד יש מעברי CSS או הנפשות. אם כן, קלאסים של מעבר CSS יתווספו או יוסרו בתזמונים המתאימים. אם רכיב המעבר סיפק Hooking ל-JavaScript, הוקים אלה ייקראו בתזמונים המתאימים. אם לא מזוהים מעברי CSS או אנימציות ולא מסופקים הוקים של JavaScript, פעולות ה-DOM להכנסה או הסרה יבוצעו מיד בפריים הבא. חיסרון מסורתי של יישומי דף יחיד (SPA) הוא חוסר היכולת לשתף קישורים לדף ה"משנה" המדויק בתוך דף אינטרנט ספציפי. מכיוון שיישומים מסוג זה מספקים למשתמשים שלהם רק תגובה אחת המבוססת על כתובת אתר מהשרת (הוא משרת בדרך כלל index.html או index.vue), שמירה כסימניה של מסכים מסוימים או שיתוף קישורים לקטעים ספציפיים היא בדרך כלל קשה עד בלתי אפשרית. כדי לפתור בעיה זו, נתבים רבים בצד הלקוח מגדירים את כתובות האתרים הדינמיות שלהם ב-" hashbang " (#!), למשל page.com/#! / . עם זאת, עם HTML5 רוב הדפדפנים המודרניים תומכים בניתוב ללא hashbangs. Vue מספקת ממשק לשינוי מה שמוצג בדף בהתבסס על נתיב ה-URL הנוכחי - ללא קשר לאופן שבו הוא שונה (בין אם באמצעות קישור שנשלח בדוא"ל, רענון או קישורים בתוך הדף). בנוסף, שימוש בנתב בפרונטאנד מאפשר מעבר מכוון של נתיב הדפדפן כאשר אירועי דפדפן מסוימים (כלומר קליקים) מתרחשים על כפתורים או קישורים. Vue עצמו אינו מגיע עם ניתוב, אבל חבילת הקוד הפתוח "vue-router" מספקת API לעדכון כתובת ה-URL של האפליקציה, תומכת בלחצן 'הקודם' (היסטוריית ניווט), ואיפוסי סיסמה בדוא"ל או קישורי אימות בדוא"ל עם פרמטרים של כתובת URL לאימות. הוא תומך במיפוי מסלולים מקוננים לרכיבים מקוננים ומציע בקרת מעבר מדויקת. עם Vue, מפתחים כבר מחברים יישומים עם אבני בניין קטנות הבונות רכיבים גדולים יותר. עם ה-vue-router שנכנס לתמונה, יש למפות רכיבים רק למסלולים שאליהם הם שייכים, ומסלולי הורה/שורש חייבים לציין היכן אלמנטים צאצאים צריכים להופיע. <div id="app"> <router-view></router-view> </div> ... <script> ... const User = { template: '<div>User {{ $route.params.id }}</div>' }; const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }); ... </script> מגדיר נתיב פרונטאנד בכתובת websitename.com/user/<id> . אשר יעבד ברכיב המשתמש המוגדר ב- (const User. . . ) מאפשר לרכיב המשתמש להעביר את המזהה המסוים של המשתמש שהוקלד בכתובת האתר באמצעות מפתח params של אובייקט $route: $route.params.id . תבנית זו (המשתנה לפי הפרמטרים המועברים לנתב) תעובד ל- <router-view></router-view> בתוך ה-div#app של ה-DOM. ה-HTML שנוצר לבסוף עבור מישהו שמקליד: websitename.com/user/1 יהיה: <div id="app"> <div> <div>User 1</div> </div> </div> ספריית הליבה מגיעה עם כלים וספריות שפותחו על ידי צוות הליבה והתורמים. Devtools - תוסף דפדפן devtools לאיתור באגים ביישומי Vue.js Vue CLI - כלי עבודה סטנדרטיים לפיתוח מהיר של Vue.js Vue Loader – טוען webpack המאפשר כתיבה של רכיבי Vue בפורמט הנקרא Single-File Components (SFCs) Vue Router - הנתב הרשמי Vuex - ניהול מצב מרכזי בהשראת Flux Vue Server Renderer - עיבוד בצד השרת פיניה (Pinia)– ניהול מצב פשוט React Angular ספריית JavaScript Model–View–ViewModel מדיה וקבצים בנושא Vue.js בוויקישיתוף אתר האינטרנט הרשמי של Vue.js (באנגלית) Vue.js: The Documentary, סרט תיעודי ביוטיוב "Introduction". Vuejs.org (באנגלית). נבדק ב-3 בינואר 2020. {{cite web}}: (עזרה) "Meet the Team". Vuejs.org (באנגלית). נבדק ב-23 בספטמבר 2019. {{cite web}}: (עזרה) "Evan is creating Vue.js". Patreon (באנגלית). נבדק ב-11 במרץ 2017. {{cite web}}: (עזרה) "What is Vue.js". W3Schools (באנגלית). נבדק ב-21 בינואר 2020. {{cite web}}: (עזרה) "Evan You". Between the Wires (באנגלית). 3 בנובמבר 2016. אורכב מ-המקור ב-3 ביוני 2017. נבדק ב-26 באוגוסט 2017. {{cite news}}: (עזרה) "v3.3.0 Rurouni Kenshin". Vue.js (באנגלית). 11 במאי 2023. נבדק ב-2023-05-12 – via GitHub. {{cite web}}: (עזרה) "v3.2.0 Quintessential Quintuplets". Vue.js (באנגלית). 5 באוגוסט 2021. נבדק ב-10 באוגוסט 2021 – via GitHub. {{cite web}}: (עזרה) "v3.1.0 Pluto". Vue.js (באנגלית). 7 ביוני 2021. נבדק ב-18 ביולי 2021 – via GitHub. {{cite web}}: (עזרה) "v3.0.0 One Piece". Vue.js (באנגלית). 18 בספטמבר 2020. נבדק ב-23 בספטמבר 2020 – via GitHub. {{cite web}}: (עזרה) "v2.7.0 Naruto". Vue.js (באנגלית). 1 ביולי 2022. נבדק ב-1 ביולי 2022 – via GitHub. {{cite web}}: (עזרה) "v2.6.0 Macross". Vue.js (באנגלית). 4 בפברואר 2019. נבדק ב-23 בספטמבר 2020 – via GitHub. {{cite web}}: (עזרה) "v2.5.0 Level E". Vue.js (באנגלית). 13 באוקטובר 2017. נבדק ב-23 בספטמבר 2020 – via GitHub. {{cite web}}: (עזרה) "v2.4.0 Kill la Kill". Vue.js (באנגלית). 13 ביולי 2017. נבדק ב-23 בספטמבר 2020 – via GitHub. {{cite web}}: (עזרה) "v2.3.0 JoJo's Bizarre Adventure". Vue.js (באנגלית). 27 באפריל 2017. נבדק ב-23 בספטמבר 2020 – via GitHub. {{cite web}}: (עזרה) "v2.2.0 Initial D". Vue.js (באנגלית). 26 בפברואר 2017. נבדק ב-23 בספטמבר 2020 – via GitHub. {{cite web}}: (עזרה) "v2.1.0 Hunter X Hunter". Vue.js (באנגלית). 22 בנובמבר 2016. נבדק ב-23 בספטמבר 2020 – via GitHub. {{cite web}}: (עזרה) "v2.0.0 Ghost in the Shell". Vue.js (באנגלית). 30 בספטמבר 2016. נבדק ב-23 בספטמבר 2020 – via GitHub. {{cite web}}: (עזרה) "1.0.0 Evangelion". Vue.js (באנגלית). 27 באוקטובר 2015. נבדק ב-23 בספטמבר 2020 – via GitHub. {{cite web}}: (עזרה) "0.12.0: Dragon Ball". Vue.js (באנגלית). 12 ביוני 2015. נבדק ב-23 בספטמבר 2020 – via GitHub. {{cite web}}: (עזרה) "v0.11.0: Cowboy Bebop". Vue.js (באנגלית). 7 בנובמבר 2014. נבדק ב-23 בספטמבר 2020 – via GitHub. {{cite web}}: (עזרה) "v0.10.0: Blade Runner". Vue.js (באנגלית). 23 במרץ 2014. נבדק ב-23 בספטמבר 2020 – via GitHub. {{cite web}}: (עזרה) "v0.9.0: Animatrix". Vue.js (באנגלית). 25 בפברואר 2014. נבדק ב-23 בספטמבר 2020 – via GitHub. {{cite web}}: (עזרה) "v0.8.0". Vue.js (באנגלית). 27 בינואר 2014. נבדק ב-23 בספטמבר 2020 – via GitHub. {{cite web}}: (עזרה) "v0.7.0". Vue.js (באנגלית). 24 בדצמבר 2013. נבדק ב-23 בספטמבר 2020 – via GitHub. {{cite web}}: (עזרה) "0.6.0: VueJS". Vue.js (באנגלית). 8 בדצמבר 2013. נבדק ב-23 בספטמבר 2020 – via GitHub. {{cite web}}: (עזרה) "Vue Roadmap". Vue.js (באנגלית). 6 בנובמבר 2022 – via GitHub. {{cite web}}: (עזרה) "Components". Vuejs.org (באנגלית). נבדק ב-11 במרץ 2017. {{cite web}}: (עזרה) "Reactivity in Depth". Vuejs.org (באנגלית). נבדק ב-11 במרץ 2017. {{cite web}}: (עזרה) "Transition Effects". Vuejs.org (באנגלית). נבדק ב-11 במרץ 2017. {{cite web}}: (עזרה) "Transitioning State". Vuejs.org (באנגלית). נבדק ב-11 במרץ 2017. {{cite web}}: (עזרה) "Routing". Vuejs.org (באנגלית). נבדק ב-11 במרץ 2017. {{cite web}}: (עזרה)