Vue.js
Vue.js (המכונה בדרך כלל Vue; מבוטא "וִיוּ" כמו "view"[1] ) היא שלד תוכנה בקוד פתוח של model–view–viewmodel פרונטאנד JavaScript לבניית ממשקי משתמש ויישומי עמוד בודד. השלד נוצר על ידי אוון יו, ומתוחזק על ידו ועל ידי שאר חברי צוות הליבה הפעילים. [2] סקירה כלליתVue.js כולל ארכיטקטורה הניתנת להתאמה הדרגתית ומתמקדת בעיבוד הצהרתי והרכבת רכיבים. ספריית הליבה מתמקדת בשכבת התצוגה בלבד.[1] תכונות מתקדמות הנדרשות ליישומים מורכבים כגון ניתוב, ניהול מצב וכלי בנייה מוצעים באמצעות ספריות וחבילות תומכות שמתוחזקות באופן רשמי.[3] Vue.js מאפשר הרחבת HTML עם תכונות HTML הנקראות הנחיות.[4] ההנחיות מציעות פונקציונליות ליישומי HTML ומגיעות כהנחיות מובנות או בהגדרת משתמש. היסטוריהVue נוצר על ידי אוון יו לאחר שעבד עבור Google באמצעות AngularJS במספר פרויקטים. מאוחר יותר הוא סיכם את תהליך החשיבה שלו: "חשבתי, מה אם אני יכול פשוט לחלץ את החלק שמאוד אהבתי ב-Angular ולבנות משהו ממש קליל". [5] תרומת קוד המקור הראשונה לפרויקט הייתה מתוארכת ליולי 2013, ו-Vue שוחרר לראשונה בפברואר הבא, ב-2014. שמות הגרסאות נגזרים לעיתים קרובות ממנגה ואנימה, רובם בתוך ז'אנר המדע הבדיוני. גרסאות
כאשר משוחררת גרסה עיקרית חדשה, כלומר 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 {{ 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 פשוטים ובעיבוד מחדש מאופטם. כל רכיב עוקב אחר התלות התגובתית שלו במהלך העיבוד שלו, כך שהמערכת יודעת בדיוק מתי לעבד מחדש, ואילו רכיבים לעבד מחדש. [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 {{ $route.params.id }}</div>'
};
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
});
...
</script>
<div id="app">
<div>
<div>User 1</div>
</div>
</div>
אקוסיסטםספריית הליבה מגיעה עם כלים וספריות שפותחו על ידי צוות הליבה והתורמים. כלי עבודה רשמיים
ספריות רשמיות
ראו גםקישורים חיצוניים
הערות שוליים
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Portal di Ensiklopedia Dunia
