首頁 > 文章 > web前端 > VueJS MVVM 模型與 Pure HTML比較

VueJS MVVM 模型與 Pure HTML比較

王林原創: 2024-08-21 10:33:361166瀏覽

原文：http://blog.kueiapp.com/programming-tw/vuejs-mvvm-VueJS-MVVM-模型與-Pure-HTML5-的比較/

Vue.js 與 Native HTML5 的不同點

現在有很多方法和框架可以建立網頁前端系統，例如 React、AngularJS、Vue.js 等等。使用原生的 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比較

相較於原生 HTML5 JavaScript (或 jQuery) 直接操作 DOM，Vue.js 有自己的 MVVM 模型可以在取得新資料模型的同時修改 DOM。換句話說，我們可以專注於資料結構而不是設計我們自己的模型來直接操作 DOM。

這兩種方式都適用於不同的情境，但 Vue.js 實際上提供了更簡單的路徑來建立網頁前端。

使用 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-模型與-Pure-HTML5-的比較/

以上是VueJS MVVM 模型與 Pure HTML比較的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript typescript html5 jquery css html Object JS dom github http https ui

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何建構處理順序請求的 React Hook下一篇：如何建構處理順序請求的 React Hook

看更多