طرق 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.js

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

ما هي طرق Vue.js

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

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

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

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