VueJS MVVM 모델과 순수 HTML 비교-JS 튜토리얼-php.cn

VueJS MVVM 모델과 순수 HTML 비교

王林

풀어 주다： 2024-08-21 10:33:36

원래의

1164명이 탐색했습니다.

원본 기사: http://blog.kueiapp.com/programming-tw/vuejs-mvvm-VueJS-MVVM-Model 및 -Pure-HTML5-Comparison/

Vue.js와 네이티브 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比較

DOM을 직접 운영하는 네이티브 HTML5 JavaScript(또는 jQuery)에 비해 Vue.js는 새로운 데이터 모델을 얻으면서 DOM을 수정할 수 있는 자체 MVVM 모델을 가지고 있습니다. 즉, 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: [],
  }),
});

로그인 후 복사