تعلم Vue.js - دليل شامل للمبتدئين والمحترفين

ما هو Vue.js؟

Vue.js هو إطار عمل JavaScript прогрессивный 用于构建用户界面. تم إنشاؤه بواسطة Evan You وتم إطلاقه لأول مرة في عام 2014. يتميز Vue.js byكونه قابل للتكيف بشكل تدريجي، مما يعني أنه يمكنك استخدامه لإضافة تفاعلية بسيطة إلى صفحات موجودة، أو استخدامه لبناء تطبيقات معقدة أحادية الصفحة.

يتميز Vue.js byبسهولة التعلم والمرونة، وهو خيار ممتاز للمطورين الذين يرغبون في الانتقال من vanilla JavaScript إلى إطار عمل، أو الذين يريدون الانتقال من أطر عمل أخرى.

مميزات Vue.js

خفيف الوزن

حجم صغير للغاية (~20KB gzipping) مع أداء عالي

سهل التعلم

منحنى تعليمي لطيف، يمكن البدء في استخدام HTML و CSS و JavaScript العادية

نظام المكونات

بناء واجهات معزولة وقابلة لإعادة الاستخدام

Reactivity

تحديث تلقائي للواجهة عند تغيير البيانات

Two-Way Data Binding

ربط البيانات ثنائي الاتجاه (v-model)

مجتمع نشط

مكتبة ضخمة من الحزم والمكونات الجاهزة

استخدامات Vue.js

تطبيقات الويب SPA

بناء تطبيقات صفحة واحدة تفاعلية

تحسين صفحات الويب

إضافة تفاعلية لصفحات HTML موجودة

Server-Side Rendering

تحسين SEO مع Nuxt.js

تطبيقات جوال

تطوير تطبيقات جوال مع NativeScript

تطبيقات Desktop

تطبيقات سطح المكتب مع Electron

تطبيقات VR

تطبيقات الواقع الافتراضي مع A-Frame

مفاهيم Vue.js الأساسية

المكونات (Components)

وحدات مستقلة تمثل أجزاء من واجهة المستخدم

Data و Methods

تخزين البيانات والوظائف في كل مكون

Directives

تعليمات خاصة تبدأ بـ v- لتعديل DOM

v-model

ربط بيانات ثنائي الاتجاه مع الحقول

v-for

عرض قوائم بيانات بشكل تكراري

v-if / v-else

عرض عناصر مشروطة

مثال على كود Vue.js

مكون Vue بسيط

                        
                            <template>
                            <div>
                            <h1>مرحباً, {{ name
                            }}!</h1>
                            </div>
                            </template>

                            <script>
                            export default { data()
                            { return { name:
                            'أحمد'
                            } } }
                            </script>
                        
                    

استخدام v-model

                        
                            <template>
                            <div>
                            <input
                            v-model="message"
                            placeholder="اكتب رسالتك">
                            <p>الرسالة: {{
                            message }}</p>
                            </div>
                            </template>

                            <script>
                            export default { data()
                            { return { message:
                            ''
                            } } }
                            </script>
                        
                    

v-for لعرض قائمة

                        
                            <template>
                            <ul>
                            <li
                            v-for="item in items"
                            :key="item.id">
                            {{ item.name }}
                            </li>
                            </ul>
                            </template>

                            <script>
                            export default { data()
                            { return { items: [ {
                            id: 1, name: 'أحمد' }, {
                            id: 2, name: 'محمد' }, {
                            id: 3, name: 'علي' } ] }
                            } }
                            </script>
                        
                    

خيارات كتابة Components في Vue 3

Options API

الطريقة التقليدية باستخدام كائن_options مع data, methods, computed, etc. مناسبة للمبتدئين ومشاريع صغيرة

Composition API

طريقة جديدة باستخدام دوال مثل ref, reactive, computed. مناسبة للمشاريع الكبيرة وإعادة استخدام الكود

أدوات Vue.js

Vue CLI

أداة سطر أوامر لإنشاء مشاريع Vue

Vite

أداة بناء سريعة وحديثة

Vue Router

التنقل بين الصفحات في تطبيق SPA

Pinia

إدارة حالة التطبيق (مطور من قبل فريق Vue)

Vuex

إدارة حالة التطبيق (النسخة الكلاسيكية)

VueUse

مكتبة من Composables مفيدة

مسار تعلم Vue.js

١. أساسيات HTML و CSS و JS

تعلم الأساسيات قبل Vue.js

٢..directives الأساسية

v-if, v-for, v-bind, v-on, v-model

٣. Components

إنشاء مكونات وإعادة استخدامها مع Props و Events

٤. Lifecycle Hooks

فهم مراحل حياة المكون created, mounted, updated, unmounted

٥. Computed و Watch

الخصائص المحسوبة ومراقبة التغييرات

٦. Vue Router