בניית רכיב Vue.js הראשון שלך

Vue.js היא מסגרת מבוססת רכיבים, כלומר יישומים נבנים באמצעות רכיבים הניתנים לשימוש חוזר. כל רכיב מכיל HTML, CSS ו-JavaScript משלו. מאמר זה ידריך אותך בתהליך בניית רכיב Vue.js הראשון שלך מאפס.

יצירת רכיב Vue חדש

רכיבי Vue.js מאוחסנים בדרך כלל בקבצי .vue. כל קובץ רכיב מורכב משלושה חלקים עיקריים: '<template>', '<script>' ו-'<style>'. בואו ניצור רכיב פשוט בשם Greeting.vue.

נווט אל תיקיית הפרויקט שלך: השתמש בטרמינל כדי לעבור לספריית פרויקט Vue שלך:

cd my-vue-project

צור קובץ רכיב חדש: בספריית src/components, צור קובץ חדש בשם Greeting.vue.

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
    <p>Welcome to your first Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

רכיב Greeting.vue זה מכיל:

<template>: מגדיר את מבנה ה-HTML של הרכיב.
<script>: מכיל את הלוגיקה של JavaScript עבור הרכיב, כגון מאפייני נתונים ושיטות.
<style>: מכיל את סגנונות ה-CSS בהיקף של רכיב זה. התכונה scoped מבטיחה שהסגנונות חלים רק על רכיב זה.

שימוש ברכיב שלך

לאחר יצירת הרכיב, עליך להשתמש בו בתוך אפליקציית Vue שלך. פתח את הקובץ src/App.vue ושנה אותו כך שיכלול את הרכיב Greeting:

<template>
  <div id="app">
    <Greeting />
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  name: 'App',
  components: {
    Greeting
  }
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

בקובץ App.vue המעודכן הזה:

יבא את הרכיב: השתמש ב-יבא ברכה מ-'./components/Greeting.vue'; כדי לייבא את הרכיב Greeting.
רשום את הרכיב: הוסף greeting לאובייקט components בבלוק export default.
השתמש ברכיב: הכנס את התג '<Greeting />' לקטע '<template>' כדי להשתמש ברכיב באפליקציה שלך.

בדיקת הרכיב שלך

שמור את השינויים שלך וודא ששרת הפיתוח שלך פועל. פתח את הדפדפן שלך ונווט אל http://localhost:8080. אתה אמור לראות את התוכן של הרכיב Greeting מעובד בדף.

מַסְקָנָה

יצרת והשתמשת בהצלחה ברכיב Vue.js הראשון שלך. רכיבים הם אבני הבניין של יישומי Vue.js, המאפשרים לך להכיל ולנהל חלקים שונים של ממשק המשתמש שלך. ככל שתתוודע יותר ל-Vue.js, תוכל לחקור תכונות מתקדמות כגון אביזרי רכיבים, אירועים ו-hooks למחזור חיים כדי לבנות יישומים אינטראקטיביים ומורכבים יותר.

המשך להתנסות עם רכיבי Vue.js והרחיב את הידע שלך כדי ליצור יישומי אינטרנט דינמיים ומושכים.

תמונות רכיב תבנית סקריפט סגנון יצירה ייבוא שימוש אפליקציה פיתוח בדיקות עיבוד אביזרים אירועים