ما هو Vue3 ؟

هو إطار عمل جافا سكريبت لبناء واجهات المستخدم. يعتمد على (HTML و CSS و JavaScript)

يوفر نموذج برمجة تعريفي وقائم على المكونات يساعدك على تطوير واجهات المستخدم بكفاءة، سواء كانت بسيطة أو معقدة.

إليك ابسط مثال للإنطلاق في فيو ثلاثة

 
<!-- استدعاء مكتبة فيو الإصدار الثالث -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
  <button @click="count++">
    عند الضغط فوقي سوف اضاعف العدد: {{ count }}
  </button>
</div>
<script>
const { createApp, ref} = Vue

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

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

العرض التعريفي:

يُمكِّن العرض التعريفي المستخدم من تحديد مخرجات HTML بشكل تصريحي اعتمادًا على حالة JavaScript. يتوسع Vue في HTML العادي بمساعدة بناء جملة النموذج.

التفاعل:

يتتبع Vue تلقائيًا تغييرات حالة JavaScript ويقوم بتحديث DOM بكفاءة عند حدوث التغييرات.

متطلبات تعلم فيو الاصدار الثالث

إذا كنت جديدًا في تطوير الواجهة الأمامية للمستخدم، قبل البدأ في تعلم فيو يجب عليك تعلم اساسيات HTML وCSS وJavaScript. فقد لا تكون أفضل فكرة هي الانتقال مباشرةً إلى إطار العمل كخطوة أولى - لأنك لن تجد ظالتك بسهولة لان اصل انشاء الفريم ورك هو للتسهيل واختصار كتابة الكود إفهم الأساسيات اولا ثم الانطلاق في تعلم فيو!

نبذة مختصرة عن فيو

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

  • تضمين المكونات في أي صفحة
  • تطبيق الصفحة الواحدة (Single-Page Application)
  • Fullstack / العرض من جانب الخادم (Server-Side Rendering)
  • Jamstack / إنشاء الموقع الثابت (Static Site Generation)
  • استهداف سطح المكتب والجوال وWebGL وحتى الجهاز الطرفي

مكونات الملف الواحد

مكونات الملف الواحد بالإنجليزية (Single-File Component) نقوم بتأليف مكونات الفيو باستخدام تنسيق ملف يشبه html لكن يكون بتنسيق *.vue ويشتمل على اكواد (JavaScript) (HTML) (CSS) في ملف واحد. يؤدي هذا الملف عملية عرض مقال او تعديل مقال او زر اعجاب او تسجيل دخول او خروج ...إلخ

إليك المثال السابق، مكتوبًا بتنسيق (Single-File Component)


<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>

تعد هذه الطريقة هي الطريقة الموصى بها خاصة اذا كانت المشاريع التي تعمل عليها كبيرة او متوسطة فهي مريحة من ناحية التنظيم وسهلة الفهم من قبل مطوريين اخرين

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

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

واجهة برمجة التطبيقات (Options API)

باستخدام Options API، يمكننا اختيار الداتا كدالة ولا يمكننا اختيارها ككائن الخيارات التالية ( data, methods, and mounted) يتم عرضها بواسطة Options في هذه الوظائف الداخلية، والتي تشير إلى (component instance):


   <script>
export default {
// الخصائص التي يتم إرجاعها من البيانات () تصبح حالة تفاعلية
// وسيتم عرضه على `هذا`.
  data() {
    return {
      count: 0
    }
  },

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

// يتم استدعاء خطافات دورة الحياة في مراحل مختلفة
// دورة حياة المكون.
// سيتم استدعاء هذه الوظيفة عند تثبيت المكون.
  mounted() {
    console.log(`العد الأولي هو ${this.count}.`)
  }
}
</script>

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

واجهة برمجة التطبيقات (Composition API)

المثال التالي يوضح لك طريقة الاستخدام

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

// reactive state -- حالة رد الفعل
const count = ref(0)

// functions that mutate state and trigger updates
//الوظائف التي تغير الحالة وتطلق التحديثات
function increment() {
  count.value++
}

// lifecycle hooks -- خطافات دورة الحياة
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

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

ايهما اختار في مشاريع

كلاهما يمكنك من انشاء مشاريع كبيرة والامر يعود لك فانت صاحب القرار اختر الطريقة التي ترتاح لها