في الدرس السابق
ديناميكية عمل الـevents داخل الـ vue-instance ومدى سهولتها
قبل البداية:
- الدروس ستكون مكتوبة بالخطوات
- يوجد شرح فيديو بالأسفل مع كل درس
- يرجى ربط أحزمة المقاعد استعدادا لانطلاق الطائرة
فهرس الدروس
يلا نبدأ
حتى تتضح الصورة نضع 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 بعض المفاتيح الجاهزة للتسهيل:
يمكننا مثلا الربط بـ text input
<input type="text" @keyup.enter="alertInPage">
حينما ينتهي المستخدم من الضغط على زر enter:
// app.js
alertInPage () {
alert('text is written!')
}
سيتم ظهور نافذة بهذا الشكل:
أتمنى لكم Happy coding!