مرحبًا بك في هذه السلسلة الجديدة التي سنتعلّم من خلالها كيف سنتعامل مع إطار العمل Vue.js. هذا الإطار الواعد الذي يُسهّل العمل في تطوير الواجهة الأمامية للتطبيقات Frontend Applications إلى حدّ بعيد.

سنتدرّج في هذه السلسلة بشكل سلس، حيث سنتناول موضوعات بسيطة في البداية، ثم ومع تقدّمنا في الدروس سنغطي موضوعات أوسع وأشمل.

ستلاحظ وجود تطبيقات بسيطة في كل درس، نشرح من خلالها فكرة أو أفكار محدّدة. ولكن في نهاية السلسلة سنختم بتطبيقين عمليين، يوضّحان معظم الأفكار التي تمّت تغطيتها مسبقًا. هذه السلسلة هي سلسلة تعليمية، الهدف منها هو أن تنطلق مع Vue.js بسهولة ويُسر، وبالتالي فهي ليست سلسلة مرجعيّة شاملة لإطار العمل Vue.js.

سأفترض أنّه لديك معرفة جيدة بلغة JavaScript و بـ HTML أيضًا، كما ويُفضّل أن تمتلك معرفة أساسيّة بـ CSS.

سنتطرق في هذا المقال إلى النقاط التالية:

• ماهو إطار العمل framework في JavaScript؟
• تطبيقك الأوّل مع Vue.js.
• إضافة مزايا جديدة لتطبيقنا الأوّل.
• العمل على حاسوب محلّي.

ماهو إطار العمل framework في JavaScript؟

ببساطة و بمعزل عن أي تفاصيل تقنية، يساعدنا إطار العمل عمومًا في إنشاء تطبيقات عصرية حديثة، حيث يحتوي على الأدوات اللازمة لتسهيل حياة المبرمجين في إنشاء تطبيقات معقّدة بزمن قياسي، فلا يحتاج المبرمج أن يستخدم الأسلوب التقليدي القديم في التعامل مع نموذج كائنات المستند DOM باستخدام JavaScript، حيث يمكن باستخدام إطار العمل التعامل مع العناصر في DOM بشكل قياسي ومجرّد وسهل إلى حدّ بعيد.

بدأ العمل مع JavaScript بتطوير مكتبات شهيرة مثل jQuery و Mootools، حيث سهّلت مثل هذه المكتبات العمل مع JavaScript على نحو كبير، وقلّلت مشاكل التوافقية بين المتصفحات المختلفة التي لم تكن تتبع معيارًا موحدًّا.

تطوّرت الأمور بعد ذلك لتبدأ أُطر عمل متكاملة في الظهور يمكن أن نقسّمها إلى مرحلتين أساسيتين. المرحلة الأولى كانت مع ظهور أُطر عمل مثل Backbone و Ember و Knockout و AngularJS. أمّا المرحلة الثانية وهي المرحلة الحالية فكانت مع أطر عمل مثل React و Angular و Vue.

تٌعدّ Vue.js من أحدث أُطر العمل في JavaScript، وهي إطار عمل واعد، يجمع بين السهولة والمرونة والقوة، بالإضافة إلى صغر حجم الملف الخاص بها (فقط 26 كيلو بايت) مما يجعل تحميل صفحات الويب سهلة إلى حد بعيد. سنهتم بالإصدار Vue.js 2 مع التاكيد بأنّ ما سنأخذه هنا يمكن تطبيقه بسهولة في إصدارات لاحقة.

تطبيقك الأول مع Vue.js

قبل البدء باستخدام Vue.js علينا أن نحصل على الملف الخاص به. لدينا عدّة خيارات لذلك، سأختار أحد أسهل الخيارات وهو الحصول على الملف الخاص بإطار العمل عن طريق شبكة تسليم محتوى CDN، ثم نتحدّث عن الخيارات الأخرى فيما بعد.

يمكنك استخدام رابط CDN التالي للحصول على Vue.js؛ الرابط هو unpkg.com/vue@2.6.11/dist/vue.js سنحتاج حاليًا إلى الرابط فقط.

انتقل الآن إلى الموقع jsfiddle.net الذي يوفّر بيئة تطوير بسيطة وممتازة لتجريب Vue.js دون تحميل أي شيء على حاسوبك. ستحصل على شكل شبيه بما يلي:

انقر على الرابط URL الذي يظهر في القسم الأيسر في الأعلى من النافذة السابقة، بجوار كلمة Resources:

بعد نقر الرابط السابق ستحصل على مربّع نص، انسخ فيه رابط CDN السابق، ثم انقر الزر المجاور الذي يظهر على شكل إشارة زائد:

نكون بذلك قد أخبرنا بيئة التطوير المصغّرة أنّنا بصدد استخدام الملف الخاص بإطار العمل Vue.js.

انسخ الآن شيفرة HTML التالي إلى القسم الخاص بأكواد HTML من الصفحة الرئيسية لموقع jsfiddle:

<div id="app">
    {{ message }}
</div>

ثم انسخ شيفرة JavaScript التالية والصقها ضمن القسم الخاص بشيفرات JavaScript في الصفحة الرئيسية الموقع:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

انقر الآن زر التشغيل Run الموجود في الزاوية اليسرى العليا من الصفحة. إذا نفذت الخطوات السابقة بدقة، ستلاحظ ظهور العبارة Hello Vue! في القسم الأيمن الأسفل من الصفحة. مبارك! لقد بنيت تطبيق Vue.js الأول لك.

دعنا الآن نحلّل ما قمنا به حتى الآن. أتوقّع أنّ رُماز HTML الذي استخدمناه سهل وواضح، حيث أنشأنا عنصر div وأسندنا له المعرّف app، ووضعنا ضمن وسمي الفتح والإغلاق له التعبير التالي:

{{ message }}

هذا التعبير هو الأساس في Vue.js، سنتحدّث عنه بعد قليل. الآن لاحظ معي شيفرة JavaScript التالية:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

أعتقد أنّ بداية هذه الشيفرة مألوفة، حيث أنّنا نعمل على إنشاء كائن من النوع Vue باستخدام الكلمة المفتاحية new. لاحظ معي ماذا نمرّر إلى النوع Vue:

{
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
}

المقطع السابق عبارة عن كائن آخر يُسمى بكائن الخيارات (options instance) يحوي الإعدادات التي نريد أن تكون ضمن كائن Vue.js الجديد. ففي الحقل el (يمثّل أول حرفين من كلمة element أي العنصر) نُسند القيمة '‎#app' والتي تمثّل معرّف عنصر HTML المُستَهدف (في حالتنا هذه هو عنصر div الذي أنشأناه قبل قليل)، أمّا الحقل data فيتم إسناد كائن آخر إليه يحتوي على حقل واحد وهو message وقيمته 'Hello Vue!'. لاحظ أنّ الكلمة 'message' هي نفسها الموجودة ضمن رُماز HTML السابق الموضوعة بحاضنة مزدوجة {{ message }}. وهكذا فعند تنفيذ البرنامج السابق سيعمل Vue على استبدال التعبير {{ message }} ضمن عنصر HTML الذي يحمل المعرّف app بالنص 'Hello Vue!‎' وهذا كلّ شيء.

ملاحظة: رغم وجود من يميّز بين الكائن object والنسخة instance، إلّا أنني لا أفرّق بينهما من الناحية العمليّة. لذلك تراني أستخدم الترجمة "كائن" دومًا.

حاول الآن إجراء بعض التغييرات على النص السابق، وأعد التنفيذ باستخدام الزر Run لتشاهد التغييرات الجديدة على الخرج.

في الحقيقة إنّ ما جرى في هذا المثال يتعدّى عن كونه مجرّد عملية استبدال تعبير برسالة مجهزّة مسبقًا، إن ما يجري من وراء الكواليس هو عملية ربط كامل بين الحقل message الموجود ضمن شيفرة JavaScript وبين التعبير {{ message }} الموجود ضمن رُماز HTML وسنرى كيف ذلك في الفقرة التالية.

إضافة مزايا جديدة لتطبيقنا الأول

حان الوقت لإجراء بعض التحسينات على تطبيقنا الأول. انتقل إلى قسم HTML وأضف عنصر إدخال نصّي input على النحو التالي:

<div id="app">
  <input type='text' v-on:input="updateInfo"/>
  {{ message }}
</div>

لقد وضعت عنصر الإدخال فوق التعبير {{ message }} مباشرة. الشيء الجديد هنا هي السمة v-on:input وهي بحد ذاتها مكوّنة من قسمين الموجّه directive وهو: v-on والوسيط input المراد تمريره إلى الموجّه. يلعب الموجّه v-on دور مُنصِت حدث event listener. وفي حالتنا هذه فإنّنا نرغب بالإنصات لحدث الإدخال input (معامل [parameter]) لعنصر الإدخال النصي. لاحظ القيمة المُسندة الموجّه: updateInfo وهي بكل بساطة اسم التابع الذي سيتم استدعاؤه في حال تمّ إجراء أي إدخال ضمن عنصر الإدخال النصي من قِبَل المستخدم. سنعرّف هذا التابع الآن.

استبدل الشيفرة القديمة الموجودة بالقسم المخصّص لشيفرات JavaScript في الصفحة الرئيسية للموقع بالشيفرة التالية:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods:{
      updateInfo:function(event){
        this.message = event.target.value;
    }
  }
})

الفرق الوحيد بين المقطعين الجديد والقديم، أنّنا أضفنا القسم methods الذي يتم فيه تعريف جميع التوابع (methods) التي نرغب باستخدامها. واضح أنّنا سنعرّف التابع updateInfo الذي تحدثنا عنه قبل قليل. عرّفنا هذا التابع على أنّه function ومرّرنا إليه الكائن event وهو كائن يحتوي على بيانات الحدث الذي تمّ توليده تلقائيّا بسبب كتابة المستخدم ضمن مربّع النص. العبارة البرمجية الوحيدة الموجودة في هذا التابع هي:

this.message = event.target.value;

على نحو غريب قليلًا، ترمز الكلمة this هنا إلى الحقل data (المعرّف ضمن نفس كائن Vue.js) والذي يحتوي بدوره على الحقل message. سنوضّح سبب ذلك في درس لاحق. القسم الثاني من العبارة بسيط، وفيه نستخلص البيانات التي أدخلها المستخدم من خلال التعبير event.target.value.

جرّب تنفيذ البرنامج الآن بنقر زر Run، ثم حاول كتابة أي شيء ضمن مربع النص، ستلاحظ أنّه سيتم تحديث الرسالة بشكل فوري بالنص الذي تكتبه!

العمل على حاسوب محلي

إذا لم ترغب أن تعمل على jsfiddle.net يمكنك العمل بالتأكيد في وضع عدم اتصال محليًّا على حاسوبك الشخصي. علينا أوّلًا تنزيل Vue.js عن طريق الرابط https://Vue.js.org/js/vue.js (من الممكن أن يظهر محتوى الملف كاملًا ضمن صفحة عادية في المتصفح، انسخ محتويات الصفحة واحفظها ضمن جديد، سمّه: vue.js). في الحقيقة يمكنك استخدام هذه النسخة لأغراض التطوير البرمجية فقط، أمّا عندما يصبح التطبيق قيد الاستخدام العملي فيُنصح باستخدام النسخة التالية: https://Vue.js.org/js/vue.min.js

حصلت على النسختين السابقتين من الموقع الرسمي لإطار العمل Vue.js من الصفحة التالية: https://Vue.js.org/v2/guide/installation.html

أنشئ مجلّدًا وسمّه Vue.js-first-app، ثم انسخ ضمن هذا المجلّد ملف vue.js الذي نزّلته قبل قليل. باستخدام محرّر HTML المناسب لك، أنشئ ملف جديد واختر له مثلا الاسم index.html. ثم احفظه في نفس المجلّد السابق بجوار الملف vue.js، وبعد ذلك أضف إليه المحتوى التالي الذي قمت بتجميعه من محتويات التطبيق المحسّن الذي تناولناه في الفقرة السابقة:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Vue.js</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
      <input type='text' v-on:input="updateInfo"/>
      {{ message }}
    </div>

    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue!'
          },
          methods:{
            updateInfo:function(event){
              this.message = event.target.value;
            }
          }
        })
    </script>
  </body>
</html>

لاحظ معي أنّنا قد أضفنا مرجعًا لملف vue.js المحلّي عن طريق وسم script ضمن القسم head من المستند، وأضفنا شيفرة JavaScript المسؤولة عن تحديث خرج التطبيق ضمن القسم body من المستند.

يمكنك متابعة كتابة تطبيقاتك على هذا النحو، ولو أنّني أفضّل استخدام منصّات مثل jsfiddle.net و codepen.io على الأقل في هذه المرحلة التي نسبر بها أغوار Vue.js.

ختامًا

تناولنا في هذا الدرس مقدّمة سريعة إلى إطار العمل الواعد Vue.js حيث تعلّمنا كيف نبدأ مع Vue.js وكيف نكتب تطبيقات بسيطة توضّح لنا مدى السهولة والمرونة التي يتمتّع بها إطار العمل هذا. سنتابع عملنا في الدروس اللاحقة لنسبر أغوار Vue.js بشكل سهل ومتدرّج.

تمارين داعمة

سأزودك في التمرينين التاليين بمسألتين بسيطتين للتدرّب على المفاهيم الموجودة في هذا الدرس. يوجد بعد كل تمرين حل مقترح، حاول ألّا تنظر إلى الحلول المقترحة قبل تقديم حلولك.

تمرين 1

استخدم الوسيط click بدلًا من الوسيط input مع الموجّه v-on لكي يستجيب التطبيق عندما ينقر المستخدم على عنصر الإدخال بدًلا من الكتابة داخله وذلك في التطبيق المحسّن الذي تحدثنا عنه قبل قليل. اجعل التطبيق يعرض الرسالة "Clicked!" عندما ينقر المستخدم.

this.message = event.target.value;

this.message = 'Clicked!';

تمرين 2

في هذا التمرين ستُنشئ تطبيق آلة حاسبة بسيط يقوم بعملية حسابية واحدة وهي جمع عددين. أقترح الواجهة البسيطة التالية:

الميزة في هذا التطبيق أنّه إذا بدأ المستخدم بالكتابة في أي مربّع، يجب أن يقوم التطبيق بإيجاد المجموع بشكل فوري أثناء إدخاله الأرقام. لن نقوم في هذا التمرين بالتحقّق من صحة إدخال المستخدم.

<div id="app">
  <input type='text' v-on:input="updateLeftOper"/>
  <label>+</label>
  <input type='text' v-on:input="updateRightOper"/>
  <label>=</label>
  <label>{{result}}</label>
</div>

var app = new Vue({
  el: '#app',
  data: {
    result: 0,
    leftOper: 0,
    rightOper: 0
  },
  methods:{
      updateLeftOper: function(event){
        this.leftOper = parseFloat(event.target.value)
        this.result = this.leftOper + this.rightOper;
    },
    updateRightOper: function(event){
        this.rightOper = parseFloat(event.target.value)
        this.result = this.leftOper + this.rightOper;
    }
  }
})

اقرأ أيضًا

• المقال التالي: استخدام Vue.js للتعامل مع DOM
• النسخة الكاملة لكتاب أساسيات إطار العمل Vue.js