首页 > 文章 > web前端 > VueJS MVVM 模型与 Pure HTML比较

VueJS MVVM 模型与 Pure HTML比较

王林原创: 2024-08-21 10:33:361170浏览

原始文章：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

上一篇：How to Build a React Hook That Handles Sequential Requests下一篇：Understanding JavaScript Objects: The Building Blocks of Your Code

查看更多