Modèle VueJS MVVM par rapport au HTML pur-js tutoriel-php.cn

Modèle VueJS MVVM par rapport au HTML pur

王林

Libérer： 2024-08-21 10:33:36

original

1163 Les gens l'ont consulté

Article original : http://blog.kueiapp.com/programming-tw/vuejs-mvvm-VueJS-MVVM-Model et -Pure-HTML5-Comparison/

La différence entre Vue.js et HTML5 natif

Il existe de nombreuses méthodes et frameworks pour créer des systèmes frontaux Web, tels que React, AngularJS, Vue.js, etc. Il est tout à fait possible de créer un système en utilisant HTML5 et JavaScript natifs, mais l'utilisation d'un bon framework permet généralement d'implémenter le système avec de meilleurs modèles de conception en termes de structure et de sécurité.

Un outil ou une architecture est généralement créé parce que les développeurs ont rencontré certaines difficultés. Par exemple, jQuery a été inventé pour utiliser JavaScript sur des navigateurs prenant en charge différentes normes, et c'était la première bibliothèque à contrôler le DOM (Document Object Modal) à l'aide de sélecteurs CSS. Le HTML5 querySelector reproduit cette fonctionnalité intéressante pour permettre au HTML de manipuler plus facilement le DOM.

Pourquoi avez-vous besoin de VueJS

Lorsque vous utilisez du JavaScript Pure HTML5 pour accéder au DOM afin de récupérer des données de l'arborescence HTML, beaucoup de travail doit être effectué, comme le ciblage des éléments, l'ajout d'écouteurs pour détecter les interactions des utilisateurs sur l'interface utilisateur, ou lorsque le l'action cible est capturée. Le retour des données lors de leur récupération est en réalité très gourmand en ressources.

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

Copier après la connexion

VueJS MVVM 模型與 Pure HTML比較

Par rapport au JavaScript HTML5 natif (ou jQuery) qui exploite directement le DOM, Vue.js possède son propre modèle MVVM qui permet de modifier le DOM tout en obtenant un nouveau modèle de données. En d’autres termes, nous pouvons nous concentrer sur la structure des données plutôt que de concevoir notre propre modèle pour manipuler directement le DOM.

Les deux approches conviennent à différentes situations, mais Vue.js fournit en fait un moyen plus simple de créer une interface Web.

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

Copier après la connexion