元の記事: http://blog.kueiapp.com/programming-tw/vuejs-mvvm-VueJS-MVVM-Model and -Pure-HTML5-Comparison/

Vue.js とネイティブ HTML5 の違い

React、AngularJS、Vue.js など、Web フロントエンド システムを構築するための方法やフレームワークは数多くあります。ネイティブ HTML5 と JavaScript を使用してシステムを構築することは絶対に可能ですが、通常は優れたフレームワークを使用することで、構造とセキュリティの点でより優れた設計パターンでシステムを実装できます。

ツールやアーキテクチャは通常、開発者が特定の困難に遭遇したために作成されます。たとえば、jQuery は、さまざまな標準をサポートするブラウザーで JavaScript を使用するために発明され、CSS セレクターを使用して DOM (Document Object Modal) を制御する最初のライブラリでした。 HTML5 querySelector は、この優れた機能を複製して、HTML による DOM の操作を容易にします。

VueJS が必要な理由

Pure HTML5 JavaScript を使用して DOM にアクセスし、HTML ツリーからデータを取得する場合、要素のターゲット設定、UI 上のユーザー操作を検出するためのリスナーの追加など、実行する必要のある作業がたくさんあります。ターゲット アクションがキャプチャされる データを取得するときにデータを返すことは、実際には非常にリソースを消費します。

  
    
Checkbox with pure HTML5 syntax
    
      
      checkbox 1
    
    
      
      checkbox 2
    
  

DOM を直接操作するネイティブ HTML5 JavaScript (または jQuery) と比較して、Vue.js には、新しいデータ モデルを取得しながら DOM を変更できる独自の MVVM モデルがあります。言い換えれば、DOM を直接操作する独自のモデルを設計するのではなく、データ構造に集中できます。

どちらのアプローチもさまざまな状況に適していますが、実際には Vue.js の方が Web フロントエンドを構築するためのより簡単な道を提供します。

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 and -Pure-HTML5-Comparison/