Originalartikel: http://blog.kueiapp.com/programming-tw/vuejs-mvvm-VueJS-MVVM-Model and -Pure-HTML5-Comparison/

Der Unterschied zwischen Vue.js und Native HTML5

Es gibt viele Methoden und Frameworks zum Erstellen von Web-Front-End-Systemen, wie React, AngularJS, Vue.js usw. Es ist durchaus möglich, ein System mit nativem HTML5 und JavaScript zu erstellen, aber normalerweise kann die Verwendung eines guten Frameworks das System mit besseren Designmustern in Bezug auf Struktur und Sicherheit implementieren.

Ein Tool oder eine Architektur wird normalerweise erstellt, weil Entwickler auf bestimmte Schwierigkeiten gestoßen sind. Beispielsweise wurde jQuery erfunden, um JavaScript in Browsern zu verwenden, die unterschiedliche Standards unterstützen, und es war die erste Bibliothek, die das DOM (Document Object Modal) mithilfe von CSS-Selektoren steuerte. Der HTML5-QuerySelector repliziert diese coole Funktion, um HTML die Manipulation des DOM zu erleichtern.

Warum Sie VueJS brauchen

Wenn Sie reines HTML5-JavaScript verwenden, um auf das DOM zuzugreifen und Daten aus dem HTML-Baum abzurufen, muss viel Arbeit geleistet werden, z. B. das Targeting von Elementen, das Hinzufügen von Listenern zum Erkennen von Benutzerinteraktionen auf der Benutzeroberfläche oder wann Zielaktion wird erfasst. Die Rückgabe von Daten beim Abrufen ist tatsächlich sehr ressourcenintensiv.

  
    
Checkbox with pure HTML5 syntax
    
      
      checkbox 1
    
    
      
      checkbox 2
    
  

Im Vergleich zu nativem HTML5-JavaScript (oder jQuery), das das DOM direkt betreibt, verfügt Vue.js über ein eigenes MVVM-Modell, das das DOM ändern und gleichzeitig ein neues Datenmodell erhalten kann. Mit anderen Worten: Wir können uns auf die Datenstruktur konzentrieren, anstatt unser eigenes Modell zu entwerfen, um das DOM direkt zu manipulieren.

Beide Ansätze eignen sich für unterschiedliche Situationen, aber Vue.js bietet tatsächlich einen einfacheren Weg zum Aufbau eines Web-Frontends.

Verwendung von Vue.js

      
      
        check 1
        
      
        check 2
        

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

Beispiel

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

Originalartikel: http://blog.kueiapp.com/programming-tw/vuejs-mvvm-VueJS-MVVM-Model and -Pure-HTML5-Comparison/