VueJS MVVM 模型與 Pure HTML5 的比較

原始文章：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];
        }
      });
  });
});

相較於原生 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-的比較/