المقال الأصلي: http://blog.kueiapp.com/programming-tw/vuejs-mvvm-VueJS-MVVM-Model and -Pure-HTML5-Comparison/

الفرق بين Vue.js وHTML5 الأصلي

هناك العديد من الأساليب والأطر لبناء أنظمة الواجهة الأمامية للويب، مثل React وAngularJS وVue.js وما إلى ذلك. من الممكن تمامًا إنشاء نظام باستخدام HTML5 وJavaScript الأصليين، ولكن عادةً ما يؤدي استخدام إطار عمل جيد إلى تنفيذ النظام بأنماط تصميم أفضل من حيث البنية والأمان.

عادةً ما يتم إنشاء أداة أو بنية لأن المطورين واجهوا صعوبات معينة. على سبيل المثال، تم اختراع jQuery لاستخدام JavaScript على المتصفحات التي تدعم معايير مختلفة، وكانت أول مكتبة تتحكم في DOM (Document Object Modal) باستخدام محددات CSS. يقوم HTML5 querySelector بتكرار هذه الميزة الرائعة ليسهل على HTML التعامل مع DOM.

لماذا تحتاج VueJS

عند استخدام Pure HTML5 JavaScript للوصول إلى DOM للحصول على البيانات من شجرة HTML، هناك الكثير من العمل الذي يجب القيام به، مثل استهداف العناصر، أو إضافة المستمعين لاكتشاف تفاعلات المستخدم على واجهة المستخدم، أو عندما يتم التقاط الإجراء المستهدف. إن إرجاع البيانات عند استردادها يتطلب في الواقع الكثير من الموارد.

  
    
Checkbox with pure HTML5 syntax
    
      
      checkbox 1
    
    
      
      checkbox 2
    
  

بالمقارنة مع HTML5 JavaScript الأصلي (أو jQuery) الذي يقوم بتشغيل DOM مباشرة، فإن Vue.js لديه نموذج MVVM خاص به يمكنه تعديل DOM أثناء الحصول على نموذج بيانات جديد. بمعنى آخر، يمكننا التركيز على بنية البيانات بدلاً من تصميم نموذجنا الخاص للتعامل مباشرة مع DOM.

كلا الطريقتين مناسبتان لمواقف مختلفة، لكن Vue.js يوفر في الواقع مسارًا أسهل لبناء واجهة الويب الأمامية.

باستخدام Vue.js

      
      
        check 1
        
      
        check 2
        

export default Vue.extend({
  data: () => ({
    checkboxList: [],
  }),
});

مثال

https://github.com/kueiapp/vue-typescript-tutorial/blob/main/src/App.vue

المقال الأصلي: http://blog.kueiapp.com/programming-tw/vuejs-mvvm-VueJS-MVVM-Model and -Pure-HTML5-Comparison/