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>]: كود جافا سكريبت المرتبط بالكود 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>
    <!-- سيتم إدراج الملفات المُنشأة تلقائيًا -->
  </body>
</html>

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

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


// عمليات الاستيراد
import Vue from 'vue'
import App from './App.vue'

// التكوين
Vue.config.productionTip = false

// إنشاء مثيل لمشروع [App]
new Vue({
  render: h => h(App),
}).$mount('#التطبيق')

تعليقات

السطر 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>]: كود جافا سكريبت المرتبط بالكود 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 من البرنامج النصي المرتبط jS؛
السطر 4: يمكن للمكون قبول معلمات. والمعلمة هنا هي السمة [msg]؛
الأسطر 8-17: البرنامج النصي jS الخاص بالجزء (أو المكون)؛
السطر 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: يوجد هنا تقييم لتعبير جافا سكريبت، وهو في هذه الحالة التعبير [msg]؛
الأسطر 10-12: تحدد خصائص المكون، وبشكل أكثر دقة معلماته. عندما قام المكون [App] بإنشاء مثيل لمكون [HelloWorld]، فقد استخدم الصيغة التالية:


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

يتم إنشاء مثيل للمكون [HelloWorld] عن طريق تعيين قيمة للمعلمة (السمة) [msg]. إذا تتبعنا [template] الخاص بالمكون [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]، استبدل بـ [clic droit]؛
إلى [2]، وهو كود المصدر للصفحة. نلاحظ أن هذا هو كود الملف الأصلي [index.html]، وهو ليس ما تم عرضه. فالصفحة التي تم تحميلها في البداية هي بالفعل [index.html]. بعد ذلك، قام كود جافا سكريبت بتعديل هذه الصفحة ديناميكيًا، لكن هذا التعديل لا يظهر لنا؛

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

في [1]، أداة فحص DOM (نموذج كائن المستند) للمستند المعروض؛
إلى [2]، وهو المحتوى الفعلي لـ DOM؛
[3-4]، الأدوات التي سنستخدمها لعرض كائنات جافا سكريبت التي يستخدمها إطار العمل [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]، مما يؤدي إلى عرض بنيته. عادةً لن نضطر إلى استخدام هذه البنية مباشرةً؛

لنختتم بإظهار قدرة [hot reload] للأمر [serve] المستخدم لتنفيذ المشروع:

في [App.vue]، قم بتعديل الرسالة التي يعرضها [HelloWorld]:

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

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