ملخص المعرفة الأساسية لـ vue.js

يقدم

Vue.js هي مكتبة تستخدم لإنشاء واجهات تطبيق الويب

من الناحية الفنية ، يركز Vue.js على طبقة ViewModel لوضع MVVM ، والذي يربط نماذج العرض وربط البيانات بطريقتين. يتم استخلاص تنسيق DOM الفعلي وتنسيق الإخراج في التعليمات (التوجيهات) والمرشحات (المرشحات)

في مجال الفلسفة ، حاول جعل واجهة برمجة التطبيقات لربط بيانات MVVM بسيطة قدر الإمكان. النموذجية والتكوين هي أيضا اعتبارات تصميم مهمة. VUE ليس إطارًا شاملاً ، وهو مصمم ليكون بسيطًا ومرنًا. يمكنك استخدامه للنموذج الأولي السريع ، أو الاختلاط والمطابقة مع المكتبات الأخرى لتحديد المكدس الأمامي.

Vue. يشير API JS إلى AngularJS ، changoutjs ractive.js rivets.js. على الرغم من أوجه التشابه ، أعتقد أن Vue.js يوفر طريقة قيمة للحصول على قيمتك في بعض الأطر الحالية الآن

حتى إذا كنت على دراية بالفعل ببعض هذه المصطلحات ، فمن المستحسن أن تمرر نظرة عامة على المفاهيم التالية ، لأن مفاهيم هذه المصطلحات قد تختلف أدناه vue.js

نظرة عامة على المفهوم

ViewModel

كائن ، يزامن النماذج ووجهات النظر. في Vue.js ، ViewModels هو مُنشئ VUE أو فئة فرعية

 var vm = new vue ({ / * reports * /})

هذا هو الكائن الرئيسي الذي ستتفاعل معه كمطور باستخدام Vue.js. لمزيد من التفاصيل ، انظر الفصل: Vue.

منظر

HTML/DOM الفعلي ينظر إليه المستخدم

 vm. $ el // العرض

عند استخدام Vue.js ، لن تلمس عملية DOM باستثناء التعليمات المخصصة الخاصة بك. عند تحديث البيانات ، سيتم تشغيل تحديث العرض تلقائيًا. يمكن الوصول إلى تحديث العرض بدقة إلى كل عقدة testNode. كما أنها متزامنة وتنفيذها بشكل غير متزامن لتوفير أداء أفضل.

نموذج

هذا كائن JavaScript المعدل قليلاً

 vm. $ data // النموذج

في vue.js ، النموذج هو مجرد كائن JavaScript بسيط ، وكائن بيانات ، يمكنك معالجة خصائصها وعرض النماذج ، ومراقبة نماذجهم ، ثم الحصول على إشعارات للتغيير. يستخدم Vue.js getter/setter من ES5 لتحويل الخصائص في كائن البيانات HU ، والذي يسمح للتشغيل المباشر دون فحص قذر.

سيكون لكائن البيانات طفرات في الأوقات المناسبة ، لذا فإن تعديله هو نفسه تعديل بيانات VM. $ بالرجوع إليه. هذا يسهل أيضًا العديد من مثيلات ViewModel لمراقبة نفس جزء البيانات.

للحصول على التفاصيل الفنية ، يرجى الرجوع إلى خيارات مثيل: البيانات.

التوجيهات

تطلب سمة HTML الخاصة Vue.js القيام ببعض المعالجة حول DOM

 <div v-text = "message"> </viv>

يحتوي عنصر DIV هنا على تعليمات نصية V ، والقيمة هي رسالة. وهذا يعني إخبار vue.js بالحفاظ على محتوى عقدة Div هذه متزامنة مع سمة الرسالة في ViewMode

يمكن أن تتغلف التعليمات من أي عملية DOM. على سبيل المثال ، تعمل V-ATTR على عنصر السمة ، V-Repeat Cloning عنصرًا يعتمد على صفيف ، ونسخ إضافي في الحدث ، سنناقشه لاحقًا.

روابط الشارب

يمكنك أيضًا استخدام روابط على غرار الشارب ، في النص والخصائص. يتم ترجمتها إلى توجيه V-Text V-ATTR. على سبيل المثال:

 <div id = "person-{{id}}"> hello {{name}}! </viv>

على الرغم من مريحة ، هناك بعض الأشياء التي تحتاجها للانتباه إلى:

إذا تم تعيين سمة صورة SRC ، فسيتم إرسال طلب HTTP ، لذلك عندما يتم تحليل القالب لأول مرة ، من الأفضل استخدام V-ATTR

عند تحليل HTML ، سيقوم Internet Explorer بحذف سمة النمط الداخلي غير الصالح ، لذلك إذا كنا نريد دعم IE CSS المضمّن ، فأنا أستخدم دائمًا على الطراز V

داخل V-HTML ، يمكنك استخدام ثلاثة أقواس للتعامل مع HTML غير المقيدة ، ولكن هذا سيؤدي إلى هجمات XSS المحتملة ويمكنها فتح النوافذ. لذلك ، يوصى بالقيام بذلك فقط عندما تكون البيانات آمنة تمامًا ، أو تنظيف HTML غير الموثوق بها من خلال مرشح خط أنابيب مخصص

المرشحات

يمكن معالجة هذه البيانات الخام باستخدام وظائف قبل تحديث العرض. إنهم يستخدمون توجيه "خط أنابيب" أو ملزمة:

 <viv> {{message | الاستفادة}} </div>

الآن قبل تحديث محتوى النص الخاص بـ DIV ، ستتم معالجة قيمة هذه الرسالة من خلال وظيفة الاستفادة. لمزيد من التفاصيل ، يرجى الاطلاع على المرشحات بعمق.

عناصر

في Vue.js ، يعد مكونًا مُنشئًا طراز عرض بسيط مسجل لدى Vue.component (المعرف ، مُنشئ). مع معرف مرتبط ، يمكن تداول توجيه V-Component لقالب نموذج عرض آخر. هذه الآلية البسيطة تجعل نموذج العرض المعلن إعادة استخدامه ودمجه بطريقة مشابهة لمكونات الويب دون الحاجة إلى أحدث متصفح أو ملقات ثقيلة. من خلال تقسيم التطبيق إلى مكونات أصغر ، فإن النتيجة هي قاعدة رمز عالية التفكك ويمكن صيانتها. لمزيد من التفاصيل ، راجع تكوين ViewModels.

مثال سريع

 <div id = "demo"> <h1> {{title | Expercase}} </h1> <ul> <li v-repeat = "todos" v-on = "click: int =! ind"> {{content}} </li> </ul> </viv>

 var demo = new vue ({el: '#demo' ، data: {title: 'todos' ، todos: [{done: true ، content: 'learn javascript'} ، {done: false ، content: 'learn vue.js'}})

ترجمة تقريبية ، يرجى الإشارة إلى أي أخطاء