إنشاء أول مكون 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 إلى الكائن components في كتلة export default.
استخدم المكون: أدخل العلامة '<Greeting />' في القسم '<template>' لاستخدام المكون في تطبيقك.

اختبار المكون الخاص بك

احفظ التغييرات وتأكد من تشغيل خادم التطوير لديك. افتح المتصفح وانتقل إلى http://localhost:8080. يجب أن ترى محتوى مكون Greeting المعروض على الصفحة.

خاتمة

لقد نجحت في إنشاء واستخدام أول مكون Vue.js الخاص بك. المكونات هي اللبنات الأساسية لتطبيقات Vue.js، مما يسمح لك بتغليف وإدارة أجزاء مختلفة من واجهة المستخدم الخاصة بك. مع زيادة معرفتك بـ Vue.js، يمكنك استكشاف الميزات المتقدمة مثل خصائص المكونات والأحداث وخطافات دورة الحياة لبناء تطبيقات أكثر تفاعلية وتعقيدًا.

واصل تجربة مكونات Vue.js وتوسيع نطاق معرفتك لإنشاء تطبيقات ويب ديناميكية وجذابة.

vuejs مكون قالب نص برمجي أسلوب إنشاء استيراد استخدام تطبيق تطوير اختبار عرض دعائم أحداث