VueJS MVVM 模型与 Pure HTML比较-js教程-PHP中文网

VueJS MVVM 模型与 Pure HTML比较

王林

发布： 2024-08-21 10:33:36

原创

1164 人浏览过

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

登录后复制