يمكن أن تجعل الأطر الأمامية مثل AngularJS مناسبة للغاية بالنسبة لنا لتطوير تطبيقات قوية من صفحة واحدة. ومع ذلك ، في بعض الأحيان تكون الأطر الكبيرة مثل Angular كبيرة جدًا بالنسبة لمشاريعنا وقد لا يتم استخدام العديد من الوظائف. في هذا الوقت ، نحتاج إلى تقييم الحاجة إلى استخدامه. إذا كنا بحاجة فقط إلى إضافة بعض الوظائف إلى صفحة ويب بسيطة ، فإن استخدام Angular سيكون مزعجًا للغاية ، وسيبدو التثبيت الضروري ، والتكوين ، وتوجيه الكتابة ، وتصميم وحدات التحكم ، وما إلى ذلك.
في هذا الوقت ، نحتاج إلى حل أكثر خفيفة الوزن. vue.js هو خيار جيد. Vue.js هو إطار يركز على نماذج العرض (ViewModal). نموذج العرض هو جسر لاتصال البيانات بين واجهة المستخدم ونموذج البيانات ، مع إدراك ربط البيانات ثنائية الاتجاه بين واجهة المستخدم ونموذج البيانات. إنه ليس "إطارًا كاملاً" ، ولكنه إطار عمل بسيط ومرن يركز على طبقات العرض.
بعد ذلك ، سوف نستخدم تطبيق مذكرة بسيطة للتعرف على أساسيات Vue.js. من أجل جعل الجميع يولون المزيد من الاهتمام لـ Vue.js نفسه ، قمنا بتصميم تطبيق عميل بناءً على البيانات المحلية. في نهاية هذه المقالة ، سوف نذكر التفاعل بين Vue.js والخلفية.
تحضير
دعنا نحصل على vue.js و bootstrap من خلال NPM أولاً (ليس ضروريًا ، إليك تطبيق مكتبة أسلوبها) ، وأدخل ما يلي في سطر الأوامر:
NPM تثبيت Vue Bootstrap
ثم قم بإنشاء ملفين:
Touch Index.html app.js
أضف أيضًا المحتوى التالي إلى index.html
<!-index.html-> <! doctype html> <html> <head> <meta charset = "utf-8" شريط الملاحة-> <v> <iv> <a> <i> </i> vue memo </a> </viv> </vic> <!-الأجزاء الرئيسية من التطبيق-> <div id = "events"> <!-إضافة نموذج-> <div> <div> <h3> أضف حدثًا </h3 <viv> </viv> </viv> </viv> <!-JS-> <script src = "node_modules/vue/dist/vue.js"> </script> <script src = "app.js"> </script> </body> </html>
علامة <viv> مع "أحداث" المعرف هي الجزء الأساسي من هذا التطبيق. بعد ذلك سنقوم بإنشاء مثيل VUE لهذا الجزء الأساسي.
إنشاء مثيل VUE
أولاً ، دعنا نقوم بإنشاء مثيل VUE وضبط سمة "EL" لهذه المثيل على "#events". وبهذه الطريقة ، سيتم ربط المثيل بحاوية مع "أحداث" المعرف.
// app.jsnew vue ({// و container binding el with "أحداث": '#events'}) ؛في هذه المرحلة ، ستصبح وظيفة Vue سارية المفعول في أحداث Div#. قبل إضافة محتوى آخر ، دعنا نضيف بعض الخصائص اللازمة إلى مثيل Vue الذي تم إنشاؤه:
// app.js new vue ({// حاوية ربط EL مع معرف "الأحداث": '#events' ، // في سمة البيانات ، نقوم بتحديد البيانات التي تتفاعل مع بيانات صفحة الويب: {} ، // عندما يتم استخدام الأساليب في التطبيق: {}}) ؛سمة البيانات هي كائن يعلن جميع البيانات في نموذج عرض تطبيقنا.
السمة الجاهزة هي وظيفة سيتم تنفيذها عند تحميل التطبيق. عادة ، يتم استدعاء طرق أخرى هنا لتهيئة البيانات المطلوبة من قبل التطبيق.
تحدد طريقة الطرق الطرق التي يجب استخدامها في هذا التطبيق
أضف محتوى إلى النموذج
نحتاج إلى إدخال تفاصيل المذكرة في النموذج. استخدمنا محدد الوقت الأصلي لـ HTML5 لتعيين وقت محتوى المذكرة. (لاحظ أن هذه الوظيفة لا تنطبق في متصفح Firefox ، يوصى باستخدام Chrome أو Safari)
<div> <input placeholder = "event name" v-model = "event.name"> </viv> <viv> <textarea placeholder = "event description" v-model = "event.description"> </sevidea> </viv> <div> <input type = "date" plationholder = "v-model =" event.date @click = "addevent"> إرسال </button> </viv>
أضفنا توجيه "V-Model" إلى علامة الإدخال وعلامة TextArea. على غرار Angular "NG-Model" ، تحدد قيمة نموذج V هذه البيانات المرتبطة بهذه العلامة في نموذج العرض. هذه البيانات ليست متاحة فقط هنا ، ولكن أيضًا في مكان آخر في الحاوية.
أضفنا تعليمات "الانكماش" إلى زر الإرسال. يتم اختصار هذه التعليمات ويجب أن يكون الاسم الكامل "V-On: Click". تتمثل وظيفتها في ربط مستمع لنقر فوق أحداث هذا الزر. عند تشغيل حدث النقر ، سيتم تنفيذ وظيفة المستمع في تعليمات الانكماش. في هذا المثال ، نربط دالة addevent بالزر إرسال. يمكننا أيضًا ربط الأحداث الأخرى ، وقاعدة الكتابة هي event name = "وظيفة الاستماع". إذا كنا نريد ربط وظيفة المستمع F بحدث KeyDown ، فيمكننا كتابة هذا: @KeyDown = "F" أو V-On: KeyDown = "F"
في هذه المرحلة ، إذا قمت بمعاينة صفحة الويب ، فسترى المحتوى التالي:
إضافة البيانات
لقد ذكرنا طريقة addevent من قبل ، والتي يتم استخدامها لإضافة بيانات مذكرة جديدة.
الآن سنحدد هذه الطريقة وإضافة بعض البيانات اللازمة
// app.js ... البيانات: {الحدث: {name: '' ، الوصف: '، التاريخ:' '} ، الأحداث: []} ، // سيتم تنفيذ الوظيفة في السمة الجاهزة عند تحميل التطبيق () تحديد طريقة للحصول على بيانات البيانات: function () {var events = [{{id: 1 ، الاسم: "اجتمع" ، الوصف: "9 صباحًا في غرفة مؤتمرات الطابق الحادي والعشرين" ، التاريخ: "2015-09-10 '} ، {id: 2 ، الاسم:" التسوق "، الوصف:" شراء بنك القوة "، التاريخ:" 2015-10-02' Vue '، التاريخ: "2016-03-11'}] ؛ // $ SET هي طريقة توفرها VUE لإدراج البيانات في صفيف. سيتم تحديث العرض عند تنفيذ هذا. $ set ("الأحداث" ، الأحداث) ؛ } ، // إدراج البيانات في مجموعة من الأحداث addEvent: function () {if (this.event.name) {this.events.push (this.event) ؛ this.event = {name: '' ، الوصف: '' ، التاريخ: ''} ؛ }}}في خاصية البيانات ، نحدد كائن حدث ومصفوفة حدث ، تمثل الأحداث ومجموعة الأحداث على التوالي. سيتم تحميل هذه البيانات عند تحميل التطبيق. إذا لم نقم بتعريف كائنات الأحداث مسبقًا ، على الرغم من أنه يمكن تنفيذ الوظائف اللاحقة ، فسيقوم المتصفح بالإبلاغ عن هذا الخطأ:
أنها تعني أنه إذا لم يتم الإعلان عن البيانات التي تستخدمها في التطبيق الخاص بك في سمة البيانات ، فسيتأثر أداء التطبيق. لذلك ، من الأفضل إعلان البيانات التي نستخدمها في تطبيقنا في سمة البيانات.
في الخاصية الجاهزة ، نحدد طريقة Fetchevents للحصول على البيانات. في هذه الطريقة ، نضيف بيانات إلى العرض من خلال طريقة تعيين VM. $. تشبه وظيفتها طريقة الدفع لصفيف ، كما أنها تعمل على تحديث العرض. يجب أن تكون معلمة هذه الطريقة عبارة عن مفاتيح مفاتيح ، تمثل البيانات الواردة. للاستخدام المحدد ، يرجى الرجوع إلى هنا.
أخيرًا ، في خاصية الطريقة ، نحدد طريقة Addevents للتحقق مما إذا كانت قيمة event.name موجودة ، وإذا كان الأمر كذلك ، فأضف حدثًا إلى صفيف الأحداث. بعد ذلك ، سيتم مسح البيانات في كائن الحدث ، وسيتم مسح النموذج أيضًا.
إضافة قائمة العناصر
نستخدم قائمة بالأشياء لسرد كل الأشياء:
<viv> <a href = "#" v-for = "event in events"> <h4> <i> </i> {{event.name}} </h4> <h5> <i v-if = "event.date"> </i> {{event.date}} </h5> سترنستخدم توجيه V-For لتوجيه عناصر عرض الدُفعات مع نفس بنية DOM ومحتوى العرض المختلفة. في هذا المثال ، نضيف توجيه V-for إلى علامة ، والذي سيجتاز البيانات في صفيف الأحداث ، ونمثل كل بيانات اجتياز مع الحدث. ستطبق العناصر ذات التوجيه v-for المضافة نتائج كل اجتياز في عناصر الأطفال وعرضها مرارًا وتكرارًا. قد يكون الأصدقاء الذين استخدموا محرك القالب أو React أو Angular أكثر دراية بالاستخدام المماثل. في مثالنا ، سيتم عرض محتويات علامات H4 و H5 و P و Button مرارًا وتكرارًا ، وعدد الحلقات هو طول صفيف الأحداث. يطلق على الأطفال الذين يعانون من العناصر التوجيهية V مقابل قوالب ، ويتم لف البيانات الموجودة في القالب في أقواس مزدوجة. في هذا المثال ، فإن البيانات هي الخصائص المختلفة لكائن الحدث (الاسم والتاريخ والوصف).
ستلاحظ أن بعض عناصر القالب قد أضافت توجيهات V-if. تعمل هذه التعليمات على أنها عرض مشروط. قيمة v-if هي حالة الحكم. إذا كانت النتيجة صحيحة ، فسيتم تقديم العنصر ، وإلا فلن يتم تقديمه. بالإضافة إلى ذلك ، أضفنا تعليمة نقرة إلى عنصر الزر ، ودعا طريقة الحذف لحذف الأمر (سيتم تقديم التعريف المحدد أدناه). يمثل مؤشر المعلمة $ عدد العنصر الذي تم اجتيازه حاليًا في الصفيف.
قم بتحديث الصفحة وسوف نجد أنه سيتم سرد جميع العناصر على الجانب الأيمن من الصفحة. بعد إدخال المحتوى في النموذج على اليسار والنقر فوق الزر "إرسال" ، سيتم إضافة عناصر جديدة تلقائيًا إلى القائمة على اليمين.
دعونا نحدد طريقة الحذف
deleteevent: function (index) {if ("تأكيد (" هل أنت متأكد من أنك تريد حذف هذا الحدث؟ ")) {// $ remove هي طريقة راحة vue مماثلة لصق this.events. $ remove (index) ؛ }}في هذه الطريقة ، نسأل المستخدم أولاً ما إذا كان متأكدًا من حذف العنصر. إذا قمت بالنقر فوق "موافق" ، فسيتم حذف العنصر من DOM من خلال طريقة إزالة $ المحددة مسبقًا.
التفاعل مع الخلفية
مثل Angular ، يتم فصل الواجهة الأمامية والخلفية Vue ، ويتم الانتهاء من التفاعل مع الواجهة الخلفية من خلال طلبات HTTP. هناك العديد من الأدوات التفاعلية ، يمكنك استخدام $ المألوف. ajax أو كائن XMLHTTPrequest الأصلي أو مكتبات الطرف الثالث ، أو محاولة Vue-Resource.
فيما يلي مقدمة موجزة عن Vue-Resource. Vue-Resource هو مكون إضافي مصمم خصيصًا لـ VUE لإرسال طلبات HTTP. وهو يدعم قوالب الوعد وقوالب URI ، ويوفر أيضًا أدوات مثل Interceptor. دعونا نلقي نظرة على مثالنا أعلاه. نغير عملية الاستحواذ على الأمور إلى الحصول عليها من الخادم. في هذا الوقت ، نحتاج إلى تعديل طريقة Fetchevents: (لنفترض أن الواجهة الخلفية توفر الخدمات المتعلقة بالمسائل من خلال عنوان URL لـ API/الأحداث ، نفس الشيء أدناه)
fetchevents: function () {this. $ http.get ('api/events').إذا نجحت عملية الاستحواذ ، فسيتم تنفيذ بيان الوظيفة ، ولا تزال طريقة SET $ تسمى ، ولكن يتم استرداد أحداث معلمة الإدخال من الخادم.
إذا قمنا بتعديل الإضافة ، نحتاج إلى إرسال طلب نشر:
addEvent: function () {this. $ http.post ('API/events' ، this.event) .Then (function (response) {this.events.push (this.event) ؛ console.log ("event added!") ؛}).وبالمثل ، يمكن تعديل طريقة حذف المسائل على النحو التالي:
deleteevent: function (index) {this. $ http.delete ('api/events/' + event.id) .Then (function (response) {this.events. $ remove (index) ؛}) .catch (function (error) {console.log (error) ؛}) ؛}}هنا نمرر معرف المسألة إلى الخادم لإخبار الخادم بحذف معرف المسألة لتسهيل الخادم لتحديد المسألة التي يجب حذفها.
خاتمة
سيجد الأصدقاء الذين استخدموا Angular و React ذلك Vue وكلهم متشابهون: تعليمات مماثلة للمعالجة الزاوية المعيارية مماثلة للتفاعل. ومع ذلك ، فإن Vue يختلف بوضوح عنهم. إنه أخف وزنا وسهل الاستخدام. لا تحتاج إلى إجراء تكوينات معقدة مثل Angular ، ولا تحتاج إلى تعلم مفاهيم جديدة مثل DOM Virtual DOM و JSX الجديد وما إلى ذلك مثل React. لذلك ، إذا لم يكن تطبيقك كبيرًا جدًا ، فقد تفكر أيضًا في استخدام VUE كإطار تطبيق الخاص بك.
ما سبق هو البرنامج التعليمي السريع لـ Vue.js الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!