מבוא
כאשר מפתחים אפליקציה גדולה, תמיד מומלץ לפרק אותה לרכיבים קטנים יותר כדי להקל על הקריאה, המבנה והתחזוקה של הקוד. רוב המתחילים של Vue מבינים מהם הרכיבים לפחות מבחינה רעיונית, אך ייתכן שהם לא יבינו מה הם יכולים ומה הם לא יכולים לעשות במלואם.
במדריך זה, נסקור מהו רכיב ב-Vue, כיצד הוא עובד, כיצד להעביר נתונים ואירועים דרכם ועוד ועוד.
מהו רכיב Vue?
רכיבי הם מופעים לשימוש חוזר של רכיבי Vue הכוללים תבניות, סגנונות ורכיבי JavaScript. כל רכיב הוא "הדבר שלו", בדומה לאופן שבו כל רכיב HTML הוא "הדבר שלו", וגם רכיבי Vue ורכיבי HTML מאפשרים לנו להשתמש בהם כאבני בניין לדפי אינטרנט.
אתה יכול לחשוב על רכיבי Vue כרכיבי HTML חדורי JavaScript, שאתה יכול להגדיר ולתפעל בעצמך.
יישום Vue טיפוסי מורכב ממספר רב של רכיבים שניתן לעשות בהם שימוש חוזר כמה פעמים לפי הצורך.
לדוגמה, באתר רגיל יש קטעים המופיעים בכל הדפים - סרגל ניווט, כותרת עליונה, כותרת תחתונה וכן הלאה. לכן, זה נחשב נוהג טוב להפוך כל אחד מהם לרכיב נפרד. בדרך זו, אנו יוצרים קוד מובנה היטב, קריא, לשימוש חוזר וניתן לתחזוקה בקלות:
כיצד ליצור רכיב Vue
ישנן שתי דרכים בסיסיות ליצור רכיב Vue, תלוי איך הפרויקט שלנו נוצר - עם או בלי הגדרת בנייה. במקרה הראשון, כל רכיב מאוחסן בקובץ נפרד. במקרה השני, יכולים להיות מספר רכיבים בקובץ בודד.
הערה: הסבר מהו א התקנה לבנות וכיצד לבצע אותו הוא הרבה מעבר להיקף של מדריך זה. אם אתה רוצה ללמוד עוד על היסודות של Vue, המקום הטוב להתחיל בו הוא "התחלה מהירה" מאמר מהתיעוד הרשמי של Vue.
צור רכיבי Vue עם הגדרת Build
רוב הפרויקטים נוצרים באמצעות התקנה לבנות, המאפשר לנו ליצור רכיבי קובץ בודד (SFCs) – קבצי רכיבים ייעודיים עם ה .vue
סיומת. זה מאפשר לנו לכלול את התבנית, ההיגיון והסגנון של רכיב Vue בקובץ אחד:
<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>
הערה: כדי למנוע התנגשויות עם רכיבי HTML קיימים ועתידיים, תמיד עדיף להשתמש בשמות מרובי מילים במקום בשמות של מילים בודדות בעת מתן שמות לרכיבים שלנו. זה לא חל על רכיבים מובנים כגון רכיב השורש (App
, Transition
, וכולי).
צור רכיבי Vue ללא הגדרת Build
אם אתה, מכל סיבה שהיא, לא יכול להשתמש במנהל חבילות כגון npm
כדי להתקין Vue במחשב שלך, אתה עדיין יכול להשתמש ב-Vue באפליקציה שלך. חלופה לבניין Vue באמצעות npm
זה להתקין Vue דרך a CDN (רשת למסירת תוכן) ישירות באפליקציה שלך. בוא נעבור במהירות על הדרך הזו ליצירת רכיב Vue.
התקנת Vue ללא build תאפשר לנו להשתמש בפונקציות ספציפיות ל-Vue כפי שאנו עושים עם JavaScript רגיל. התחביר דומה במקצת למה שראינו ב-SFCs הרגילים:
export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}
במדריך זה נשתמש ב- תחביר SFC, מכיוון שזו השיטה הנפוצה ביותר ליצירת רכיבים.
כיצד לרשום רכיבים ב-Vue
עד כה, ראינו כיצד ליצור רכיבים ב-Vue. השלב הבא יהיה להשתמש ברכיבים אלו בתוך רכיב אחר (היררכיה של הורה-ילד).
לשם כך, עלינו לרשום תחילה רכיבים שאנו רוצים להשתמש בהם. רישום זה כרוך בייבוא ולאחר מכן רישום רכיבים. ישנן שתי אפשרויות לעשות זאת - גלוֹבָּלִי ו רישום מקומי.
רכיבי Vue - רישום גלובלי
רכיבים הרשומים ברחבי העולם, כפי שהשם מרמז, זמינים ברחבי העולם, מה שאומר שניתן להשתמש בהם בכל רכיב של האפליקציה שלנו מבלי שנצטרך לייבא אותם שוב. זה מושג על ידי רישום רכיב באמצעות app.component()
שיטה:
import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)
במצב שבו יש לנו מרכיבים רבים, אנחנו יכולים שרשרת אותם ככה:
app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)
לאחר שרשמנו את הרכיבים שלנו, נוכל להשתמש בהם בתבנית של כל רכיב בתוך יישום זה באמצעות התחביר הבא:
<ChildComponent/>
<ProfileComponent/>
רכיבי Vue - רישום מקומי
אנו נשתמש ברישום מקומי ברוב המקרים מכיוון שהוא מאפשר לנו להגדיר את הזמינות של הרכיבים הרשומים שלנו. ייבוא רכיבים אלה ולאחר מכן הוספתם ל- components
האפשרות משיגה את זה:
<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>
בעת מתן שמות לרכיבים, השתמש CamelCase כדי להבהיר שזהו רכיב Vue ולא אלמנט HTML מקורי בתבניות. זה גם מקל על ייבוא ורישום רכיבים ב-JavaScript.
הערה: להתייחסות לרכיב הרשום שלנו בתוך התבנית, אנו משתמשים בדרך כלל CamelCase or מארז קבב תגים - <MyComponent />
or <my-component />
, בהתאמה.
כיצד להעביר נתונים דרך רכיבי Vue
אחד היתרונות של יצירת רכיבים הוא היכולת לעשות שימוש חוזר בקוד על ידי הפיכתו למודולרי.
נניח שאנו יוצרים רכיב פרופיל משתמש שצריך לקבל את הנתונים של כל תלמיד מדף הפרופיל; במקרה זה, עלינו להעביר את הנתונים הללו ממרכיב הפרופיל (רכיב האב) לרכיב פרופיל המשתמש (רכיב הילד), ואנו נשתמש באביזרים.
אבזרים
אביזרים הם תכונות מותאמות אישית שאנו יכולים לרשום על רכיב, כך שנוכל להעביר נתונים מהרכיב האב לרכיב הבן באמצעות props
אפשרות בתוך תג הסקריפט:
<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>
הערה: תוכל ללמוד עוד על אביזרים וכיצד להעביר סוגים שונים של נתונים מהרכיב האב לרכיב הילד ב "מדריך ל-Vue Props".
חריצים
חריצי Vue הם מקומות שמורים המאפשרים לנו להעביר כל סוג של תוכן מרכיב אחד לאחר. זה נותן שליטה ריכוזית יותר מאביזרים מכיוון שבניגוד לאביזרים, רכיב האב שולט בתוכן בתוך רכיב הצאצא. לדוגמה, נוכל ליצור את הכפתור הבא:
<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>
אז נוכל להשתמש ברכיב הזה בכל מקום שנרצה ולתת לו את התוכן שאנו רוצים. אי מתן תוכן אומר שהוא יעשה שימוש בערך ברירת המחדל שנתנו לו (לחץ עליי):
<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>
כיצד לפלוט אירועים מרכיבי Vue
למדנו שהאביזרים משמשים לשליחת נתונים מהרכיב האב אל רכיב הילד. אבל אנחנו עשויים לתהות אם יש דרך לשלוח משהו מהרכיב הבן לרכיב האב. והתשובה היא כן, ניתן לשלוח אירועים גם מהרכיב הבן לרכיב האב.
עיין במדריך המעשי והמעשי שלנו ללימוד Git, עם שיטות עבודה מומלצות, סטנדרטים מקובלים בתעשייה ודף רמאות כלול. תפסיק לגוגל פקודות Git ולמעשה ללמוד זה!
נניח שיש לנו רכיב אב (App.vue
) המכיל רכיב צאצא בודד (MyBlogPost.vue
). יתר על כן, רכיב הילד מכיל כפתור שאמור לשנות את הכותרת.
נניח שאנו רוצים לשנות את הכותרת של הדף שלנו כאשר לוחצים על כפתור, כך שפונקציה תופעל:
<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>
ורכיב הילד ייראה כך:
<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>
סיכום
במדריך זה, למדנו כיצד לעבוד עם רכיבים ב-Vue, שהוא חיוני לכל מי שמשתמש ב-Vue. למדנו גם איך לשלוח ולקבל נתונים, כמו גם איך לפלוט אירועים.
- הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
- Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה כאן.
- מקור: https://stackabuse.com/introduction-to-vue-components/
- 1
- 10
- 7
- 9
- a
- יכולת
- אודות
- מושלם
- למעשה
- ערני
- תעשיות
- מאפשר
- חלופה
- תמיד
- ו
- אחר
- לענות
- כל אחד
- בְּכָל מָקוֹם
- האפליקציה
- לְהוֹפִיעַ
- בקשה
- החל
- מאמר
- תכונות
- זמינות
- זמין
- בסיסי
- יסודות
- כי
- למתחילים
- הטבות
- הטוב ביותר
- מעבר
- אבני
- גבול
- לשבור
- לִבנוֹת
- בִּניָן
- מובנה
- לַחְצָן
- לא יכול
- מקרה
- מקרים
- מְרוּכָּז
- שינוי
- ילד
- ברור
- קוד
- בדרך כלל
- רְכִיב
- רכיבים
- מבחינה רעיונית
- מסקנה
- נחשב
- מכיל
- תוכן
- לִשְׁלוֹט
- בקרות
- יכול
- לִיצוֹר
- נוצר
- יוצרים
- CSS
- מנהג
- נתונים
- מוקדש
- בְּרִירַת מֶחדָל
- מסירה
- תלוי
- מתפתח
- אחר
- ישירות
- תיעוד
- עושה
- מטה
- Dropbox
- כל אחד
- קל יותר
- בקלות
- אלמנטים
- לאפשר
- מאפשר
- חיוני
- אירועים
- כל
- דוגמה
- קיימים
- המסביר
- הארכה
- כשלון
- שלח
- קבצים
- ראשון
- להתמקד
- הבא
- טופס
- החל מ-
- לגמרי
- פונקציה
- פונקציות
- יתר על כן
- עתיד
- Git
- לתת
- נותן
- גלוֹבָּלִי
- ברחבי עולם
- Go
- טוב
- מדריך
- ידות על
- יש
- היררכיה
- לרחף
- איך
- איך
- HTML
- HTTPS
- ICON
- רעיון
- לייבא
- יבוא
- in
- לכלול
- כלול
- להתקין
- מבוא
- IT
- JavaScript
- גָדוֹל
- לִלמוֹד
- למד
- למידה
- LG
- מקומי
- נראה
- נראה כמו
- מכונה
- עשוי
- לתחזק
- ניתנת לשמירה
- לעשות
- עושה
- עשייה
- מנהל
- רב
- אומר
- שיטה
- יכול
- מודולרי
- יותר
- רוב
- מספר
- שם
- שמות
- שמות
- יליד
- צרכי
- רשת
- חדש
- הבא
- רב
- רשמי
- ONE
- אפשרות
- אפשרויות
- שֶׁלוֹ
- חבילה
- לְבַצֵעַ
- מקום
- מישור
- אפלטון
- מודיעין אפלטון
- אפלטון נתונים
- מעשי
- תרגול
- פּרוֹפִיל
- פּרוֹיֶקט
- פרויקטים
- מָהִיר
- מהירות
- חומר עיוני
- טעם
- לקבל
- Red
- הירשם
- רשום
- רישום
- הַרשָׁמָה
- שמור
- לשימוש חוזר
- טַבַּעַת
- שורש
- היקף
- שְׁנִיָה
- סעיפים
- נפרד
- Shadow
- דומה
- יחיד
- מצב
- חריצי
- קטן יותר
- So
- משהו
- במידה מסוימת
- רווחים
- תקנים
- התחלה
- שלב
- עוד
- עצור
- מאוחסן
- מִבְנֶה
- סטודנט
- להגיש
- כזה
- אמור
- SVG
- תחביר
- תָג
- לקחת
- תבנית
- תבניות
- השמיים
- לכן
- דבר
- דרך
- פִּי
- כותרת
- ל
- גַם
- מַעֲבָר
- מופעל
- נָכוֹן
- סוגים
- טיפוסי
- בדרך כלל
- להבין
- us
- להשתמש
- משתמש
- ערך
- Ve
- באמצעות
- Vue
- דרכים
- אינטרנט
- אתר
- מה
- מה
- אשר
- יצטרך
- בתוך
- לְלֹא
- תיק עבודות
- עובד
- עוֹלָם
- XML
- אתה
- עצמך
- זפירנט