سلسلة دروس الفريموورك Vue.js [درس#6 keyboard modifiers]

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

ديناميكية عمل الـevents داخل الـ vue-instance ومدى سهولتها
قبل البداية:

  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:

حتى تتضح الصورة نضع button ونجعله يعمل بالنقر بالماوس وأيضا بال space:

// index.html
<div id="my-app">
  <button @click.space="action">meow</button>
</div>
// app.js
 methods: {
    action () {
      console.log('clicked!')
    }
  }

عند تحميل الصفحة والضغط على زر meow سيطبع في console النص clicked!

لحسن الحظ يقدم لنا vuejs بعض المفاتيح الجاهزة للتسهيل:
image

يمكننا مثلا الربط بـ text input

    <input type="text" @keyup.enter="alertInPage">

حينما ينتهي المستخدم من الضغط على زر enter:

// app.js
alertInPage () {
      alert('text is written!')
    }

سيتم ظهور نافذة بهذا الشكل:

أتمنى لكم Happy coding!

درس#7 two-way data binding

2 Likes