Vue.js 2



vue

Vue.js

ما هو Vue.js؟

يعد Vue (منطوق / vjuː / ، مثل طريقة العرض ) إطارًا متقدمًا لبناء واجهات المستخدم. خلافا لغيرها من الأطر monolithic ، تم تصميم Vue من الألف إلى الياء ليكون تبنيا بشكل متزايد. تركز المكتبة الأساسية على طبقة العرض فقط ، ويسهل التقاطها ودمجها مع المكتبات الأخرى أو المشاريع القائمة. من ناحية أخرى ، فإن Vue قادرة تمامًا على تشغيل تطبيقات صفحة أحادية متطورة عند استخدامها مع الأدوات الحديثة والمكتبات الداعمة .

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

ابدء

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

أسهل طريقة لتجربة Vue.js تستخدم مثال JSFiddle Hello World . لا تتردد في فتحه في علامة تبويب أخرى وتابع اتباع بعض الأمثلة الأساسية. أو ، يمكنك إنشاء ملف index.html وتضمين Vue مع:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

توفر صفحة Installation المزيد من الخيارات لتثبيت Vue. ملاحظة: لا نوصي بأن يبدأ المبتدئين باستخدام vue-cli ، خاصة إذا لم تكن على دراية بعد بأدوات الإنشاء المستندة إلى Node.js.

التقديم التعريفي

في صميم Vue.js هو نظام يمكننا من تقديم البيانات إلى DOM بشكلٍ مرئي باستخدام صيغة القالب المستقيمة:

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

لقد أنشأنا بالفعل أول تطبيق Vue! هذا يشبه إلى حد كبير تقديم قالب السلسلة ، لكن Vue قامت بالكثير من العمل تحت غطاء المحرك. البيانات و DOM مرتبطة الآن ، وكل شيء الآن رد الفعل . كيف نعرف؟ افتح وحدة تحكم جافا سكريبت في متصفحك (الآن ، في هذه الصفحة) وقم بتعيين app.message إلى قيمة مختلفة. يجب أن تشاهد المثال المقدم أعلاه محدّثًا وفقًا لذلك.

بالإضافة إلى الاستيفاء النصي ، يمكننا أيضًا ربط سمات العناصر مثل هذا:

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

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

إذا فتحت وحدة تحكم جافا سكريبت مرة أخرى app2.message = 'some new message' ، app2.message = 'some new message' مرة أخرى أن HTML app2.message = 'some new message' - في هذه الحالة سمة title - قد تم تحديثه.

الشرطي والحلقات

من السهل تبديل وجود عنصر ، أيضًا:

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

المضي قدما وإدخال app3.seen = false في وحدة التحكم. يجب أن ترى الرسالة تختفي.

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

هناك عدد غير قليل من التوجيهات الأخرى ، لكل منها وظيفته الخاصة. على سبيل المثال ، يمكن استخدام الأمر v-for لعرض قائمة بالعناصر باستخدام البيانات من صفيف:

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

في وحدة التحكم ، أدخل app4.todos.push({ text: 'New item' }) . يجب أن تشاهد عنصرًا جديدًا ملحقًا بالقائمة.

التعامل مع مدخلات المستخدم

للسماح للمستخدمين بالتفاعل مع تطبيقك ، يمكننا استخدام توجيه v-on لإرفاق مستمعي الأحداث الذين يستدعيون طرقًا في مثيلاتنا في Vue:

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

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

كما يوفر Vue أيضًا التوجيه v-model الذي يجعل الربط الثنائي بين إدخال النموذج والتطبيق يشير إلى نسيم:

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

يؤلف مع المكونات

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

شجرة مكون

في Vue ، فإن المكون هو في الأساس نسخة Vue مع خيارات محددة مسبقًا. تسجيل أحد المكونات في Vue أمر بسيط:

// Define a new component called todo-item
Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

الآن يمكنك تكوينه في قالب مكون آخر:

<ol>
  <!-- Create an instance of the todo-item component -->
  <todo-item></todo-item>
</ol>

ولكن هذا من شأنه أن يجعل النص نفسه لكل ما هو مهم ، وهو أمر لا يثير الاهتمام. يجب أن نتمكن من تمرير البيانات من النطاق الرئيسي إلى مكونات فرعية. دعونا نعدل تعريف المكون لجعله يقبل prop :

Vue.component('todo-item', {
  // The todo-item component now accepts a
  // "prop", which is like a custom attribute.
  // This prop is called todo.
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

الآن يمكننا تمرير todo في كل مكون مكرر باستخدام v-bind :

<div id="app-7">
  <ol>
    <!--
      Now we provide each todo-item with the todo object
      it's representing, so that its content can be dynamic.
      We also need to provide each component with a "key",
      which will be explained later.
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

هذا مثال مفتعل ، لكننا نجحنا في فصل تطبيقنا إلى وحدتين أصغر ، والطفل منفصل بشكل معقول عن الوالد عن طريق واجهة الدعائم. يمكننا الآن تحسين مكون <todo-item> مع القالب والمنطق الأكثر تعقيدًا دون التأثير على التطبيق الرئيسي.

في تطبيق كبير ، من الضروري تقسيم التطبيق بالكامل إلى مكونات لجعل التطوير قابلاً للإدارة. سنتحدث كثيرًا حول المكونات لاحقًا في الدليل ، ولكن إليك مثال (وهمي) لما قد يبدو عليه نموذج التطبيق مع المكونات:

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

العلاقة مع عناصر مخصصة

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

  1. مواصفات Web Components لا تزال في حالة المسودة ، ولا يتم تطبيقها في كل متصفح. في المقابل ، لا تتطلب مكونات Vue أي تعدد polyfills والعمل باستمرار في جميع المتصفحات المدعومة (IE9 وما فوق). عند الحاجة ، يمكن أيضًا دمج مكونات Vue داخل عنصر مخصص أصلي.

  2. توفر مكونات Vue ميزات مهمة غير متوفرة في العناصر المخصصة العادية ، وأبرزها تدفق البيانات عبر المكونات ، والاتصالات المخصصة للحدث وتكامل أداة البناء.

على استعداد لأكثر؟

لقد قدمنا ​​باختصار أهم الميزات الأساسية لنواة Vue.js - سيغطيها باقي هذا الدليل والميزات المتقدمة الأخرى مع تفاصيل أكثر دقة ، لذا تأكد من قراءة كل ذلك!