ما هو Vue.js ؟

ما هو Vue.js؟

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

إذا كنت ترغب في معرفة المزيد عن Vue قبل التعمق في الموضوع ، فقد أنشأنا مقطع فيديو يسير عبر المبادئ الأساسية ونموذج مشروع.

مشاهدة الفيديو 

#ابدء

تلميح

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

أسهل طريقة لتجربة Vue.js هي استخدام مثال Hello World المشهور لاي لغة جديدة  لا تتردد جربه الان مثال حي اظغط هنا 

تنصيب vue.js

  <script src="https://unpkg.com/vue@next"></script>  

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

#التقديم التصريحي

يوجد في Vue.js نظام يمكّننا من عرض البيانات بشكل تصريحي إلى DOM باستخدام بناء جملة قالب مباشر:

<div id="counter">
  Counter: {{ counter }}
</div>
<script>
const Counter = {
  data() {
    return {
      counter: 0
    }
  }
} 
Vue.createApp(Counter).mount('#counter')
</script>

لقد أنشأنا بالفعل أول تطبيق Vue!، وهذا لان Vue قامت بالكثير من العمل خلف الستارلتسهيل الامر للمستخدمين . البيانات و DOM مرتبطتان الآن ، وكل شيء أصبح الآن تفاعليًا. تريد معرفة ذالك ؟ ألق نظرة على المثال أدناه حيث تزداد خاصية العداد كل ثانية وسترى كيف يتغير عرض DOM:

<div id="counter">
  Counter: {{ counter }}
</div>
<script>
const Counter = {
  data() {
    return {
      counter: 0
    },mounted() {
    setInterval(() => {
      this.counter++
    }, 1000)
   }
  }
}

Vue.createApp(Counter).mount('#counter')
</script> 

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

<div id="bind-attribute">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds to see my dynamically bound
    title!
  </span>
</div>
<script>
const AttributeBinding = {
  data() {
    return {
      message: 'You loaded this page on ' + new Date().toLocaleString()
    }
  }
}

Vue.createApp(AttributeBinding).mount('#bind-attribute')
</script>

هنا نلاحظ عنصر جديدًا. يسمى v-bind هو عبارة عن (Attribut). تكون التوجيهات مسبوقة بـ v-للإشارة إلى أنها سمات (Attribut) خاصة مقدمة من Vue ، وكما تلاحظ ، فإنها تجعل العنصر تفاعليًا خاصًتا على DOM المعروض. هنا نقول لل (v-bind) "احتفظ بسمة(Attribut) عنوان(title) هذا العنصر(element's) محدثة بخاصية(property) message في المثال النشط الحالي".

#معالجة مدخلات المستخدم(input)

للسماح للمستخدمين بالتفاعل مع تطبيقك ، يمكننا استخدام التوجيه v-on لإرفاق الأحداث (event) لاستدعاء الدوال (function) في المثال التالي:

<div id="event-handling">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
const EventHandling = {
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message
        .split('')
        .reverse()
        .join('')
    }
  }
} 
Vue.createApp(EventHandling).mount('#event-handling') 
</script>

يوفر Vue أيضًا التوجيه v-model الذي يجعل الربط ثنائي الاتجاه أي عند إدخال قيمة في النموذج (input) يتم تحديث قيمة المتغير مباشرة:

 <div id="two-way-binding">
  <p>{{ message }}</p>
  <input v-model="message" />
</div>
<script>
const TwoWayBinding = {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}

Vue.createApp(TwoWayBinding).mount('#two-way-binding')
</script>

#الشرطية والحلقات(Conditionals and Loops)

 من السهل أيضًا تبديل وجود العنصر مثال تحقق الشرط اذا كان المتغيير منطقي (true) اظهر محتوى(div)  اما اذا كان المتغيير غير منطقي 

(false) لاتظهر محتوى ابلوك (div):

 <div id="conditional-rendering">
  <span v-if="seen">Now you see me</span>
</div>
<script>
const ConditionalRendering = {
  data() {
    return {
      seen: true
    }
  }
}
Vue.createApp(ConditionalRendering).mount('#conditional-rendering')
</script>

مثال على عمل التكرار (loop)

<div id="list-rendering">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
<script>
const ListRendering = {
  data() {
    return {
      todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
      ]
    }
  }
}
Vue.createApp(ListRendering).mount('#list-rendering')
</script>

#المكونات (Components)

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

في Vue ، يعد المكون (Components) أساسًا مثيلًا بخيارات محددة مسبقًا. يعد تسجيل مكون في Vue أمرًا سهلاً: نقوم بإنشاء كائن (Object) مكون كما فعلنا مع كائنات التطبيق ونقوم بتعريفه في خيار مكونات الأصل:

<script>
 // Create Vue application
const app = Vue.createApp(...)

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

// Mount Vue application
app.mount(...)
</script>

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

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

لكن هذا يعرض نفس النص لكل مهمة ، وهو أمر غير ممتع للغاية. يجب أن نكون قادرين على تمرير البيانات من النطاق الأصلي إلى المكونات التابعة. دعنا نعدل تعريف المكون لجعله يقبل خاصية :

 <script> 
app.component('todo-item', {
  props: ['todo'],
  template: `<li>{{ todo.text }}</li>`
})
</script>

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

 
<div id="todo-list-app">
  <ol>
    <!--
  نوفر الآن كل عنصر todo مع كائن todo
       إنه يمثلها ، بحيث يمكن أن يكون محتواها ديناميكيًا.
       نحتاج أيضًا إلى تزويد كل مكون بـ "مفتاح" ،
       والتي سيتم شرحها لاحقًا.
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>
<script> 
 const TodoList = {
  data() {
    return {
      groceryList: [
        { id: 0, text: 'Vegetables' },
        { id: 1, text: 'Cheese' },
        { id: 2, text: 'Whatever else humans are supposed to eat' }
      ]
    }
  }
}

const app = Vue.createApp(TodoList)

app.component('todo-item', {
  props: ['todo'],
  template: `<li>{{ todo.text }}</li>`
})

app.mount('#todo-list-app')

</script>

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

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

في الدرس القادم نلتقي ان شاء الله