Artículo original: http://blog.kueiapp.com/programming-tw/vuejs-mvvm-VueJS-MVVM-Model and -Pure-HTML5-Comparison/

La diferencia entre Vue.js y HTML5 nativo

Existen muchos métodos y marcos para crear sistemas front-end web, como React, AngularJS, Vue.js, etc. Es absolutamente posible construir un sistema usando HTML5 y JavaScript nativos, pero generalmente usando un buen marco se puede implementar el sistema con mejores patrones de diseño en términos de estructura y seguridad.

Por lo general, se crea una herramienta o arquitectura porque los desarrolladores han encontrado ciertas dificultades. Por ejemplo, jQuery se inventó para usar JavaScript en navegadores que soportan diferentes estándares, y fue la primera biblioteca en controlar el DOM (Document Object Modal) usando selectores CSS. El querySelector HTML5 replica esta característica interesante para facilitar que HTML manipule el DOM.

Por qué necesitas VueJS

Cuando se utiliza JavaScript HTML5 puro para acceder al DOM y capturar datos del árbol HTML, hay mucho trabajo por hacer, como apuntar a elementos, agregar oyentes para detectar interacciones del usuario en la interfaz de usuario o cuándo Se captura la acción objetivo. Devolver datos al recuperarlos requiere en realidad muchos recursos.

  
    
Checkbox with pure HTML5 syntax
    
      
      checkbox 1
    
    
      
      checkbox 2
    
  

En comparación con JavaScript HTML5 nativo (o jQuery) que opera directamente el DOM, Vue.js tiene su propio modelo MVVM que puede modificar el DOM mientras obtiene un nuevo modelo de datos. En otras palabras, podemos centrarnos en la estructura de datos en lugar de diseñar nuestro propio modelo para manipular directamente el DOM.

Ambos enfoques son adecuados para diferentes situaciones, pero Vue.js en realidad proporciona un camino más fácil para crear una interfaz web.

Usando Vue.js

      
      
        check 1
        
      
        check 2
        

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

ejemplo

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

Artículo original: http://blog.kueiapp.com/programming-tw/vuejs-mvvm-VueJS-MVVM-Model and -Pure-HTML5-Comparison/