المقدمة ​

تعلم Vue مع دروس الفيديو على VueMastery.com

ماهي Vue ؟ ​

Vue (تنطق ڨْيُو) هو إطار عمل مبني بالـJavaScript لإنشاء واجهات المستخدم. يعتمد على HTML و CSS و JavaScript المعيارية ويوفر نموذج برمجة تصريحي هدفه وصف وظيفة البرمجية و ليس كيفية عملها، أحد ركائز هذا الإطار هو المكونات بحيث يساعدك على تطوير واجهات المستخدم بكفاءة بشكل متدرج من أبسط الصفحات إلى أعقد التطبيقات.

مثال بسيط :

import {  createApp } from 'vue'

createApp({
    data() {
        return {
            count: 0
        }
    }
}).mount('#app')

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    العداد: {{ count }}
  </button>
</div>

النتيجة

يوضح المثال أعلاه ميزتين أساسيتين في Vue :

• التصيير التصريحي : يقوم Vue بتعزيز الـHTML المعياري و اثرائه ببعض السمات الموجهة و اقحام متغيرات و تعبيرات برمجية بداخله و ذلك باستخدام وسم القالب (template) التي تتيح لنا وصف مخرج الـHTML بشكل تصريحي استنادًا إلى حالة تلك المتغيرات و التعبيرات المتحكم فيها من الـJavaScript .

• التفاعلية : يمكن لـVue بشكل تلقائي تتبع التحولات الطارئة على حالة المتغير المعرف في شيفرة الـJS وتقوم بتحديث شجرة DOM بكفاءة عند حدوث ذلك.

ربما يكون لديك العديد من الأسئلة لحد الآن، لكن لا داعي للقلق، سنقوم بإجابة كل تلك الأسئلة في حينها، فقط يرجى قراءة التوثيق بشكل متأني حتى تفهم بشكل ممتاز ما توفره Vue.

إطار عمل تقدمي ​

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

• تحسين الـHTML الثابت بدون خطوة بناء
• التضمين كمكونات ويب في أي صفحة
• التطبيقات أحادية الصفحة (SPA)
• التطوير المتكامل (Fullstack) /التصيير من طرف الخادم (SSR)
• Jamstack / توليد موقع ثابت (SSG)
• استهداف سطح المكتب والجوال و تقنية WebGL وحتى محرر الأوامر

إذا بدت لك هذه المفاهيم غريبة و لا تستطيع اسيتعابها، فلا داعي للقلق! فكل من الدرس التوجيهي والدليل لا يتطلبان سوى معرفة أساسية بلغة HTML و JavaScript، و يمكنك المواصلة بدون أن تكون خبيرا في هاته اللغات.

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

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

المكونات أحادية الملف ​

في معظم مشاريع Vue المُنشأة عن طريق أدوات البناء مثل Webpack أو Vite، نقوم بتأليف مكونات Vue باستخدام تنسيق ملف يشبه HTML يسمى المكون أحادي الملف (يُعرف أيضًا باسم ملفات vue. ، والمختصرة باسم SFC). يقوم ملف Vue أحادي الملف، كما يوحي الاسم ، بتغليف شيفرة المكون (JavaScript) و القالب باستعمال وسم template الذي يمثل الـ(HTML) و التنسيقات (CSS) في ملف واحد. هذا هو المثال السابق ، مكتوبًا بصيغة SFC.

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">العداد: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">العداد: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

SFC هي خاصية مُميِّزة لـVue وهي الطريقة الموصى بها لتأليف مكونات Vue إذا كانت حالة الاستخدام الخاصة بك تستدعي إعدادًا لعملية بناء. يمكنك معرفة المزيد في القسم المخصص له حول الدافع وراء تبني الـSFC و كيفية توظيفه - و ما عليك ادراكه هو أن هاته الصيغة تقوم Vue بترجمتها لشيفرة قابلة للتصيير و ذلك عن طريق اعدادات أدوات البناء.

أنماط الواجهة البرمجية (API) ​

يمكن تأليف مكونات Vue بنمطين مختلفين من واجهات برمجة التطبيقات: واجهة الخيارات و الواجهة التركيبية.

واجهة الخيارات لبرمجة التطبيقات ​

باستخدام واجهة الخيارات، نحدد شيفرة المكون باستخدام كائن مؤلف من خاصيات مثل data و methods و mounted . يتم عرض الخاصيات التي تحددها الخيارات في دوال this الداخلية، حيث this ترمز إلى نسخة المكون:

<script>
export default {

  // الخاصيات المستعادة من data() تصير متفاعلة و تعرض عبر this.
  data() {
    return {
      count: 0
    }
  },

  // Methods هي دوال تغير الحالة و تنشط التحديثات.
  // يمكن ربطها كمستمعات للأحداث في القوالب.
  methods: {
    increment() {
      this.count++
    }
  },

  // خطافات دورة الحياة تُستدعى في مراحل مختلفة من دورة حياة المكون.
  // ستُستدعى هذه الدالة عند تركيب المكون.

  mounted() {
    console.log(`العداد الابتدائي ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">العداد : {{ count }}</button>
</template>

اختبرها في حقل التجارب

الواجهة التركيبية لبرمجة التطبيقات ​

باستخدام الواجهة التركيبية، نحدد شيفرة المكون باستخدام دوال مستوردة من وحدة vue في ملف الـSFC ، يتم أيضا استخدام الواجهة التركيبية مع صيغة الـ<script setup>. السمة setup هي تلميح يجعل Vue ينفذ تحويلات وقت التصريف التي تسمح لنا باستخدام الواجهة التركيبية مع شيفرة أقل. على سبيل المثال ، يمكن استخدام الاستيرادات والمتغيرات / الدوال المُصرح بها في أعلى <script setup> مباشرةً في القالب دون الحاجة لاستعادتها من دخل توابع كائن المكون.

في المثال الموالي إليك نفس المكون ، بنفس القالب بالضبط ، ولكن باستخدام الواجهة التركيبية و صيغة الـ <script setup> :

<script setup>
import { ref, onMounted } from 'vue'

// حالة تفاعلية
const count = ref(0)

// الدوال التي تعدل على الحالة وتنشط التحديثات
function increment() {
  count.value++
}

// الدوال الخاصة بدورة الحياة
onMounted(() => {
  console.log(`العداد الابتدائي ${count.value}.`)
})
</script>

<template>
  <button @click="increment"> العداد : {{ count }}</button>
</template>

اختبرها في حقل التجارب

أيهما تختار؟ ​

كلا النمطين قادران تمامًا على تغطية حالات الاستخدام الشائعة. و يمثلان واجهتين مختلفتين مدعومتين من نفس النظام الأساسي. في الواقع، الواجهة التركيبية تعتبر قاعدة لتنفيذ واجهة الخيارات، و على طول التوثيق تقدم المعارف و المفاهيم حول Vue باستخدام الواجهتين.

تتمحور واجهة الخيارات حول مفهوم "نسخة المكون" ( this كما رأينا في المثال) و هي تجسيد للكائن الممثل للمكون، والذي يتماشى بشكل أفضل مع النموذج الذهني لفئة للمستخدمين المتعودين على لغات برمجية كائنية التوجه، كما أنه أكثر ملاءمة للمبتدئين من خلال عدم التطرق إلى تفاصيل و مفاهيم التفاعل و ايضا تسمح لهم بتنظيم الشيفرة عبر مجموعة الخيارات و الخاصيات المدمجة في كائن المكون.

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

يمكنك معرفة المزيد حول المقارنة بين النمطين والفوائد المحتملة للواجهة التكوينية في الأسئلة الشائعة حول الواجهة التركيبية.

إذا كنت جديدًا على Vue ، فإليك توصيتنا العامة:

• لغرض التعلم ، اتبع النمط الذي يبدو لك أسهل في الفهم. مع العلم أن المفاهيم و المعارف الأساسية لـVue تُقدم باستخدام كلا النمطين، و تبقى لك الحرية في الانتقال إلى النمط الآخر وقتما شئت.

• من أجل الاستخدام في نسخة الانتاج:

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

  • اتبع نهج الواجهة التركيبية + الملفات أحادية الملف إذا كنت تخطط لإنشاء تطبيقات كاملة باستخدام Vue.

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

هل يزال لديك أسئلة؟ ​

إذا لم يزل لديك أسئلة تفضل بالقاء نظرة على قسم الأسئلة الشائعة.

اختر مسارك في طريق التعلم ​

لمختلف المطورين أساليب تعلم مختلفة. لا تتردد في اختيار مسار تعليمي يناسب ميولاتك - على الرغم من أننا نوصي بمطالعة كل المحتوى، إن أمكن!