طرق Vue.js

طريقة Vue هي وظيفة مرتبطة بمثيل Vue. يتم تحديد الطرق داخل ملفmethodsمنشأه. دعونا نرى كيف يعملون.


ما هي طرق Vue.js

طريقة Vue هي وظيفة مرتبطة بمثيل Vue.

يتم تحديد الطرق داخل ملفmethodsمنشأه:

new Vue({
  methods: {
    handleClick: function() {
      alert('test')
    }
  }
})

أو في حالة مكونات الملف الفردي:

<script>
export default {
  methods: {
    handleClick: function() {
      alert('test')
    }
  }
}
</script>

تكون الطرق مفيدة بشكل خاص عندما تحتاج إلى تنفيذ إجراء ما وإرفاق ملفv-onالتوجيه على عنصر للتعامل معهالأحداث. مثل هذا الذي يدعوhandleClickعند النقر على العنصر:

<template>
  <a @click="handleClick">Click me!</a>
</template>

قم بتمرير المعلمات إلى طرق Vue.js

يمكن للطرق قبول المعلمات.

في هذه الحالة ، تقوم فقط بتمرير المعلمة في القالب ، وأنت

<template>
  <a @click="handleClick('something')">Click me!</a>
</template>
new Vue({
  methods: {
    handleClick: function(text) {
      alert(text)
    }
  }
})

أو في حالة مكونات الملف الفردي:

<script>
export default {
  methods: {
    handleClick: function(text) {
      alert(text)
    }
  }
}
</script>

كيفية الوصول إلى البيانات من طريقة

يمكنك الوصول إلى أي من خصائص البيانات لمكون Vue باستخدامthis.propertyName:

<template>
  <a @click="handleClick()">Click me!</a>
</template>

<script> export default { data() { return { name: ‘Flavio’ } }, methods: { handleClick: function() { console.log(this.name) } } } </script>

ليس علينا استخدامthis.data.name، مجردthis.name. توفر Vue ارتباطًا شفافًا لنا. استخدامthis.data.nameسيرفع خطأ.

كما رأيت من قبل في وصف الأحداث ، ترتبط الأساليب ارتباطًا وثيقًا بالأحداث ، لأنها تُستخدم كمعالجات للأحداث. في كل مرة يقع حدث ما ، يتم استدعاء هذه الطريقة

تحميل مجانيكتيب Vue


المزيد من دروس vue: