Оригинальная статья: http://blog.kueiapp.com/programming-tw/vuejs-mvvm-VueJS-MVVM-Model и -Pure-HTML5-Comparison/

Разница между Vue.js и Native HTML5

Существует множество методов и фреймворков для создания интерфейсных веб-систем, таких как React, AngularJS, Vue.js и т. д. Совершенно возможно построить систему, используя собственный HTML5 и JavaScript, но обычно использование хорошей инфраструктуры позволяет реализовать систему с лучшими шаблонами проектирования с точки зрения структуры и безопасности.

Инструмент или архитектура обычно создаются потому, что разработчики столкнулись с определенными трудностями. Например, jQuery была изобретена для использования JavaScript в браузерах, поддерживающих различные стандарты, и это была первая библиотека, которая управляла DOM (модальным объектом документа) с помощью селекторов CSS. HTML5 querySelector повторяет эту замечательную функцию, чтобы облегчить HTML манипулирование DOM.

Зачем вам нужен VueJS

При использовании Pure HTML5 JavaScript для доступа к DOM с целью получения данных из дерева HTML необходимо проделать большую работу, например, настроить таргетинг на элементы, добавить прослушиватели для обнаружения взаимодействия пользователя с пользовательским интерфейсом или когда целевое действие фиксируется. Возврат данных при их получении на самом деле требует очень больших ресурсов.

  
    
Checkbox with pure HTML5 syntax
    
      
      checkbox 1
    
    
      
      checkbox 2
    
  

По сравнению с собственным HTML5 JavaScript (или jQuery), который напрямую управляет DOM, Vue.js имеет собственную модель MVVM, которая может изменять DOM при получении новой модели данных. Другими словами, мы можем сосредоточиться на структуре данных, а не на разработке собственной модели для непосредственного управления DOM.

Оба подхода подходят для разных ситуаций, но Vue.js на самом деле обеспечивает более простой путь создания веб-интерфейса.

Использование Vue.js

      
      
        check 1
        
      
        check 2
        

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

пример

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

Оригинальная статья: http://blog.kueiapp.com/programming-tw/vuejs-mvvm-VueJS-MVVM-Model и -Pure-HTML5-Comparison/