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

A diferença entre Vue.js e HTML5 nativo

Existem muitos métodos e estruturas para construir sistemas front-end web, como React, AngularJS, Vue.js, etc. É absolutamente possível construir um sistema usando HTML5 e JavaScript nativos, mas geralmente usando um bom framework é possível implementar o sistema com melhores padrões de design em termos de estrutura e segurança.

Uma ferramenta ou arquitetura geralmente é criada porque os desenvolvedores encontraram certas dificuldades. Por exemplo, jQuery foi inventado para usar JavaScript em navegadores que suportam diferentes padrões, e foi a primeira biblioteca a controlar o DOM (Document Object Modal) usando seletores CSS. O querySelector HTML5 replica esse recurso interessante para tornar mais fácil para o HTML manipular o DOM.

Por que você precisa do VueJS

Ao usar JavaScript HTML5 puro para acessar o DOM para obter dados da árvore HTML, há muito trabalho que precisa ser feito, como direcionar elementos, adicionar ouvintes para detectar interações do usuário na IU ou quando o a ação alvo é capturada. Retornar dados ao recuperá-los consome muitos recursos.

  
    
Checkbox with pure HTML5 syntax
    
      
      checkbox 1
    
    
      
      checkbox 2
    
  

Comparado com HTML5 JavaScript nativo (ou jQuery) que opera diretamente o DOM, Vue.js tem seu próprio modelo MVVM que pode modificar o DOM enquanto obtém um novo modelo de dados. Em outras palavras, podemos nos concentrar na estrutura de dados em vez de projetar nosso próprio modelo para manipular diretamente o DOM.

Ambas as abordagens são adequadas para situações diferentes, mas o Vue.js, na verdade, fornece um caminho mais fácil para construir um frontend web.

Usando Vue.js

      
      
        check 1
        
      
      
        check 2
        
      

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

exemplo

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

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