ما فائدة هذا الكود وماذا يفعل

هذا الكود هو إختصار للكود التالي :

const createApp = Vue.createApp;

فحيث عندما تستخدم { createApp }  فأنت تستخدم معامل التفكيك "Destructuring assignment" وهي طريقة لإستخراج وتفكيك خصائص (Properties) من الكائن (Object) وتخزينها في متغيرات مستقلة.

فهنا نحن نريد إستخراج الدالة createApp من الكائن Vue ووضعها في ثابت بإسم createApp أيضا ويمكننا إستخدامه بعد ذلك دون مشكلة.

وإن createApp في Vue تستخدم لإنشاء تطبيق Vue جديد هكذا :

const app = createApp({
  data() {
    return {
      message: "Hello From Vue"
    };
  }
});

app.mount('#app');

عيد الاضحى مبارك للجميع 

ماهي v-bind

بتاريخ On 8‏/6‏/2025 at 16:13 قال Hxfhf Ucicic:

عيد الاضحى مبارك للجميع 

ماهي v-bind

عبارة عن موجه لربط سمة في عنصر HTML ببيانات موجودة في تطبيق Vue لديك، بمعنى في لغة HTML قيمة السمات تكون ثابتة:

<a href="https://google.com">جوجل</a>

<img src="logo.png" alt="شعار">

لاحظ كتبت عنوان https://google.com في سمة href وذلك العنوان ثابت، نفس الأمر بالنسبة لمسار الصورة في سمة Src.

لكن مع v-bind، تستطيع جعل تلك السمات معتمدة على بيانات من جافاسكريبت، بالتالي:

<a v-bind:href=""></a>
<img v-bind:src="" alt="">

معناه أننا نخبر Vue أريد أن أربط سمة href وسمة src ببيانات ستأتي من ملف الجافاسكريبت script.js وعلى إفتراض أن الملف يحتوي على الكود التالي:

const app = Vue.createApp({
  data() {
    return {
      name: 'علي',
      age: 25,
      gender: 'ذكر',
      vueWebsiteUrl: 'https://vuejs.org/', 
      vueLogoUrl: 'https://vuejs.org/images/logo.png' 
    }
  },
  methods: {

  }
});

app.mount('#root');

فتستطيع استخدام المتغير vueWebsiteUrl و vueLogoUrl لإضافة بيانات بشكل ديناميكي كالتالي:

<div id="root">

    <a v-bind:href="vueWebsiteUrl">موقع Vue الرسمي</a>

    <img v-bind:src="vueLogoUrl" alt="شعار Vue">

</div>