itqan: vue3

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="https://fonts.googleapis.com/css2?family=Lemonada:wght@300&display=swap" rel="stylesheet">  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body>  <div id="roninge"> <div class="container"> <div class=" section">  <div v-if="showtimer" class="countdown-cont"> <div class="countdown-block">  <div class="countdown-digit">{{ displaydays }}</div> <div class="countdown-label">الايام</div> </div> <div class="countdown-block"> <div data-js="countdown-hour" class="countdown-digit">  {{ displayhours }} </div> <div class="countdown-label"> الساعات</div> </div> <div class="countdown-block">  <div class="countdown-digit">{{ displayminutes }}</div> <div class="countdown-label"> الدقائق</div> </div> <div class="countdown-block">  <div class="countdown-digit">{{ displayseconds }}</div> <div class="countdown-label">الثواني</div> </div> </div>  <h1 v-if="expired" class="countdown-endtext"> انتهى الوقت </h1> </div> </div> </div>  <script> const Counter = { data() { return { //اعلان المتغيرات التي ستحمل قيمة الاوقات expired: false, showtimer: false, displaydays: 0, displayhours: 0, displayminutes: 0, displayseconds: 0, }; }, mounted() { // تشغييل دالة اظهار العد التنازلي this.showroninge(); }, methods: { //اضافة رقم صفر اذا كان الرقم فردي shack: function(num) { return num < 10 ? "0" + num : num; }, //دالة اظهار العد التنازلي showroninge: function() { // تحديث العد التنازلي كل ثانية const timer = setInterval(() => { // الحصول على الوقت منذ بدايته سنة 1970 الى يومنا بالملي ثانية const now = new Date().getTime(); // حدد التاريخ الذي نقوم بالعد التنازلي إليه const end = new Date("2024-03-11").getTime(); // ابحث عن المسافة بين الآن وتاريخ العد التنازلي const distance = end - now; // إذا انتهى العد التنازلي ، أوقف المؤقت واطبع رسالة انتهى الوقت if (distance < 0) { clearInterval(timer); this.expired = true; this.showtimer = false; return; } // حسابات الوقت للأيام والساعات والدقائق والثواني const days = Math.floor(distance / 864e5); const hours = Math.floor((distance % 864e5) / 36e5); const minutes = Math.floor((distance % 36e5) / 6e4); const seconds = Math.floor((distance % 6e4) / 1e3); // ارسال القيم الى متغيرات الداتة وعرضها في المتصفح this.displayminutes = this.shack(minutes); this.displayseconds = this.shack(seconds); this.displayhours = this.shack(hours); this.displaydays = this.shack(days); //اخفاء نص انتهى الوقت this.expired = false; //اضهار بلوك الوقت this.showtimer = true; }, 1000); }, }, } Vue.createApp(Counter).mount('#roninge'); </script>  <style> *{ padding:0px; margin:0px; box-sizing:border-box; } body{ font-family: 'Lemonada', cursive; } .countdown-cont { display: grid; grid-template-columns: repeat(4 , 1fr); gap: 15px; text-align: center; max-width: 660px; z-index:1; margin:auto; position:relative ; } .countdown-digit { font-size: xxx-large; background: #282c3473; border-radius: 6px; color: azure; margin-bottom: 5px; padding: 25px 10px; font-weight: bolder; } .countdown-label { color:#fff; } .section{ margin:3em 1.5em; } .container{ background: linear-gradient(320deg, #42b983, #5077a0); padding: 25px 0px } .container img{ width:100% ; height:auto; } @media (max-width:460px){ .countdown-digit { font-size: x-large; margin-bottom: 5px; padding: 15px 5px; } .section{ margin:1em 1em; } } </style> </body> </html>

هو إطار عمل جافا سكريبت لبناء واجهات المستخدم. يعتمد على (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>

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

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