Maison > Article > interface Web > Modèle VueJS MVVM par rapport au HTML pur

Modèle VueJS MVVM par rapport au HTML pur

王林original: 2024-08-21 10:33:361164parcourir

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

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

exemple

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer un hook React qui gère les requêtes séquentiellesArticle suivant：Comment créer un hook React qui gère les requêtes séquentielles

Articles Liés

Voir plus