ホームページ >ウェブフロントエンド >jsチュートリアル >VueJS MVVM モデルと Pure HTML の比較
VueJS MVVM モデルと Pure HTML の比較
- 王林オリジナル
- 2024-08-21 10:33:361200ブラウズ
元の記事: 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];
}
});
});
});
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: [],
}),
});
例
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/
以上がVueJS MVVM モデルと Pure HTML の比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。