VueJS MVVM-Modell im Vergleich zu Pure HTML-js-Tutorial-php.cn

VueJS MVVM-Modell im Vergleich zu Pure HTML

王林

Freigeben： 2024-08-21 10:33:36

Original

1190 Leute haben es durchsucht

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];
        }
      });
  });
});

Nach dem Login kopieren

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: [],
  }),
});

Nach dem Login kopieren

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!