ورقة الغش Vue.js

الأوامر والتعليمات الشائعة التي ستستخدمها في جلسات البرمجة Vue.js اليومية

التوجيهات

التوجيهات هي سمات تم تحديدها بواسطةv-اختصار.

التوجيه وصف
v-text يستخدم الخاصية كقيمة نصية للعنصر
v-html يستخدم الخاصية كقيمة نصية للعنصر ، لتفسير HTML
v-if إظهار عنصر فقط إذا كان الشرط صحيحًا
v-else يظهر عنصر بديل إذا كان السابقv-ifهو زائف
v-else-if يضيف عنصرًا آخر إذا كان الحظر لملفv-ifبناء
v-show مشابه لv-if، ولكنها تضيف العنصر إلى DOM حتى لو كانت زائفة. فقط يضبطه علىdisplay: none.
v-for يتكرر عبر مصفوفة أو كائن قابل للتكرار
v-on الاستماع إلى أحداث DOM
v-bind بشكل تفاعلي بتحديث سمة HTML
v-model ينشئ ارتباطًا ثنائي الاتجاه لمدخلات النموذج. المستخدمة في عناصر النموذج ، تحديث النموذج عندما يغير المستخدم قيمة حقل النموذج
v-once يطبق الخاصية مرة واحدة فقط ، ولا يحدّثها أبدًا حتى إذا تغيرت البيانات التي تم تمريرها

v-bindوv-onلها تنسيق مختزل:

<a v-bind:href="url">...</a>
<a :href="url">...</a>
<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>

مثال علىv-if/v-else/v-else-if:

<div v-if="type === 'A'">
  it's A
</div>
<div v-else-if="type === 'B'">
  it's B
</div>
<div v-else-if="type === 'C'">
  it's C
</div>
<div v-else>
  it's neither one
</div>

الشرطية

يمكنك تضمين شرط في تعبير باستخدام عامل التشغيل الثلاثي:

{{ isTrue ? 'yes' : 'no' }}

العمل مع عناصر النموذج

لإجراء تحديث للنموذج عند حدوث حدث التغيير ، وليس في أي وقت يضغط فيه المستخدم على مفتاح ، يمكنك استخدامv-model.lazyبدلا من مجردv.model.

العمل مع حقول الإدخال ،v-model.trimمفيد لأنه يزيل المسافات البيضاء تلقائيًا.

وإذا قبلت رقمًا بدلاً من سلسلة ، فتأكد من استخدامهv-model.number.

تعديل الأحداث

أنا أستعملclickكمثال ، لكنه ينطبق على جميع الأحداث المحتملة

  • v-on:click.nativeتشغيل حدث DOM أصلي بدلاً من حدث Vue
  • v-on:click.stopوقف انتشار حدث النقر
  • v-on:click.passiveيستفيد منالخيار السلبي لـ addEventListener
  • v-on:click.captureاستخدام التقاط الحدث بدلاً من فقاعات الحدث
  • v-on:click.selfتأكد من عدم ظهور فقاعات فقاعية لحدث النقر من حدث فرعي ، ولكنه حدث مباشرةً على هذا العنصر
  • v-on:click.onceسيتم تشغيل الحدث مرة واحدة بالضبط
  • v-on:submit.prevent: مكالمةevent.preventDefault()في حدث الإرسال الذي تم تشغيله ، والذي يُستخدم لتجنب إرسال نموذج لإعادة تحميل الصفحة

لمزيد من المعلومات حول التكاثر ، فقاعات / التقاط انظر بلديدليل أحداث JavaScript.

معدِّلات أحداث الماوس

  • v-on:click .leftمشغلات فقط عند النقر بزر الفأرة الأيسر
  • v-on:click .rightيطلق فقط عند النقر بزر الماوس الأيمن
  • v-on:click .middleمشغلات فقط عند النقر فوق زر الماوس الأوسط

أرسل حدثًا فقط إذا تم الضغط على مفتاح معين

  • v-on:keyup.enter
  • v-on:keyup.tab
  • v-on:keyup.delete
  • v-on:keyup.esc
  • v-on:keyup.up
  • v-on:keyup.down
  • v-on:keyup.left
  • v-on:keyup.right

معدِّلات أحداث لوحة المفاتيح

قم بتشغيل الحدث فقط إذا تم الضغط على مفتاح لوحة مفاتيح معين:

  • .ctrl
  • .alt
  • .shift
  • .meta(cmd في Mac ، مفتاح windows في Win)

v- ربط

  • v-bind .propربط الدعامة بدلاً من السمة
  • v-bind .camelاستخدم camelCase لاسم السمة
  • v-bind .syncالسكر النحوي الذي يتوسع إلىv-onمعالج لتحديث القيمة المنضمة. نرىهذه.

خطاف دورة الحياة

  • beforeCreateتم استدعاؤه قبل إنشاء التطبيق
  • createdيسمى بعد إنشاء التطبيق
  • beforeMountتم استدعائه قبل تحميل التطبيق على DOM
  • mountedتم استدعاؤه بعد تحميل التطبيق على DOM
  • beforeDestroyتم استدعاؤه قبل تدمير التطبيق
  • destroyedتم استدعاؤه بعد تدمير التطبيق
  • beforeUpdateتم استدعاؤه قبل تحديث الخاصية
  • updatedيتم استدعاؤه بعد تحديث الخاصية
  • activatedيتم استدعاؤه عندما يتم تنشيط مكون الاحتفاظ
  • deactivatedيتم استدعاؤه عند إلغاء تنشيط أحد المكونات التي تم الاحتفاظ بها على قيد الحياة

مكونات مدمجة

يوفر Vue 5 مكونات مدمجة:

  • <component>
  • <transition>
  • <transition-group>
  • <keep-alive>
  • <slot>

التكوين العام لكائن Vue

الVue.configالكائن لديه هذه الخصائص ، والتي يمكنك تعديلها عند إنشاء المثيل:

خاصية وصف
silent الافتراضي إلى خطأ ، إذا كان صحيحًا ، فقم بإيقاف السجلات والتحذيرات
optionMergeStrategies يسمح بتحديد أاستراتيجية دمج مخصصةللخيارات
devtools الافتراضات إلى صواب في التنمية ، وخاطئة في الإنتاج. يمكنك تجاوز تلك القيم.
errorHandler يسمح بتعيين وظيفة معالج الأخطاء. مفيد لربط الحراسة والخدمات المماثلة الأخرى
warnHandler يسمح بتعيين وظيفة معالج تحذير ، على غرارerrorHandler، ولكن للتحذيرات بدلاً من الأخطاء
ignoredElements تُستخدم للسماح لـ Vue بتجاهل العناصر المخصصة المحددة خارجها ، مثلمكونات الويب.
keyCodes تتيح لك تحديد الأسماء المستعارة للمفاتيح المخصصة لـv-on
performance الافتراضات إلى خطأ. إذا تم الضبط على "true" ، يتتبع أداء مكونات Vue في Browser DevTools.
productionTip افتراضات على صواب. اضبط على خطأ لتعطيل التحذير "أنت في وضع التطوير" أثناء التطوير في وحدة التحكم.

طرق كائن Vue

طريقة وصف
Vue.extend يسمح بفئة فرعية لكائن Vue ، لإنشاء ملف تعريف مخصص
Vue.nextTick يؤجل رد الاتصال ليتم تنفيذه بعد دورة تحديث DOM التالية
Vue.set إضافة خاصية إلى الكائن
Vue.delete حذف خاصية من الكائن
Vue.directive تعيين (أو الحصول) على توجيه عام
Vue.filter تعيين (أو الحصول على) عامل تصفية عام
Vue.component تعيين (أو الحصول على) مكون عام
Vue.use قم بتثبيت البرنامج المساعد Vue.js
Vue.mixin ضع مزيجًا عالميًا
Vue.compile تجميع سلسلة قالب في وظيفة تصيير
Vue.version إرجاع الإصدار المثبت حاليًا من Vue

تم تمرير الخيارات إلى كائن Vue

عند تهيئة كائن Vue ، فإنك تمرر كائنًا:

const vm = new Vue({

})

يقبل هذا الكائن عددًا من الخصائص.

خاصية وصف
data يسمح بتمرير مجموعة من البيانات التفاعلية التي سيتم استخدامها بواسطة تطبيق Vue. يجب إضافة جميع الخصائص التفاعلية في وقت التهيئة ، ولا يمكنك إضافة خصائص جديدة لاحقًا.
props إنها مجموعة من السمات التي يتم عرضها للمكونات الرئيسية كبيانات إدخال.
propsData البيانات الافتراضية للدعائم. مفيد فقط أثناء الاختبار
methods مجموعة من الأساليب التي تم تحديدها في مثيل Vue
computed مثل الأساليب ، ولكن مخبأة داخليًا
watch يسمح بمشاهدة الخصائص ، واستدعاء وظيفة عند تغييرها

مثال على تحديد البيانات والطرق والخصائص المحسوبة:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
    reverseMessageAsMethod: function () {
      return this.message.split('').reverse().join('')
    }
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

console.log(vm.reverseMessageAsMethod) // => ‘olleH’ vm.message = ‘Goodbye’ console.log(vm.reversedMessage) // => ‘eybdooG’

DOM

  • elيعيّن عنصر DOM حيث يتم تثبيت المثيل عليه. يمكن أن يكون محدد CSS ، أو HTMLElement
  • templateهو قالب ، يتم تمثيله كسلسلة ، سيحل محل العنصر المركب
  • renderبدلاً من ذلك ، لتحديد القالب ، يمكنك تحديد قالب باستخدام وظيفة التقديم
  • renderErrorقم بتعيين مخرج بديل عند إرفاق الوظيفة بـrenderفشل

أصول المثيل Vue

  • directivesمجموعة التوجيهات لإقران مثيل Vue
  • filtersمجموعة المرشحات لربطها بمثيل Vue
  • componentsمجموعة المكونات المراد ربطها بمثيل Vue

خيارات تكوين Vue

  • parentيحدد المثيل الأصل
  • mixinsيحدد مجموعة من كائنات mixin
  • extendsتمديد عنصر آخر

خيارات كائن Vue الأخرى

  • nameيتيح لك تعيين اسم للمكون استدعائه ، وهو مفيد في تصحيح الأخطاء أو عندما تحتاج إلى إضافة مكون بشكل متكرر في القالب الخاص به
  • functionalإذا كان هذا صحيحًا ، يتم تعيين المكون ليكون عديم الحالة (data) وعديم اللواط (لاthis) ، مما يجعلها أكثر خفة
  • modelيسمح بتخصيص الخاصية المستخدمة في الأحداث ، وهو مفيد على سبيل المثال عند التفاعل مع النماذج
  • commentsالافتراضات إلى خطأ. إذا تم التعيين على true ، فسيحتفظ بتعليقات HTML التي تم وضعها في القوالب

خصائص المثيل

بالنظر إلى مثيل Vue ، تم تخزينه في متغيرconst vm = new Vue(/*...*/)، يمكنك فحصها والتفاعل معها.

خصائص مثيل Vue

  • vm.$dataكائن البيانات المرتبط بالمثيل
  • vm.$propsالدعائم التي تلقاها المثيل
  • vm.$elعنصر DOM الذي يرتبط به المثيل
  • vm.$optionsالكائن المستخدم لإنشاء مثيل Vue
  • vm.$parentالمثيل الأصل
  • vm.$rootمثيل الجذر (إذا كان هذا هو مثيل الجذر ، فهذا يشير إلى نفسه)
  • vm.$childrenمجموعة من حالات الأطفال
  • vm.$slotsمصفوفة من الفتحات المرتبطة الموجودة في النموذج
  • vm.$scopedSlotsمصفوفة من فتحات النطاق المرتبطة
  • vm.$refsكائن يحتوي على خاصية لكل عنصر يشير إليهrefالسمة المحددة في القالب
  • vm.$isServertrue إذا كان مثيل Vue يعمل على الخادم (مفيد في العرض من جانب الخادم)
  • vm.$attrsكائن من السمات التي يتم توفيرها للمكون ولكن لم يتم تعريفها على أنها خاصيات
  • vm.$listenersكائنv-onالمستمعين الحدث المعينين للمكون

طرق البيانات

  • vm.$watchإعداد مراقب لتغييرات الخصائص في بيانات Vue. يمكنه أيضًا مراقبة تغيرات القيمة داخل الكائنات
  • vm.$setتعيين خاصية
  • vm.$deleteحذف خاصية

الأحداث

  • vm.$emitتشغيل حدث مخصص علىvmمثيل Vue
  • vm.$onالاستماع إلى حدث مخصص علىvmمثيل Vue
  • vm.$onceمثل$on، لكنه يستمع مرة واحدة فقط
  • vm.$offيزيل مستمع الحدث من مثيل Vue

طرق دورة الحياة

  • vm.$mountقم بتحميل مثيل Vue على عنصر DOM ، في حالة عدم تثبيته بعد
  • vm.$forceUpdateقوةvmنسخة Vue لإعادة التصيير. لا يجبر المكونات الفرعية على العرض.
  • vm.$nextTickيقبل رد الاتصال ويقوم بجدولة ذلك لدورة تحديث DOM التالية
  • vm.$destroyيدمر التطبيق ويزيل جميع المكونات التابعة والمراقبين والمستمعين

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


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