سلسلة دروس الفريموورك Vue.js [درس#5 events & event modifiers]

في الدرس السابق

تعلمنا ربط البيانات بالـattributes باستخدام ما يعرف بالـVue directives مثل(v-bind || v-html)

الآن سنتعرف على ديناميكية عمل الـevents داخل الـvue-instance ومدى سهولتها عن الـjQuery

قبل البداية:

  1. الدروس ستكون مكتوبة بالخطوات
  2. يوجد شرح فيديو بالأسفل مع كل درس
  3. يرجى ربط أحزمة المقاعد استعدادا لانطلاق الطائرة :rocket::airplane::flying_saucer:

فهرس الدروس
  1. درس#1 تثبيت الأدوات
  2. درس#2 Vue instance
  3. درس#3 data & methods
  4. درس#4 Data Binding
  5. درس#5 events & event modifiers
  6. درس#6 keyboard modifiers
  7. درس#7 two-way data binding
  8. درس#8 ورشة عمل تسجيل دخول

يلا نبدأ :smiley:

هذا هو الكود الذي سنبدأ به:

// index.html
<div id="my-app">
    <p>{{ age }}</p>
</div>
// app.js
new Vue({
  el: '#my-app',
  data: {
    age: 15
  }
})

يمكننا التحكم بالرقم age (جمع - طرح) عن طريق إضافة زر للإضافة وزر اخر للطرح

    <p>{{ age }}</p>
    <button>add 1</button>
    <button>subtract 1</button>

عند الضغط على زر add (هذا يسمى Event أو حدث)
Vue directives قدمت لنا حل ممتاز v-on لترقّب الأحداث بشكل عام:

<button v-on:eventName="function or operation">add 1</button>

نطبق الآن:

<button v-on:click="age += 1">add 1</button>
<button v-on:click="age -= 1">subtract 1</button>

الآن الأزرار تعمل ويمكنكم التجربة هنا:

يمكننا تنظيم شكل الكود بوضع المعادلة age += 1 داخل دالة يمكن استدعاؤها

// app.js
methods: {
    addOne () {
      this.age += 1
    },
    subtractOne () {
      this.age -= 1
    }
  }
// index.html
    <button v-on:click="addOne">add 1</button>
    <button v-on:click="subtractOne">subtract 1</button>

وستعمل الدوال بشكل طبيعي :grinning:


لنكتشف الآن شئ ممتع مع الرسم بـ Vue
نضيف div جديد ونعطيه id="canvas" ونضيف الـstyles:

// index.html
    <div id="canvas"></div>
// styles.css
#canvas {
  width: 600px;
  padding: 200px 20px;
  text-align: center;
  border: 1px solid #333;
  border-radius: 10px;
  margin-top: 10px;
}

الشكل:
image

نريد عرض قيمة احداثيات الماوس عند عمل hover على هذا الشكل:

// index.html
<div id="canvas">
      {{ x }} : {{ y }}
    </div>

نقوم بتعريف قيم x و y:

// app.js
data: {
    age: 15,
    x: 0,
    y: 0
  }

image

بالنسبة للـevent الذي سنستخدمه عن حركة الماوس داخل canvas هو mousemove
يمكنكم تفقد قائمة events في الجافاسكريبت هنا:
https://www.w3schools.com/jsref/dom_obj_event.asp

<div id="canvas" v-on:mousemove="What to do?">
      {{ x }} : {{ y }}
    </div>

الآن what to do؟
نريد عمل تحديث لإحداثيات الماوس والتي قيمتها تساوي صفر حتى الآن
سأخلق function جديدة اسمها updateXY

<div id="canvas" v-on:mouseMove="updateXY">
      {{ x }} : {{ y }}
    </div>

يوجد object في جافاسكريبت اسمه event يمكننا تمريره كـargument لنقوم بعرضه في الconsole لنرى ما بداخله

// app.js
updateXY (event) {
      console.log(event)
    }

النتيجة في الconsole:

ما نبحث عنه في الـ object هو قيم كل من offsetX و offsetY
الآن نحدث قيم x و y

updateXY (event) {
   this.x = event.offsetX
   this.y = event.offsetY
    }

جرب تحرك الماوس داخل الشكل وادعيلي :grinning:
https://repl.it/@Nasr_GalalGalal/workshop5

لنجرب استعمال event modifiers
كلنا نعلم أن modifier كهذا event.preventDefault() نستخدمه في الجافا سكريبت لإيقاف الوضع الافتراضي لعنصر معين
يسهل علينا vue الأمر في المثال التالي:

 <p><a v-on:click.prevent="testFunction" href="http://www.coretabs.net">Coretabs</a></p>

بمجرد إضافة .prevent يتوقف الوضع الافتراضي للرابط، بمعنى أنه لن يذهب الى موقع كورتابز
مع تطبيق محتوى test function أيا كان

يمكنك تفقد الـdocumentation لمزيد من المعلومات حول الevent modifiers


درس#6 keyboard modifiers

4 Likes