Vue هي مكتبة JavaScript صغيرة وخفيفة الوزن. يحتوي على واجهة برمجة تطبيقات بسيطة وسهلة الفهم تجعل المطورين أسهل وأكثر ملاءمة عند تطوير تطبيقات الويب. في الواقع ، ما جعل Vue فخوراً دائمًا هو راحتها وتنفيذها ومرونتها.
الغرض من هذا البرنامج التعليمي هو استخدام بعض الأمثلة لمنحك نظرة عامة على بعض المفاهيم والميزات الأساسية. في البرامج التعليمية الأخرى ، ستتعلم المزيد من الميزات المفيدة لـ VUE لإنشاء مشروع قابل للتطوير مع VUE.
ربط بيانات MVVM
يتمثل جوهر MVVM في ربط العرض والنموذج من خلال ربط البيانات ، بحيث يتم تعيين تغييرات البيانات تلقائيًا لعرض التحديثات. vue.js تقترض آلية تعليمات Angular في تصميم واجهة برمجة تطبيقات ربط البيانات: يمكن للمستخدمين تطبيق ربط البيانات من خلال سمات HTML مع بادئات خاصة ، أو استخدام استيفاء قالب الدعامة المجعد المشتركة ، أو استخدام ربط ثنائية الاتجاه على عناصر النموذج:
<!-التوجيه-> <span v-text = "msg"> </span> <!-interpolation-> <span> {{msg}} </span> <!-ربط ثنائي الاتجاه-> <الإدخال v-model = "msg">الاستيفاء هو في الأساس تعليمات ، فقط لتسهيل كتابة القوالب. أثناء تجميع القالب ، سيقوم Vue.js بإنشاء كائن توجيه لكل عقدة DOM التي تحتاج إلى تحديث ديناميكي. عندما تتغير البيانات التي لوحظها كائن التعليمات ، فإنها ستؤدي عمليات DOM المقابلة على العقدة الهدف المربوطة. يتيح ربط البيانات المستندة إلى التعليمات أن يتم تغليف عمليات DOM محددة بشكل معقول في تعريفات التعليمات. لا يحتاج رمز العمل إلا إلى إشراك قوالب وعمليات على حالة البيانات ، مما يحسن إلى حد كبير كفاءة التطوير وقابلية التقييم للتطبيق.
على عكس Angular ، لا تحتوي واجهة برمجة تطبيقات Vue.js على مفاهيم معقدة مثل الوحدة النمطية ووحدة التحكم والنطاق والمصنع والخدمة ، وما إلى ذلك ، ويستند كل شيء على "مثيل ViewModel":
<!-template-> <div id = "app"> {{msg}} </div> // الكائن الأصلي هو data var data = {msg: 'hello!'} // إنشاء مثيل viewmodel var vm = new vue ({// حدد عنصر الهدف el: // // توفير بيانات البيانات الأولية: البيانات})نتيجة تقديم:
<div id = "app"> hello! </viv>
أثناء تقديمه ، أكملت Vue.js أيضًا الربط الديناميكي للبيانات: إذا تم تغيير قيمة Data.msg ، فسيتم تحديث DOM تلقائيًا. أليست بسيطة للغاية وسهلة الفهم؟ بالإضافة إلى ذلك ، قام Vue.js أيضًا بتبسيط واجهة برمجة التطبيقات للتوجيهات المخصصة والمرشحات. إذا كان لديك تجربة تطوير زاوي ، فستبدأ بسرعة كبيرة.
تنفيذ مراقبة البيانات
مبدأ التنفيذ لمراقبة بيانات Vue.JS يختلف اختلافًا أساسيًا عن زاوي. قد يعرف القراء الذين يعرفون Angular أن ملاحظات بيانات Angular تستخدم آليات الفحص القذرة. سيكون لكل تعليمات كائن مقابل يستخدم لمراقبة البيانات ، يسمى مراقب ؛ سيكون هناك العديد من المراقبين في نطاق. عندما تحتاج الواجهة إلى تحديث ، فإن Angular سوف تتكرر من خلال جميع المراقبين في النطاق الحالي ، وتقييمها واحدًا تلو الآخر ، ثم قارنها بالقيم القديمة المحفوظة من قبل. إذا تغيرت نتيجة التقييم ، فسيتم تشغيل التحديث المقابل. وتسمى هذه العملية دورة Digest. هناك مشكلتان في التحقق القذر:
تعني أي تغييرات بيانات أن كل مراقب في النطاق الحالي يحتاج إلى إعادة تقييم ، لذلك عندما يكون عدد المراقبين ضخمًا ، سيتأثر أداء التطبيق حتماً ويصعب تحسينه.
عندما تتغير البيانات ، لا يمكن للإطار اكتشاف حدوث التغييرات بنشاط. يحتاج إلى تشغيل دورة Digest يدويًا لتحفيز تحديث DOM المقابل. يتجنب Angular هذه المشكلة عن طريق تشغيل جزء دورة Digest تلقائيًا في وظيفة معالج أحداث DOM ، ولكن لا تزال هناك العديد من المواقف التي تتطلب من المستخدم تشغيله يدويًا.
يستخدم Vue.JS آلية مراقبة تعتمد على جمع التبعية. من حيث المبدأ ، هو نفس خروج المغلوب القديم MVVVM. المبادئ الأساسية لجمع التبعية هي:
تحويل البيانات الأصلية إلى "كائنات يمكن ملاحظتها". يمكن تقدير أو تعيين كائن يمكن ملاحظته.
أثناء عملية تقييم المراقب ، سيقوم كل كائن يمكن ملاحظته الذي يتم تناوله بتسجيل المراقب الحالي كمشترك له ويصبح اعتمادًا على المراقب الحالي.
عند تعيين كائن قابل للملاحظة معال ، فإنه يخطر جميع المشتركين بإعادة تقييم التحديثات المقابلة والمشغلات.
تتمثل ميزة الاعتماد على التجميع في أنه يمكن تتبع التغييرات بدقة واستباقية في البيانات ، ولا توجد مشكلتين في الفحوصات القذرة المذكورة أعلاه. ومع ذلك ، عادة ما تتطلب تطبيقات جمع التبعية التقليدية ، مثل خروج المغلوب ، لف البيانات الأصلية لإنشاء كائنات يمكن ملاحظتها. إنهم بحاجة إلى استخدام مكالمات الوظائف عند أخذ القيم وتعيين القيم. طريقة الكتابة مرهقة وليست بديهية بدرجة كافية عند إجراء عمليات البيانات ؛ في الوقت نفسه ، فإن دعم الكائنات ذات الهياكل المتداخلة المعقدة ليس مثاليًا.
يستخدم Vue.JS Object.DefineProperty طريقة لتحويل خصائص كائن البيانات الأصلي بشكل مباشر إلى Getters and Setters ، وتنفيذ جمع التبعية والتشغيل داخل هاتين وظيفتين ، ويدعم تمامًا هياكل الكائنات المتداخلة. بالنسبة للصفائف ، يتم الاستماع إلى تغييرات الصفيف من خلال طرق قابلة للتغيير التي تلتزم الصفيف ، مثل الدفع. هذا يجعل من المستحيل تقريبًا تشغيل بيانات Vue.js وتشغيل الكائنات الأصلية [ملاحظة: عند إضافة/حذف السمات ، أو تعديل عناصر محددة في صفيف ، يجب استدعاء وظيفة محددة ، مثل OBJ. $ ADD (المفتاح ، القيمة) لإحداث تحديث. هذا يقتصر على ميزات اللغة من ES5. ] ، يكون منطق تشغيل البيانات أكثر وضوحًا وأكثر سلاسة ، كما أن التكامل مع حلول مزامنة البيانات من الطرف الثالث أكثر ملاءمة أيضًا.
نظام المكون
في التطبيقات الواسعة النطاق ، لتقسيم العمل وإعادة الاستخدام والصيانة ، نحتاج حتما إلى تجريد التطبيق في وحدات متعددة مستقلة نسبيًا. في نموذج تطوير أكثر تقليدية ، سنجعل فقط جزءًا من المكون عند النظر في تعدد الإرسال ؛ ولكن في الواقع ، يمكن اعتبار واجهة المستخدم التي تشبه التطبيق مكونة بالكامل من أشجار المكونات:
لذلك ، يتم استخدام المكونات كمفهوم أساسي في تصميم Vue.js. يمكن القول أن كل تطبيق vue.js يتم تطويره حول المكونات.
تسجيل مكون vue.js بسيط للغاية:
vue.component ('my-component' ، {// template template: '<div> {{msg}} {{privatemsg}} </fire>' ، // قبول المعلمات: {msg: string <br>} ، 'عنصر!' } }})بعد التسجيل ، يمكنك الاتصال بمكون طفل في قالب المكون الأصل كعنصر مخصص:
<my-bonent msg = "hello"> </my-homponent>
نتيجة تقديم:
<div> Hello Component! </viv>
يمكن فهم مكون Vue.js على أنه فئة ViewModel مع سلوك محدد مسبقًا. يمكن للمكون تحديد العديد من الخيارات ، ولكن أهم الخيارات هي ما يلي:
تنسيق مكون ملف واحد بناءً على أدوات البناء
توفر المكتبة الأساسية لـ Vue.js فقط واجهات برمجة التطبيقات الأساسية وليس لديها الكثير من القيود على كيفية تنظيم بنية الملف للتطبيق. ومع ذلك ، عند إنشاء تطبيقات كبيرة ، يوصى باستخدام مجموعة WebPack + Vue-Loader لجعل تطوير المكون أكثر كفاءة.
WebPack هي أداة بناء وحدة أمامية مفتوحة المصدر تم تطويرها بواسطة Tobias Koppers. تتمثل وظيفتها الأساسية في حزم ملفات JavaScript المتعددة المكتوبة بتنسيق الوحدة النمطية في ملف واحد ، ودعم كل من تنسيقات CommonJs و AMD. ولكن ما يجعل الأمر فريدًا هو أنه يوفر واجهة برمجة تطبيقات قوية لتحديد منطق المعالجة المسبقة لتنسيقات الملفات المختلفة ، مما يتيح لنا استخدام CSS والقوالب وحتى تنسيقات الملفات المخصصة كوحدات JavaScript. يمكن لـ WebPack أيضًا تنفيذ عدد كبير من الوظائف المتقدمة استنادًا إلى اللودر ، مثل التغليف التلقائي للتغليف والتحميل عند الطلب ، والوضع التلقائي لمراجع موارد الصور ، والقرار على BASE64 مضمّنًا على أساس حجم الصورة ، والاستبدال الساخن للوحدات النمطية أثناء التطوير ، وما إلى ذلك.
لقد قمت بتطوير البرنامج المساعد Vue-Loader استنادًا إلى واجهة برمجة تطبيقات WebPack Loader ، حتى نتمكن من كتابة مكونات VUE بتنسيق ملف واحد (*.Vue):
<Style> .my-component H2 {color: red ؛} </style> <template> <viv> <h2> مرحبًا من {msg}} </h2> <sho-component> </other-component> </div> </filement> <script> module.exports = {data: function () {return {msg: 'vue-loader'}} ، المكونات: {'others-component': othercomponent}} </script>في الوقت نفسه ، يمكنك أيضًا استخدام المعالجات المسبقة الأخرى في ملف *.vue ، ما عليك سوى تثبيت محمل WebPack المقابل:
<style lang = "stylus">. My-Component H2 Color Red </style> <template lang = "kade"> div.my-component h2 hello from {{msg}} </fulsplate> <script lang = "babel"> // استخدم babel to compile es2015export default {data () }}} </script>يدمج هذا التنسيق المكون العناصر الثلاثة لقالب المكون والأناقة والمنطق في نفس الملف ، وهو مناسب للتطوير وإعادة الاستخدام والصيانة. بالإضافة إلى ذلك ، تدعم Vue.js نفسها التحميل غير المتزامن للمكونات ، ويتم دمجها مع وظيفة التغليف الخاصة بـ WebPack ، ويمكنها بسهولة تنفيذ تحميل غير متزامن للمكونات عند الطلب.
ميزات أخرى
Vue.js لديه العديد من الميزات الأخرى التي تستحق الذكر:
قم بإنشاء مثيل VUE باستخدام VUE () جديد
يمكننا تهيئة صفحة HTML أولاً ، ثم نحتاج إلى تقديم ملف Vue's JS. هناك العديد من الطرق لتقديمها. يمكننا تقديم Vue's CDN في البرنامج النصي ، أو تنزيل Vue's Min.js على الموقع الرسمي ، أو تثبيت اعتماد VUE باستخدام NPM. للراحة ، يتم تقديم هذه المقالة باستخدام CDN.
<! doctype html> <html> <head> <title> تعلم من الصفر </title> </head> <body> <script src = "http://cdn.jsdelivr.net/vue/1.0.16/vue.js
عند تطويرك ، تأكد من أنك تستخدم إصدارات غير مضغوطة ، لأن الإصدارات غير المضغوطة ستوفر تحذيرات مفصلة مفيدة وستوفر لك الكثير من الوقت في كتابة التعليمات البرمجية الخاصة بك.
نكتب أولاً div في الجسم ، وننشئ مثيل Vue ، ثم ربط المثيل وال DIV.
عندما تقوم بإنشاء مثيل VUE جديد ، استخدم مُنشئ VUE () وأشر إلى نقطة التثبيت في المثيل الخاص بك. هذه نقطة الجبل هي حدود مثيل VUE الذي تريد تقسيمه. نقطة جبل وحدود المثيل تتوافق واحد تلو الآخر. يمكنك فقط التعامل مع المعاملات داخل حدود المثيل عند نقطة التثبيت ، ولكن ليس المعاملات خارج حدود المثيل عند نقطة التثبيت.
المعلمة لإعداد نقطة التحميل في مثيل VUE هي "EL" ، ويمكن تعريف قيمة EL بواسطة عنصر DOM.
<! doctype html> <html> <head> <title> تعلم من الصفر </title> </head> <body> <div id = "vueinstance" <script> // إنشاء مثيل VUE جديد وقم بتعيين Mount Point var v = new Vue ({el: '#vueinstance'}) ؛ </script> </body> </html>كما ترون أعلاه ، يقوم Vue () الجديد بإنشاء مثيل جديد ثم تحديد عنصر DOM كنقطة تثبيت على المثيل. عند تحديد نقطة التثبيت ، نستخدم معرف محدد CSS لتحديده. يمكن أيضًا تعريف الاسم الذي تم تأسيسه بنفسه للمكالمة اللاحقة.
باستخدام نموذج V لربط البيانات ثنائية الاتجاه
يمكننا استخدام نموذج V لربط مربع الإدخال ، حتى نتمكن من استخدام ديناميكي للحصول على قيمة كائن البيانات. يمكنك التفكير في نموذج V كخاصية محددة ، تمامًا مثل سمة عنصر HTML. يمكن استخدام ربط البيانات ثنائية الاتجاه هنا في العديد من عناصر النماذج ، مثل الإدخال والنص و SELECT.
يستخدم Vue أمر V-Model لربط البيانات ، وهذه البيانات هي البيانات التي نأمل أن يتم تحديثها من خلال عمليات إدخال المستخدم.
على سبيل المثال ، في مثالنا أدناه ، نريد ربط اسم البيانات على علامة الإدخال ، ونحن بحاجة إلى تنفيذ الإعلان في كائن البيانات في مثيل VUE.
<div id = "vueinstance"> أدخل اسمك: <إدخال type = "text" v-model = "name"
<script src = "http://cdn.jsdelivr.net/vue/1.0.16/vue.js"> </script> // بعد هذا السطر سيتم حذف <script> var v = new Vue (
بغض النظر عن عدد المرات التي يدخل فيها المستخدم ، سيتم تحديث هذا الاسم تلقائيًا. أيضًا ، إذا تم تغيير قيمة الاسم ، فسيتم أيضًا تعديل القيم في الأماكن الأخرى التي يتم فيها تعيين الاسم.
سبب تعديل متزامن لمربع الإدخال هذا ورسم الخرائط هو استخدام تعليمات النموذج V للسماح بربط البيانات من خلال دفق البيانات الأساسي ثم تعديلها مباشرة. هذا هو مفهوم الربط ثنائي الاتجاه للبيانات.
لإثبات هذا المفهوم ، يمكننا استخدام بيانات $ لطباعة تعيين البيانات التي يجب رؤيتها.
<div id = "vueinstance"> أدخل اسمك: <input type = "text" v-model = "name"> <p> {{$ data | json}} </p> //#1 <p> {{name}} </p> //#2 </viv> <script> var v = new vue ({el: '#vueinstance' ، البيانات: {name: '_appian'}}) ؛ </script>إنه 1:
بيانات $ هي كائن البيانات الذي لوحظ بواسطة مثيل VUE. النوع الأساسي هو كائن ، بحيث يمكن تحويله إلى JSON. يمكن استبدالها بكائن جديد. الوكلاء على سبيل المثال خصائص كائن البيانات الخاص بها.
{{}} ، يدور مع اثنين من الأقواس المجعد. القيمة المدرجة هنا هي القيمة التي تتغير في الوقت الحقيقي بمقدار $.
| JSON ، مجرد طريقة أكثر سهولة لعرض البيانات. يمكن اعتباره أيضًا مرشحًا ، تمامًا مثل تأثير json.stringify ().
البند 2:
{{name}} يعني إدراج متغيرات البيانات مباشرة في تعبير الاستيفاء واثنين من الأقواس المجعدة لتعيين قيمة الاسم مباشرة.
Vue سهل للغاية لأداء الربط ثنائي الاتجاه للبيانات. يتطلب فقط تعليمات طراز V ، دون استخدام JS أو JQ للتحكم في البيانات. أعتقد أنه يمكنك توضيح المنطق من الأمثلة أعلاه.
استخدم V-ON لربط الحدث
يستخدم Vue تعليمات V-ON للاستماع إلى الأحداث وتوزيع الأحداث. يمكنك إنشاء طريقة لربط حدث الاستماع في مثيل VUE ، ويمكنك إنشاء طريقة لإرسال حدث نقرة.
في المثال التالي ، سنقوم بإنشاء طريقة Say ، والتي ترتبط بالزر. تأثير النقر هو الظهور مربع ترحيب باسم المستخدم. لتعيين هذه الطريقة إلى الزر ، نحتاج إلى استخدام V-On: انقر لربط الحدث.
<div id = "vueinstance"> أدخل اسمك: <input type = "text" v-model = "name"> <button v-on: click = "say"
<script> var v = new vue ({el: '#vueinstance' ، البيانات: {name: '_appian'} ، الأساليب: {say: function () {Alert ('مرحبًا'بالطبع ، لا يمكنك فقط ربط أحداث النقر فوق النقر ، ولكن يمكنك أيضًا ربط أحداث الماوس الأخرى وأحداث إدخال لوحة المفاتيح وأنواع أحداث JS الأخرى. على سبيل المثال ، v-on: mouseover ، v-on: keydown ، v-on: submit ، v-on: keypress ، v-on: keyup.13 ، etc. ، أو بعض الأحداث المخصصة الأخرى.
أثناء عملية التطوير ، يمكنك استخدام الربط الحدث بشكل متكرر. من المزعج بعض الشيء أن تكتب V-ON ، لذلك في المثال أعلاه ، هناك طريقتان للكتابة ، رقم 2 هو اختصار رقم 1. باستخدام @ بدلاً من V-ON ، لن أقول الكثير هنا.
استخدم V-IF أو V-Show لإصدار أحكام مشروطة
إذا كنا نريد أن يرى المستخدم نافذة الترحيب المنبثقة بعد تسجيل الدخول ، وإذا لم يتم تسجيل الدخول ، فسنقدم لها واجهة تسجيل الدخول. ستوفر لنا VUE تعليمات V-IF و V-Show للتحكم في محتوى العرض ضمن حالات تسجيل الدخول المختلفة.
باستخدام المثال السابق ، يمكننا استخدام قيمة loginstatus للتحكم في ما إذا كان سيتم تسجيل الدخول. إذا كان هذا صحيحًا ، فسيتم عرض مربع الإدخال والزر حتى يتمكنوا من رؤية نافذة الترحيب المنبثقة. ومع ذلك ، إذا كان هذا خطأ (أي أنه لم يتم تسجيل الدخول) ، فيمكنك فقط رؤية مربع الإدخال وزر التقديم لإدخال رقم الحساب وكلمة المرور (لا توجد مصادقة في الوقت الحالي ، سيتم تغيير حالة تسجيل الدخول فقط).
<div id = "vueinstance"> // القسم المعروض عندما يكون loginstatus صحيحًا <القسم v-if = "loginstatus"> عندما يكون loginStatus خطأ <القسم v-if = "! loginStatus"> تسجيل الدخول: <input type = "text"
<script> var v = new vue ({el: '#vueinstance' ، البيانات: {name: '_appian' ، loginstatus: false} ، الأساليب: {say: function () {alert ('welcome' + this.name) ؛} ، switchloginstatus: function () }) ؛ </script>إن تنفيذ هذا هو مثيل V. هذا الإشارة هو سؤال يجب أن يفهمه نفسه ، لذلك لن أتحدث عنه هنا.
في المثال أعلاه ، طالما يتم استبدال V-if بـ V-Show ، يمكن الحصول على نفس التأثير. كل من V-IF و V-Show Support V-Else ، ولكن يجب أن يحتوي العنصر الأخوة السابق للعلامة التي تربط الأمر V-ELSE على V-IF أو V-Show.
في المثال أعلاه ، فقط النقر فوق الزر "تسجيل الدخول" أو "تسجيل الدخول" سيؤدي إلى تشغيل طريقة SwitchLoginStatus. طالما تم تشغيل هذه الطريقة ، ستتغير حالة loginstatus (التبديل بشكل صحيح وكاذب) ، وبالتالي تغيير تغيير حالة الحكم لـ V-IF في HTML. استنادًا إلى الحالة المنطقية الحالية لـ LoginStatus ، فإن القسم المعروض هو قسم في حالات مختلفة.
ما هو الفرق بين V-Show و V-If؟
عند تبديل كتل V-IF ، يكون لدى VUE عملية تجميع/إلغاء التثبيت المحلية ، لأن القوالب في V-IF قد تتضمن أيضًا ربط البيانات أو الفرعية. V-If هو عرض مشروط حقيقي لأنه يضمن أن الكتل المشروطة تدمر بشكل صحيح وإعادة بناء مستمعي الأحداث والفرع داخل الكتلة الشرطية أثناء التبديل.
V -If كسول أيضًا: إذا كانت الحالة خاطئة أثناء التقديم الأولي ، فلا يتم إجراء أي شيء - يبدأ التجميع المحلي عندما تصبح الحالة صحيحة لأول مرة (سيتم تخزين التجميع).
على النقيض من ذلك ، يعد V -Show أبسط بكثير - يتم دائمًا تجميع العناصر والحفاظ عليها ، فقط تم تبديلها بناءً على CSS.
بشكل عام ، لدى V-IF استهلاك التبديل أعلى ، ويتمتع V-Show باستهلاك عرض أولي أعلى. لذلك ، من الأفضل تبديل V-Show بشكل متكرر ، ومن الأفضل تغيير V-If إذا لم تكن الظروف مرتفعة جدًا في وقت التشغيل.
قد لا يكون هذا الاختلاف مهمًا لتطويرك الحالي ، لكن لا تزال بحاجة إلى الانتباه والانتباه ، لأنه عندما يصبح تطوير مشروعك أكبر ، سيصبح هذا مهمًا.
استخدم قائمة V-For إلى الإخراج
إذا كنت رجل أعمال يدير منصة للتجارة الإلكترونية ، فيجب أن يكون لديك العديد من الصفحات التي تحتاج إلى تقديم إخراج قائمة المنتج. يتيح التوجيه V-for حلق كائن صفيفنا ، والذي يُعرف باسم "حلقة كل عنصر في Arrayobj" في طريق "العنصر في Arrayobj".
في المثال التالي ، سوف نستخدم التعليمات V-For لقائمة المنتجات. سيكون كل منتج في LI ، حيث يتم إخراج الاسم والسعر ونوع المنتج للمنتج.
<div id = "vueinstance"> <ul> <li v -for = "el in products"> {{el.name}} - ￥ {{el. السعر}} - {{el. الفئة}} </li> </ul> </viv> <script> var v = new Vue ({el: '#vueinstance' ، البيانات: {Products: [{name: 'microphone' ، السعر: 25 ، الفئة: 'electronics'} ، {name: 'case case' ، price: 15 ، 'Accessories'} ، السعر: 70 ، الفئة: 'Electronics'} ، {name: 'mouse' ، السعر: 40 ، الفئة: 'Electronics'} ، {name: 'famphones' ، السعر: 20 ، الفئة: 'Electronics'} ، {name: 'monitor' ، price: 'Electronics'}]}}}})بالطبع ، يمكن تعريف كائن الصفيف في البيانات دون التعريف أعلاه. يمكننا استيرادها من قاعدة البيانات أو استخدام طلب AJAX للحصول عليه. هذا فقط لإظهار v-for.
في بعض الأحيان ، قد نحتاج إلى الحصول على النطاق المقابل للمنتج في كائن الصفيف. يمكننا الحصول عليه مع $ index.
//#1 <li v -for = "el in products"> {{$ index}} - {{el.name}} - ￥ {{el. السعر}} - {{el. الفئة}} </li> //#2 <li v -for = "(index ، el) in products"> {{index}} - {{el.name}} - ￥ {{el. السعر}} - {{el. الفئة}} </li>خصائص محسوبة
في سيناريو التطبيق لحساب السمات ، سيتم استخدامه عندما تكون هناك قيمة متغيرة يجب حسابها بواسطة متغيرات أخرى.
على سبيل المثال ، إذا قام المستخدم بإدخال الرقم X في مربع الإدخال ، فسيعود تلقائيًا إلى المستخدم X² من الرقم. تحتاج إلى ربط بيانات مربع الإدخال ، ثم عند تعديل البيانات ، ستحسب مربعها على الفور.
<div id = "vueinstance"> أدخل الرقم: <إدخال type = "text" v-model = "value"> <p> نتيجة حساب: {{square}} </p> </viv> <script> var v = new vue ({el: '#vueinstance' ، البيانات: {value: 1} ، محسوبة: {square: function () {return this.value * this.value ؛}}}) ؛ </script>حساب قيم تعريف السمة من خلال تحديد سلسلة من الوظائف ، تمامًا مثلما قمنا بتعريف الكائنات الأساليب من قبل. على سبيل المثال ، يتم استخدام الطريقة المربعة لحساب المتغير "مربع" ، وقيمة إرجاع طريقته هي ناتج اثنين من هذا.
بعد ذلك ، يمكننا استخدام محسوبة لتقديم مثال أكثر تعقيدًا. سيأخذ النظام بشكل عشوائي رقمًا في غضون 1 ~ 10. يمكن للمستخدم إدخال رقم عشوائيًا خلال 1 ~ 10 في مربع الإدخال. إذا حدث إدخال المستخدم لتطابق الرقم العشوائي للنظام ، فسوف تنجح اللعبة ، وإلا فستفشل.
<div id = "vueinstance"> أدخل الرقم داخل 1 ~ 10: <إدخال type = "text" v-model = "value"> <p>
<script> var v = new vue ({el: '#vueinstance' ، البيانات: {value: null ، randnum: 5 // الرقم العشوائي الأول هو 5} ، الطرق: {getRandnum: function (min ، max) {return math.flo (math.random () * (max - min + 1)). (this.value this.randnum)PostScript
حتى الآن ، تمكنت من إتقان الاستخدام الأساسي لـ Vue ، أحد أبسط الأطر وأجمل الأطر في العالم. إن بنائها له أفكار التصميم الكاملة الخاصة به وأصبح أكثر وأكثر شعبية. هذا الإطار صغير وخفيف بما يكفي لتقديم تجربة مستخدم أكثر سلاسة في تطورك وتحسين كفاءة التطوير بشكل فعال. لقد أعطيت سلسلة من الأمثلة أعلاه ، هل أتقنتهم جميعًا؟