3. مشروع [vuejs-01]: الأساسيات

لشرح الكود الذي تم تنفيذه في [vuejs-00]، سنقوم بتبسيطه في [vuejs-01]. نقوم بنسخ مجلد [vuejs-00] إلى [vuejs-01]:

يتكون مشروع [vuejs-01] أساسًا من أربعة ملفات:

[main.js] [2] هو نقطة الدخول للمشروع؛
[App.vue، HelloWorld.vue] [3-4] هما مكونان من مكونات [Vue.js]، ويحتويان اختياريًا على العناصر التالية:
- [<template>...</template>]: كود HTML؛
- [<script>...</script>]: كود JavaScript المرتبط بكود HTML؛
- [<style>...</style>]: أنماط CSS المرتبطة برمز HTML؛
[public/index.html] [5]: مستند HTML الذي يعرضه الأمر [npm run serve]؛

ملف [public/index.html] الذي يتم عرضه عند تشغيل المشروع هو هذا الملف:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vuejs</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

وبالتالي، لا يعرض ملف HTML هذا أي شيء بشكل ثابت. لا يوجد كود HTML هنا. العرض ديناميكي: سيقوم كود JavaScript الخاص بالمشروع بإنشاء HTML الذي سيحل محل علامة [<div id=’app’>] في السطر 14 بالكامل. كود HTML الذي تم إنشاؤه بواسطة JavaScript الخاص بالمشروع وإدراجه بدلاً من علامة [<div>] في السطر 14 يأتي من علامات [template] لمكونات [vue.js]، وهي الملفات التي تحمل اللاحقة [.vue].

يتم إدراج كود HTML ديناميكيًا في السطر 14 بواسطة البرنامج النصي [vuejs-01/main.js] التالي:


// imports
import Vue from 'vue'
import App from './App.vue'
 
// configuration
Vue.config.productionTip = false
 
// instanciation projet [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

تعليقات

السطر 2: يتم توفير كائن [Vue] بواسطة إطار عمل [vue.js]؛
السطر 3: يتم توفير الكائن [App] بواسطة الملف [vuejs-01/App.vue]؛
السطر 6: تكوين كائن [Vue]؛
الأسطر 9-11: هذه هي الأسطر التي:
- توليد كود HTML للتطبيق. السطر 10: يقوم ملف [App.vue] بتوليده؛
- تحميل كود HTML الذي تم إنشاؤه في السطر 10 إلى قسم [<div id='app'></div>] في ملف [public/index.html]؛

يمكن لأي مشروع [Vue.js] الاحتفاظ بملف [index.html] كما هو.

تم تبسيط ملف [App.vue] من المشروع الأولي [vuejs-00] على النحو التالي في مشروع [vuejs-01]:


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Notre première application Vue.js" />
  </div>
</template>
 
<script>
import HelloWorld from "./components/HelloWorld.vue";
 
export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

تعليقات

يتكون جزء [.vue] من ثلاثة أقسام كحد أقصى:
- [<template>...</template>] : كود HTML؛
- [<script>...</script>] : كود JavaScript المرتبط بكود HTML؛
- [<style>...</style>]: أنماط CSS المرتبطة برمز HTML؛

هنا، لا يوجد قسم [style].

الأسطر 1–6: كود HTML للجزء (الصفحة، المكون، العرض، ...)؛
الأسطر 2-5: يمكن أن يحتوي قسم [template] على عنصر واحد فقط. نضع عادةً قسم [div] يشمل كل HTML الخاص بالجزء. يمكننا أيضًا وضع علامة <template>؛
السطر 3: صورة؛

السطر 4: مكون باسم [HelloWorld]. مبدأ [Vue.js] هو إنشاء صفحات ويب باستخدام أجزاء محددة في ملفات [.vue]، مثل [App.vue] هنا. يتم تعريف هذا المكون بواسطة ملف [HelloWorld.vue] المحدد في السطر 9 من البرنامج النصي JavaScript المرتبط؛
السطر 4: يمكن للمكون قبول المعلمات. المعلمة هنا هي السمة [msg]؛
الأسطر 8-17: نصوص JavaScript الخاصة بالجزء (أو المكون)؛
السطر 9: لاستخدام مكون [HelloWorld] داخل مكون [App]، يجب استيراد تعريفه إلى قسم [script]؛
الأسطر 11-16: يحدد البرنامج النصي كائنًا ويصدره لجعله متاحًا خارجيًا؛
السطر 12: تحدد السمة [name] اسم المكون الذي تم تصديره؛
الأسطر 13–15: تسرد السمة [components] المكونات التي يستخدمها المكون [App]. يتم تصديرها معه؛

السطر 9: لا يجب أن يكون لمكون [HelloWorld] نفس اسم الملف الذي يحدده. يمكن استيراده باسم [X] وتصديره كمكون [Bonjour]:

السطر 14: يتم تصدير المكون [X] تحت اسم [Bonjour]. ثم يتم استخدامه تحت هذا الاسم، في السطر 4؛

الإصدار الأول هو الأكثر شيوعًا، لذا سنقوم بتعريف مكوناتنا بهذه الطريقة؛


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Notre première application Vue.js" />
  </div>
</template>
 
<script>
import HelloWorld from "./components/HelloWorld.vue";
 
export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

السطر 14 هو اختصار للكود [HelloWorld : HelloWorld]: يتم تصدير المكون [HelloWorld] (على اليمين، المستورد في السطر 9) تحت الاسم [HelloWorld] (على اليسار).

نقوم بتبسيط مكون [HelloWorld.vue] على النحو التالي:


<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>
 
<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

تعليقات

يحتوي المكون [HelloWorld] على نفس بنية الملفات التي يحتوي عليها المكون الرئيسي [App]؛
السطر 3: يقوم هذا بتقييم تعبير JavaScript، وهو في هذه الحالة التعبير [msg]؛
الأسطر 10–12: تحدد خصائص المكون، وبشكل أكثر تحديدًا معلماته. عندما قام المكون [App] بإنشاء مثيل لمكون [HelloWorld]، فقد استخدم الصيغة التالية:


<HelloWorld msg="Notre première application Vue.js" />

يتم إنشاء مثيل لمكون [HelloWorld] عن طريق تعيين قيمة للمعلمة (السمة) [msg]. إذا نظرنا إلى [القالب] لمكون [HelloWorld]، يصبح كما يلي:


<div>
    <h1>Notre première application Vue.js</h1>
</div>

الأسطر 7–14: خصائص المكون المُعرَّفة ككائن يتم تصديره؛
- السطر 9: يتم تصدير المكون تحت اسم [HelloWorld]؛
- الأسطر 10–12: يتم تعريف معلماته بواسطة الخاصية [props]؛

في النهاية، إذا قمنا بدمج قوالب المكونين [App، HelloWorld] المستخدمين، فسيكون ملف [index.html] المعروض كما يلي:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>vuejs</title>
</head>
<body>
  <noscript>
    <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div>
      <h1>Notre première application Vue.js</h1>
    </div>
  </div></body>
</html>

نقوم بتشغيل التطبيق عن طريق تعديل الأمر [serve] [1] في ملف [package.json]:

ثم يتم عرض الصفحة [2].

الآن دعونا نلقي نظرة على كود هذه الصفحة:

في [1]، انقر بزر الماوس الأيمن؛
في [2]، كود مصدر الصفحة. يمكننا أن نرى أن هذا هو الكود من ملف [index.html] الأولي، وهذا ليس ما تم عرضه. كانت صفحة [index.html] هي التي تم تحميلها في البداية بالفعل. ثم، بشكل ديناميكي، قام كود JavaScript بتعديل هذه الصفحة، ولكن لم يتم عرض ذلك لنا؛

عندما يتم إنشاء الصفحات ديناميكيًا بواسطة JavaScript، فإن الخيار [2] يصبح عديم الفائدة. يجب عليك الانتقال إلى أدوات المتصفح (F12 في Firefox) لعرض كود الصفحة المعروضة حاليًا:

في [1]، أداة فحص DOM (نموذج كائن المستند) للمستند المعروض؛
في [2]، ما يحتويه DOM فعليًا؛
[3-4]، الأدوات التي سنستخدمها لعرض كائنات JavaScript المستخدمة بواسطة إطار عمل [Vue.js]؛
[4] هو امتداد (هنا لـ Firefox) لتصحيح أخطاء تطبيقات [Vue.js]:
- لـ Firefox: [https://addons.mozilla.org/fr/firefox/addon/vue-js-devtools/]؛
- لـ Chrome: [https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd]؛

دعونا نفحص علامة التبويب [Vue] [4]:

تُظهر لنا طريقة العرض [1-4] بنية [Vue.js] للوثيقة: حيث يحتوي جذر الوثيقة [2] (index.html) على مكون [App] (3)، الذي يحتوي بدوره على مكون [HelloWorld] (4). ويؤدي النقر على [4] إلى عرض خصائص مكون [HelloWorld] [5].

في [4] (على اليمين)، نرى المؤشر [$vm0]. هذا هو اسم المتغير الذي يمكننا استخدامه في وحدة تحكم JavaScript [6] للإشارة إلى كائن [HelloWorld]. لنفعل ذلك:

في [2]، نقوم بتقييم التعبير [$vm0]، الذي يعرض بنيته. عادةً، لن نحتاج إلى استخدام هذه البنية مباشرةً؛

لنختتم بتوضيح إمكانية [إعادة التحميل السريع] للأمر [serve] المستخدم لتشغيل المشروع:

في [App.vue]، قم بتغيير الرسالة المعروضة إلى [HelloWorld]:

في [1]، نقوم بتعديل الرسالة المعروضة؛
في [2-3]، يتم تحديث الصفحة تلقائيًا دون أي إجراء من جانبنا؛

سنقوم الآن بإنشاء مشاريع [vuejs-xx] متنوعة لتوضيح الميزات الرئيسية لـ [Vue.js]. ونقصد بكلمة "رئيسية" "الميزات التي سنستخدمها في عميل [Vue.js] لخادم حساب الضرائب". وسيتم حذف الميزات "الرئيسية" الأخرى إذا لم يتم استخدامها في العميل. وبالتالي، لا يُقصد من هذا العرض أن يكون عرضًا شاملاً لـ [Vue.js].