मूल लेख: http://blog.kueiapp.com/programming-tw/vuejs-mvvm-VueJS-MVVM-Model और -Pure-HTML5-Comparison/

Vue.js और नेटिव HTML5 के बीच अंतर

वेब फ्रंट-एंड सिस्टम बनाने के लिए कई तरीके और ढांचे हैं, जैसे कि रिएक्ट, एंगुलरजेएस, वीयू.जेएस, आदि। मूल HTML5 और जावास्क्रिप्ट का उपयोग करके एक सिस्टम बनाना बिल्कुल संभव है, लेकिन आमतौर पर एक अच्छे ढांचे का उपयोग करके सिस्टम को संरचना और सुरक्षा के मामले में बेहतर डिजाइन पैटर्न के साथ लागू किया जा सकता है।

एक टूल या आर्किटेक्चर आमतौर पर इसलिए बनाया जाता है क्योंकि डेवलपर्स को कुछ कठिनाइयों का सामना करना पड़ता है। उदाहरण के लिए, jQuery का आविष्कार उन ब्राउज़रों पर जावास्क्रिप्ट का उपयोग करने के लिए किया गया था जो विभिन्न मानकों का समर्थन करते हैं, और यह CSS चयनकर्ताओं का उपयोग करके DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) को नियंत्रित करने वाली पहली लाइब्रेरी थी। HTML5 क्वेरी चयनकर्ता HTML के लिए DOM में हेरफेर करना आसान बनाने के लिए इस शानदार सुविधा की नकल करता है।

आपको VueJS की आवश्यकता क्यों है?

HTML ट्री से डेटा प्राप्त करने के लिए DOM तक पहुंचने के लिए शुद्ध HTML5 जावास्क्रिप्ट का उपयोग करते समय, बहुत सारे काम करने की आवश्यकता होती है, जैसे कि तत्वों को लक्षित करना, यूआई पर उपयोगकर्ता इंटरैक्शन का पता लगाने के लिए श्रोताओं को जोड़ना, या जब लक्ष्य कार्रवाई को कैप्चर किया जाता है, पुनर्प्राप्त करते समय डेटा लौटाना वास्तव में बहुत संसाधन गहन होता है।

  
    
Checkbox with pure HTML5 syntax
    
      
      checkbox 1
    
    
      
      checkbox 2
    
  

मूल HTML5 जावास्क्रिप्ट (या 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 और -Pure-HTML5-Comparison/