Vue.js – ויקיפדיה
לדלג לתוכן
מתוך ויקיפדיה, האנציקלופדיה החופשית
Vue.js
מחזור חיים
פברואר 2014 – הווה (כ־12 שנים)
גרסה אחרונה
3.5.32
3 באפריל 2026
מערכת הפעלה
חוצה-פלטפורמות
נכתבה ב
שפות
JavaScript
TypeScript
סוג רישיון
רישיון MIT
vuejs
.org
Vue.js
(המכונה בדרך כלל
Vue
; מבוטא "וִיוּ" כמו "view"
) היא
שלד תוכנה
בקוד פתוח של
model–view–viewmodel
פרונטאנד
JavaScript
לבניית
ממשקי משתמש
ויישומי עמוד בודד
. השלד נוצר על ידי אוון יו, ומתוחזק על ידו ועל ידי שאר חברי צוות הליבה הפעילים.
סקירה כללית
עריכת קוד מקור
עריכה
Vue.js כולל ארכיטקטורה הניתנת להתאמה הדרגתית ומתמקדת בעיבוד הצהרתי והרכבת רכיבים. ספריית הליבה מתמקדת בשכבת התצוגה בלבד.
תכונות מתקדמות הנדרשות ליישומים מורכבים כגון
ניתוב
, ניהול מצב וכלי
בנייה
מוצעים באמצעות ספריות וחבילות תומכות שמתוחזקות באופן רשמי.
Vue.js מאפשר הרחבת
HTML
עם תכונות HTML הנקראות הנחיות.
ההנחיות מציעות פונקציונליות
ליישומי
HTML ומגיעות כהנחיות מובנות או בהגדרת משתמש.
היסטוריה
עריכת קוד מקור
עריכה
Vue נוצר על ידי אוון יו לאחר שעבד עבור
Google
באמצעות AngularJS במספר פרויקטים. מאוחר יותר הוא סיכם את תהליך החשיבה שלו: "חשבתי, מה אם אני יכול פשוט לחלץ את החלק שמאוד אהבתי ב-Angular ולבנות משהו ממש קליל".
תרומת
קוד המקור
הראשונה לפרויקט הייתה מתוארכת ליולי 2013, ו-Vue שוחרר לראשונה בפברואר הבא, ב-2014.
שמות הגרסאות נגזרים לעיתים קרובות
ממנגה
ואנימה
, רובם בתוך ז'אנר
המדע הבדיוני
גרסאות
עריכת קוד מקור
עריכה
גִרְסָה
תאריך הוצאה
כותרת
סוף LTS
סוף החיים
3.3
11 במאי 2023
רורואוני קנשין
3.2
5 באוגוסט 2021
חמישיות עיקריות
3.1
7 ביוני 2021
פלוטו
3.0
18 בספטמבר 2020
One Piece
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
bind
initial
count
"0"
><
/button-clicked>
/div>
/template>
script
Vue
component
'button-clicked'
props
'initialCount'
],
data
()
=>
({
count
}),
template
''
computed
countTimesTwo
()
return
this
count
},
},
watch
count
newValue
oldValue
console
log
`The value of count is changed from
${
oldValue
to
${
newValue
.`
);
},
},
methods
onClick
()
this
count
+=
},
},
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
. זה כולל כלים ל:
החלה באופן אוטומטי של קלאסים עבור מעברי
CSS
ואנימציות
אינטגרציה של ספריות צד שלישי אנימציה CSS, כגון Animate.css
שימוש ב-JavaScript כדי לבצע מניפולציה ישירה של ה-DOM במהלך
Hooking
של מעברים
אינטגרציה של ספריות צד שלישי אנימציה של JavaScript, כגון Velocity.js
כאשר אלמנט עטוף ברכיב מעבר מוכנס או מוסר, זה מה שקורה:
Vue ירחרח אוטומטית אם לרכיב היעד יש מעברי CSS או הנפשות. אם כן, קלאסים של מעבר CSS יתווספו או יוסרו בתזמונים המתאימים.
אם רכיב המעבר סיפק
Hooking
ל-JavaScript, הוקים אלה ייקראו בתזמונים המתאימים.
אם לא מזוהים מעברי CSS או אנימציות ולא מסופקים הוקים של JavaScript, פעולות ה-DOM להכנסה או הסרה יבוצעו מיד בפריים הבא.
29
30
ניתוב
עריכת קוד מקור
עריכה
חיסרון מסורתי של
יישומי דף יחיד
(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
'
};
const
router
new
VueRouter
({
routes
path
'/user/:id'
component
User
});
...
/script>
מגדיר נתיב פרונטאנד בכתובת
websitename.com/user/
אשר יעבד ברכיב המשתמש המוגדר ב- (const User. . . )
מאפשר לרכיב המשתמש להעביר את המזהה המסוים של המשתמש שהוקלד בכתובת האתר באמצעות מפתח params של אובייקט $route:
$route.params.id
תבנית זו (המשתנה לפי הפרמטרים המועברים לנתב) תעובד ל-
בתוך ה-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
(באנגלית).
{{
cite web
}}
עזרה
"Meet the Team"
Vuejs.org
(באנגלית).
{{
cite web
}}
עזרה
"Evan is creating Vue.js"
Patreon
(באנגלית).
{{
cite web
}}
עזרה
"What is Vue.js"
W3Schools
(באנגלית).
{{
cite web
}}
עזרה
"Evan You"
Between the Wires
(באנגלית).
3 בנובמבר 2016
אורכב מ-
המקור
ב-
3 ביוני 2017
{{
cite news
}}
עזרה
"v3.3.0 Rurouni Kenshin"
Vue.js
(באנגלית).
11 במאי 2023
via GitHub.
{{
cite web
}}
עזרה
"v3.2.0 Quintessential Quintuplets"
Vue.js
(באנגלית).
5 באוגוסט 2021
via GitHub.
{{
cite web
}}
עזרה
"v3.1.0 Pluto"
Vue.js
(באנגלית).
7 ביוני 2021
via GitHub.
{{
cite web
}}
עזרה
"v3.0.0 One Piece"
Vue.js
(באנגלית).
18 בספטמבר 2020
via GitHub.
{{
cite web
}}
עזרה
"v2.7.0 Naruto"
Vue.js
(באנגלית).
1 ביולי 2022
via GitHub.
{{
cite web
}}
עזרה
"v2.6.0 Macross"
Vue.js
(באנגלית).
4 בפברואר 2019
via GitHub.
{{
cite web
}}
עזרה
"v2.5.0 Level E"
Vue.js
(באנגלית).
13 באוקטובר 2017
via GitHub.
{{
cite web
}}
עזרה
"v2.4.0 Kill la Kill"
Vue.js
(באנגלית).
13 ביולי 2017
via GitHub.
{{
cite web
}}
עזרה
"v2.3.0 JoJo's Bizarre Adventure"
Vue.js
(באנגלית).
27 באפריל 2017
via GitHub.
{{
cite web
}}
עזרה
"v2.2.0 Initial D"
Vue.js
(באנגלית).
26 בפברואר 2017
via GitHub.
{{
cite web
}}
עזרה
"v2.1.0 Hunter X Hunter"
Vue.js
(באנגלית).
22 בנובמבר 2016
via GitHub.
{{
cite web
}}
עזרה
"v2.0.0 Ghost in the Shell"
Vue.js
(באנגלית).
30 בספטמבר 2016
via GitHub.
{{
cite web
}}
עזרה
"1.0.0 Evangelion"
Vue.js
(באנגלית).
27 באוקטובר 2015
via GitHub.
{{
cite web
}}
עזרה
"0.12.0: Dragon Ball"
Vue.js
(באנגלית).
12 ביוני 2015
via GitHub.
{{
cite web
}}
עזרה
"v0.11.0: Cowboy Bebop"
Vue.js
(באנגלית).
7 בנובמבר 2014
via GitHub.
{{
cite web
}}
עזרה
"v0.10.0: Blade Runner"
Vue.js
(באנגלית).
23 במרץ 2014
via GitHub.
{{
cite web
}}
עזרה
"v0.9.0: Animatrix"
Vue.js
(באנגלית).
25 בפברואר 2014
via GitHub.
{{
cite web
}}
עזרה
"v0.8.0"
Vue.js
(באנגלית).
27 בינואר 2014
via GitHub.
{{
cite web
}}
עזרה
"v0.7.0"
Vue.js
(באנגלית).
24 בדצמבר 2013
via GitHub.
{{
cite web
}}
עזרה
"0.6.0: VueJS"
Vue.js
(באנגלית).
8 בדצמבר 2013
via GitHub.
{{
cite web
}}
עזרה
"Vue Roadmap"
Vue.js
(באנגלית).
6 בנובמבר 2022
via GitHub.
{{
cite web
}}
עזרה
"Components"
Vuejs.org
(באנגלית).
{{
cite web
}}
עזרה
"Reactivity in Depth"
Vuejs.org
(באנגלית).
{{
cite web
}}
עזרה
"Transition Effects"
Vuejs.org
(באנגלית).
{{
cite web
}}
עזרה
"Transitioning State"
Vuejs.org
(באנגלית).
{{
cite web
}}
עזרה
"Routing"
Vuejs.org
(באנגלית).
{{
cite web
}}
עזרה
אוחזר מתוך "
קטגוריות
פיתוח יישומי ווב
יישומי רשת
קטגוריה מוסתרת:
ציטוט מקור בשפה זרה (אנגלית)
Vue.js
הוספת נושא