يركز Vue.js بشكل أساسي على جزء التصور من التطبيق ، والذي يُسمى أيضًا تطوير الواجهة الأمامية. تزداد شعبية Vue.js يومًا بعد يوم لأنه من السهل جدًا دمجها مع المشاريع والمكتبات الأخرى. إنه سهل التثبيت والاستخدام.
Vue.js هو إطار عمل JavaScript تقدمي المصدر المفتوح تستخدم لتطوير واجهات مستخدم ويب تفاعلية وتطبيقات صفحة واحدة (SPA). يُشار إلى Vue.js عادةً باسم Vue ويتم نطقه باسم "view.js" أو "view".
تطبيق الصفحة الواحدة أو SPA هو تطبيق ويب أو موقع ويب يوفر للمستخدمين تجربة سلسة للغاية وسريعة الاستجابة تشبه تطبيقات سطح المكتب. يحتوي تطبيق الصفحة الواحدة على قائمة وأزرار وكتل في صفحة واحدة. عندما ينقر المستخدم على أحدها ، فإنه يعيد كتابة الصفحة الحالية ديناميكيًا بدلاً من تحميل صفحات جديدة كاملة من خادم. هذا هو السبب وراء سرعته في الاستجابة.
تم تصميم Vue أساسًا لتطوير الواجهة الأمامية ، لذلك يتعين عليه التعامل مع الكثير من ملفات HTML و JavaScript و CSS. يسهّل Vue.js على المستخدمين توسيع HTML بسمات HTML تسمى التوجيهات. يوفر Vue.js توجيهات مدمجة والعديد من التوجيهات definite من قبل المستخدم لتحسين وظائف تطبيقات HTML.
فيما يلي قائمة بأهم ميزات Vue.js:
تعد مكونات Vue.js واحدة من الميزات المهمة في إطار العمل هذا. يتم استخدامها لتوسيع عناصر HTML الأساسية لتغليف التعليمات البرمجية القابلة لإعادة الاستخدام. يمكنك إنشاء عناصر مخصصة قابلة لإعادة الاستخدام في تطبيقات Vue.js يمكن إعادة استخدامها لاحقًا في HTML.
يوفر Vue.js قوالب مستندة إلى HTML يمكن استخدامها لربط DOM المعروض ببيانات مثيل Vue. جميع قوالب Vue هي HTML صالحة يمكن تحليلها بواسطة متصفحات متوافقة مع المواصفات ومحللات HTML. يجمع Vue.js النماذج في وظائف عرض DOM الظاهري. يعرض Vue المكونات في ذاكرة DOM الظاهرية قبل تحديث المتصفح. يمكن لـ Vue أيضًا حساب الحد الأدنى لعدد المكونات لإعادة العرض وتطبيق الحد الأدنى من معالجة DOM عند تغيير حالة التطبيق.
يوفر Vue نظام استجابة يستخدم كائنات JavaScript بسيطة ويحسن إعادة العرض. في هذه العملية ، يتتبع كل مكون تبعياته التفاعلية ، بحيث يعرف النظام بالضبط متى وأي مكونات يجب إعادة تصييرها.
يتم التنقل في الصفحة بمساعدة vue-router. يمكنك استخدام مكتبة vue-router المدعومة رسميًا لتطبيق الصفحة الواحدة.
يتيح لك Vue استخدام تأثيرات انتقال مختلفة عند إدراج العناصر أو تحديثها أو إزالتها من DOM.
هناك عدة طرق لاستخدام Vue.js. يمكنك تثبيته بالانتقال إلى موقعه الرسمي أو يمكنك البدء في استخدام ملف Vue.js من مكتبة CDN أيضًا. فيما يلي بعض الطرق لاستخدام Vue.js في مشروعك.
إذا كنت تريد استخدام العلامة <script> من Vue.js مباشرة إلى ملف HTML الخاص بك ، فأنت بحاجة إلى تنزيله من الموقع الرسمي.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> دعنا نذهب إلى موقع Vue.js الرسمي https://vuejs.org/v2/guide/installation.html لتنزيل vue.js وفقًا لاحتياجاتك.
يمكنك أيضًا استخدام ملف Vue.js من CDN في تطبيقك. استخدم الرابط https://unpkg.com/vue@3/dist/vue.global.js داخل العنصر <script>، على النحو التالي:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js هي واحدة من أحدث تقنيات البرامج المستخدمة على نطاق واسع لتطوير الويب وبناء تطبيقات الصفحة الواحدة (SPA). كما يمكنك التخمين من الاسم ، يتم استخدامه في الغالب لواجهة المستخدم أو جانب العرض من المشروع.
دعنا نرى فوائد استخدام Vue.js في مشروعك:
واحدة من أكبر مزايا Vue.js هي أنها صغيرة الحجم جدًا. يعتمد نجاح إطار عمل JavaScript كثيرًا على حجمه ويبلغ حجم المكون الإضافي المثير لجافا سكريبت 18-21 كيلوبايت فقط ، لذا يمكنك تنزيله واستخدامه بسهولة في لمح البصر.
يتميز إطار عمل Vue.js ببنية بسيطة جدًا ومن السهل جدًا فهمه. إنه أحد أسباب شعبية هذا الإطار. إذا كنت معتادًا على استخدام HTML و JavaScript ، فيمكنك بسهولة كتابة التعليمات البرمجية في Vue.js. يمكن للمستخدمين إضافة Vue.js بسهولة إلى مشروع الويب الخاص بهم بسبب هيكله البسيط وتطوير التطبيقات.
يحتوي Vue.js على العديد من المكونات لكل شيء ويمكن دمجه بسرعة كبيرة مع التطبيقات الحالية. يمكنك دمجه مع أي تطبيق مكتوب بلغة JavaScript.
تسهل الطبيعة المرنة لـ Vue.js أيضًا على مطوري React.js و Angular.js وأي أطر عمل JavaScript جديدة أخرى فهمها. يوفر الكثير من المرونة لاستخدام العقد الافتراضية لكتابة ملفات HTML وملفات JavaScript وملفات JavaScript نقية.
يمكنك إنشاء عناصر مخصصة يمكن إعادة استخدامها في تطبيقات Vue.js.
يوفر Vue.js وثائق بسيطة وكاملة ومفصلة للغاية ، بحيث يمكن للمطورين الذين لديهم فكرة قليلة عن HTML و JavaScript استخدامها للبرمجة.
يستخدم Vue.js DOM ظاهريًا مشابهًا لأطر أخرى موجودة مثل ReactJS و Ember وما إلى ذلك. DOM الظاهري هو تمثيل شجرة خفيف الوزن داخل الذاكرة لـ HTML DOM الأصلي ويتم تحديثه دون التأثير على DOM الأولي.
يوفر Vue.js اتصالًا ثنائي الاتجاه بهندسة نموذج عرض النموذج (MVVM) التي تبسط معالجة كتل HTML.
يأتي إطار العمل مع نظام يسمح لنا بتقديم البيانات بشكل تصريحي إلى DOM باستخدام بناء جملة نموذج بسيط ومباشر.
هنا مثال:
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'This is a simple Vue.js Declarative Rendering example!'
}
})
</script>
</body>يتيح لنا إطار عمل Vue.js القيام بذلك definire HTML سمات تسمى التوجيهات ، والتي تستخدم لتوفير وظائف لتطبيقات HTML.
يوجد نوعان من التوجيهات في Vue.js:
يستخدم Vue.js الأقواس المزدوجة {{}} كعناصر نائبة للبيانات ، وتوجيهات Vue.js هي سمات HTML التي تستخدم v- بادئة.
يتصل تطبيق Vue بعنصر DOM واحد ويتحكم فيه بالكامل. في المثال أعلاه ، إنه #app.
باستخدام Vue ، يمكننا اعتبار HTML كنقطة دخول ، وكل شيء آخر يحدث داخل مثيل Vue الذي تم إنشاؤه.
دعنا نرى مثالاً نحاول فيه ربط العناصر والسمات:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-2">
<span v-bind:title="message">
Hover mouse over me for a few seconds
and see a dynamically bound title which I have set!
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
</script>
</body>
</html> في هذه الحالة ، تكون سمة v-bind الجديدة هي التوجيه. يتم استخدام التوجيهات مع v- بادئة للإشارة إلى أنها سمات فريدة يوفرها Vue ، ويتم استخدامها لتطبيق سلوك استجابة خاص على DOM المعروض.
نتيجة المثال هو التالي
Ercole Palmeri
أعلنت صحيفة فاينانشيال تايمز يوم الاثنين الماضي عن صفقة مع OpenAI. "فاينانشيال تايمز" ترخص صحافتها ذات المستوى العالمي...
يدفع الملايين من الأشخاص مقابل خدمات البث، ويدفعون رسوم الاشتراك الشهرية. من الشائع أنك…
سوف تستمر شركة Coveware by Veeam في تقديم خدمات الاستجابة لحوادث الابتزاز السيبراني. ستوفر Coveware إمكانات الطب الشرعي والمعالجة...
تُحدث الصيانة التنبؤية ثورة في قطاع النفط والغاز، من خلال اتباع نهج مبتكر واستباقي لإدارة المحطات.
