معالج الطريقة
يمكنك استخدام الأمر V-ON للاستماع إلى أحداث DOM:
<div id = "example"> <button v-on: click = "greet"
نربط معالج حدث النقر إلى طريقة تحية. فيما يلي الطريقة المحددة في مثيل VUE:
var vm = new vue ({el: '#example' ، البيانات: {name: 'vue.js'} ، // تحديد الأساليب في الكائن `method`: {getty: function (event) {// in the method` evense alert. }}) // يمكنك أيضًا الاتصال بالطريقة vm.greet () في رمز JavaScript // -> 'hello vue.js!'اختبرها بنفسك
معالج بيان مضمّن
بالإضافة إلى الارتباط المباشر بالطريقة ، يمكنك أيضًا استخدام عبارات JavaScript المضمنة:
<div id = "exame-2"> <button v-on: click = "say ('hi')> say hi </button> <button v-on: click =" say ('what') "> قل ماذا <//div> New Vue ({el: '#example-2' ، الطرق: {say: function (msg) {Alert (msg)}}})على غرار التعبيرات المضمنة ، يقتصر معالج الأحداث على بيان واحد.
في بعض الأحيان يكون من الضروري أيضًا الوصول إلى أحداث DOM الأصلية في معالج البيان المضمّن. يمكنك استخدام حدث $ المتغير الخاص لتمريره إلى الطريقة:
<button v-on: click = "say ('hello!' ، $ event)"> إرسال </button>
// ... الطرق: {say: function (msg ، event) {// الآن يمكننا الوصول إلى كائن الحدث الأصلي event.preventDefault ()}}المعدل الحدث
في معالجات الأحداث ، غالبًا ما يكون الحدث. على الرغم من أنه يمكننا القيام بذلك بسهولة في طريقة ما ، فمن الأفضل أن تكون الطريقة المنطق للبيانات الخالصة دون التعامل مع تفاصيل حدث DOM.
لحل هذه المشكلة ، يوفر Vue.js V-ON مع معدلتين للحدث:. هل تتذكر أن المعدل هو لاحقة التعليمات التي تبدأ بالنقطة؟
<!-منع الحدث النقر من bubled-> <a v-on: click.stop = "dothis"> </a> <!-إرسال الحدث لم يعد يحمل الصفحة-> <form v-on: submit.prevent = "onSubmit"> </part> <! v-on: submit.prevent> </part>
1.0.16 أضاف اثنين من المعدلات الإضافية:
<!-استخدم وضع الالتقاط عند إضافة مستمعي الأحداث-> <div v-on: click.capture = "dothis"> ... </div> <!-يتم تشغيل رد الاتصال فقط عندما يتم تشغيل الحدث على العنصر نفسه (وليس عنصرًا طفلًا)-> <div v-on: click.self = "dothat"> ... </div>
المعدل الرئيسي
عند الاستماع إلى أحداث لوحة المفاتيح ، غالبًا ما نحتاج إلى اكتشاف رمز المفاتيح. يسمح Vue.js بإضافة المعدلات الرئيسية إلى V-On:
<!-لا يسمى vm.submit () فقط عندما يكون رمز المفاتيح 13-> <الإدخال v-on: keyup.13 = "إرسال">
تذكر أن جميع الرموز الرئيسية صعبة ، يوفر Vue.js الاسم المستعار للمفاتيح الأكثر استخدامًا:
<!-كما هو مذكور أعلاه-> <الإدخال v-on: keyup.enter = "submit"> <!-Abbreviation Syntax-> <input @keyup.enter = "submit">
كل الاسم المستعار الرئيسي:
•يدخل
•فاتورة غير مدفوعة
•يمسح
•خروج
•فضاء
•أعلى
•تحت
•غادر
•يمين
1.0.8+: يدعم الاسم المستعار مفتاح أحادي الخط.
1.0.17+: يمكنك تخصيص الاسم المستعار الرئيسي:
// يمكنك استخدام @keyup.f1vue.directive ('on'). keycodes.f1 = 112لماذا تستمع للأحداث في HTML؟
ربما لاحظت أن هذا النوع من طريقة مراقبة الأحداث يتعارض مع المفهوم التقليدي لـ "فصل القلق". لا تقلق ، لأن جميع طرق التعامل مع الأحداث Vue.js ترتبط تمامًا بعرض ViewModel للعرض الحالي ، ولن يتسبب في أي صعوبات في الصيانة. في الواقع ، هناك العديد من الفوائد لاستخدام V-On:
1. مسح قالب HTML ويمكنك بسهولة تحديد موقع الطرق المقابلة في رمز JavaScript.
2. نظرًا لأنك لست مضطرًا إلى ربط الأحداث يدويًا في JavaScript ، فقد يكون رمز ViewModel الخاص بك هو المنطق الخالص للغاية ، وهو مفصل تمامًا عن DOM ، مما يسهل اختباره.
3. عند تدمير ViewModel ، سيتم حذف جميع معالجات الأحداث تلقائيًا. لا داعي للقلق بشأن كيفية تنظيفها بنفسك.
تم تجميع هذه المقالة في "Vue.js Front Component Learning Tutorial" ، والجميع مرحب بهم للتعلم والقراءة.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.