Heim > Artikel > Web-Frontend > VueJS MVVM-Modell im Vergleich zu Pure HTML

VueJS MVVM-Modell im Vergleich zu Pure HTML

王林Original: 2024-08-21 10:33:361170Durchsuche

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-Frontend-Systemen, wie z. B. 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.

<html>
  <body>
    <h1>Checkbox with pure HTML5 syntax</h1>
    <label>
      <input type="checkbox" name="group1" value="check1" />
      checkbox 1
    </label>
    <label>
      <input type="checkbox" name="group1" value="check2" />
      checkbox 2
    </label>
  </body>
</html>
<script>
window.onload = ()=>{
  const group1: NodeListOf<HTMLInputElement> | undefined =
      document.querySelectorAll("input[name=group1]");
    if (!group1) return;
    group1.forEach((checkbox) => {
      checkbox.addEventListener("change", (e: Event) => {
        if (!e.target) return;
        const targetValue = (e.target as HTMLInputElement).value.toString();
        const checked = (e.target as HTMLInputElement).checked;
        if (!checked) {
          this.selected = this.selected.filter(
            (select) => select !== targetValue
          );
        } else {
          this.selected = [...this.selected, targetValue];
        }
      });
  });
});

VueJS MVVM 模型與 Pure HTML比較

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

<div>      
      <label>
        check 1
        <input type="checkbox" v-model="checkboxList" value="1" />
      </label>
      <label>
        check 2
        <input type="checkbox" v-model="checkboxList" value="2" />
      </label>
</div>
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/

Das obige ist der detaillierte Inhalt vonVueJS MVVM-Modell im Vergleich zu Pure HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript typescript html5 jquery css html Object JS dom github http https ui

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erstellen Sie einen Reaktions-Hook, der sequentielle Anforderungen verarbeitetNächster Artikel：So erstellen Sie einen Reaktions-Hook, der sequentielle Anforderungen verarbeitet

In Verbindung stehende Artikel

Mehr sehen