Loading AI tools
שלד תוכנה בקוד פתוח מוויקיפדיה, האנציקלופדיה החופשית
Vue.js (המכונה בדרך כלל Vue; מבוטא "וִיוּ" כמו "view"[1] ) היא שלד תוכנה בקוד פתוח של model–view–viewmodel פרונטאנד JavaScript לבניית ממשקי משתמש ויישומי עמוד בודד. השלד נוצר על ידי אוון יו, ומתוחזק על ידו ועל ידי שאר חברי צוות הליבה הפעילים. [2]
מחזור חיים | פברואר 2014 – הווה (כ־10 שנים) |
---|---|
גרסה אחרונה | 3.5.0 (1 בספטמבר 2024) |
מערכת הפעלה | חוצה-פלטפורמות |
נכתבה בשפות | JavaScript, TypeScript |
סוג רישיון | רישיון MIT |
קוד מקור | https://github.com/vuejs/core |
vuejs | |
Vue.js כולל ארכיטקטורה הניתנת להתאמה הדרגתית ומתמקדת בעיבוד הצהרתי והרכבת רכיבים. ספריית הליבה מתמקדת בשכבת התצוגה בלבד.[1] תכונות מתקדמות הנדרשות ליישומים מורכבים כגון ניתוב, ניהול מצב וכלי בנייה מוצעים באמצעות ספריות וחבילות תומכות שמתוחזקות באופן רשמי.[3]
Vue.js מאפשר הרחבת HTML עם תכונות HTML הנקראות הנחיות.[4] ההנחיות מציעות פונקציונליות ליישומי HTML ומגיעות כהנחיות מובנות או בהגדרת משתמש.
Vue נוצר על ידי אוון יו לאחר שעבד עבור Google באמצעות AngularJS במספר פרויקטים. מאוחר יותר הוא סיכם את תהליך החשיבה שלו: "חשבתי, מה אם אני יכול פשוט לחלץ את החלק שמאוד אהבתי ב-Angular ולבנות משהו ממש קליל". [5] תרומת קוד המקור הראשונה לפרויקט הייתה מתוארכת ליולי 2013, ו-Vue שוחרר לראשונה בפברואר הבא, ב-2014.
שמות הגרסאות נגזרים לעיתים קרובות ממנגה ואנימה, רובם בתוך ז'אנר המדע הבדיוני.
גִרְסָה | תאריך הוצאה | כותרת | סוף LTS | סוף החיים |
---|---|---|---|---|
3.3 | 11 במאי 2023 | רורואוני קנשין[6] | ||
3.2 | 5 באוגוסט 2021 | חמישיות עיקריות [7] | ||
3.1 | 7 ביוני 2021 | פלוטו [8] | ||
3.0 | 18 בספטמבר 2020 | One Piece [9] | ||
2.7 | 1 ביולי 2022 | נארוטו [10] | 31 בדצמבר 2023 | 31 בדצמבר 2023 |
2.6 | 4 בפברואר 2019 | מקרוס [11] | 18 במרץ 2022 | 18 בספטמבר 2023 |
2.5 | 13 באוקטובר 2017 | רמה E [12] | ||
2.4 | 13 ביולי 2017 | קיל לה קיל [13] | ||
2.3 | 27 באפריל 2017 | ההרפתקה המוזרה של ג'וג'ו [14] | ||
2.2 | 26 בפברואר 2017 | ראשי D [15] | ||
2.1 | 22 בנובמבר 2016 | האנטר אקס האנטר [16] | ||
2.0 | 30 בספטמבר 2016 | רוח רפאים במעטפת [17] | ||
1.0 | 27 באוקטובר 2015 | אוונגליון [18] | ||
0.12 | 12 ביוני 2015 | דרגון בול [19] | ||
0.11 | 7 בנובמבר 2014 | קאובוי ביבופ [20] | ||
0.10 | 23 במרץ 2014 | בלייד ראנר [21] | ||
0.9 | 25 בפברואר 2014 | Animatrix [22] | ||
0.8 | 27 בינואר 2014 | —[23] | ||
0.7 | 24 בדצמבר 2013 | —[24] | ||
0.6 | 8 בדצמבר 2013 | VueJS [25] |
כאשר משוחררת גרסה עיקרית חדשה, כלומר v3.yz, הגרסה המשנית האחרונה, כלומר 2.xy הופכת לגרסת LTS (תמיכה ארוכת טווח) למשך 18 חודשים (תיקוני באגים ותיקוני אבטחה) ובמשך 18 החודשים הבאים יהיה במצב תחזוקה (תיקוני אבטחה בלבד). [26]
רכיבי Vue מרחיבים רכיבי HTML בסיסיים כדי להכיל קוד לשימוש חוזר. ברמה גבוהה, רכיבים הם אלמנטים מותאמים אישית שאליהם מצרף המהדר של ה-Vue התנהגות. ב-Vue, רכיב הוא בעצם מופע Vue עם אפשרויות מוגדרות מראש. [27] קטע הקוד שלהלן מכיל דוגמה של רכיב 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 <nowiki>{{ count }}</nowiki> 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 פשוטים ובעיבוד מחדש מאופטם. כל רכיב עוקב אחר התלות התגובתית שלו במהלך העיבוד שלו, כך שהמערכת יודעת בדיוק מתי לעבד מחדש, ואילו רכיבים לעבד מחדש. [28]
Vue מספקת מגוון דרכים להחיל אפקטי מעבר כאשר פריטים מוכנסים, מתעדכנים או מוסרים מה-DOM. זה כולל כלים ל:
כאשר אלמנט עטוף ברכיב מעבר מוכנס או מוסר, זה מה שקורה:
חיסרון מסורתי של יישומי דף יחיד (SPA) הוא חוסר היכולת לשתף קישורים לדף ה"משנה" המדויק בתוך דף אינטרנט ספציפי. מכיוון שיישומים מסוג זה מספקים למשתמשים שלהם רק תגובה אחת המבוססת על כתובת אתר מהשרת (הוא משרת בדרך כלל index.html או index.vue), שמירה כסימניה של מסכים מסוימים או שיתוף קישורים לקטעים ספציפיים היא בדרך כלל קשה עד בלתי אפשרית. כדי לפתור בעיה זו, נתבים רבים בצד הלקוח מגדירים את כתובות האתרים הדינמיות שלהם ב-" hashbang " (#!), למשל page.com/#! / . עם זאת, עם HTML5 רוב הדפדפנים המודרניים תומכים בניתוב ללא hashbangs.
Vue מספקת ממשק לשינוי מה שמוצג בדף בהתבסס על נתיב ה-URL הנוכחי - ללא קשר לאופן שבו הוא שונה (בין אם באמצעות קישור שנשלח בדוא"ל, רענון או קישורים בתוך הדף). בנוסף, שימוש בנתב בפרונטאנד מאפשר מעבר מכוון של נתיב הדפדפן כאשר אירועי דפדפן מסוימים (כלומר קליקים) מתרחשים על כפתורים או קישורים. Vue עצמו אינו מגיע עם ניתוב, אבל חבילת הקוד הפתוח "vue-router" מספקת API לעדכון כתובת ה-URL של האפליקציה, תומכת בלחצן 'הקודם' (היסטוריית ניווט), ואיפוסי סיסמה בדוא"ל או קישורי אימות בדוא"ל עם פרמטרים של כתובת URL לאימות. הוא תומך במיפוי מסלולים מקוננים לרכיבים מקוננים ומציע בקרת מעבר מדויקת. עם Vue, מפתחים כבר מחברים יישומים עם אבני בניין קטנות הבונות רכיבים גדולים יותר. עם ה-vue-router שנכנס לתמונה, יש למפות רכיבים רק למסלולים שאליהם הם שייכים, ומסלולי הורה/שורש חייבים לציין היכן אלמנטים צאצאים צריכים להופיע. [31]
<div id="app">
<router-view></router-view>
</div>
...
<script>
...
const User = {
template: '<div>User <nowiki>{{ $route.params.id }}</nowiki></div>'
};
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
});
...
</script>
websitename.com/user/<id>
.$route.params.id
.<router-view></router-view>
בתוך ה-div#app של ה-DOM.websitename.com/user/1
יהיה:<div id="app">
<div>
<div>User 1</div>
</div>
</div>
ספריית הליבה מגיעה עם כלים וספריות שפותחו על ידי צוות הליבה והתורמים.
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.