VueJS MVVM モデルと Pure HTML の比較-jsチュートリアル-php.cn

VueJS MVVM モデルと Pure HTML の比較

王林

リリース： 2024-08-21 10:33:36

オリジナル

1195 人が閲覧しました

元の記事: 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 上のユーザー操作を検出するためのリスナーの追加など、実行する必要のある作業がたくさんあります。ターゲットアクションがキャプチャされるデータを取得するときにデータを返すことは、実際には非常にリソースを消費します。

<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比較

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

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

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

ログイン後にコピー