Vue.js와 Jquery의 비교

보편적으로 jQuery는 웹 초보자에게 적합한 시작 도구라고 여긴다.많은 사람들이 심지어 jQuery를 배우기 전에, 그들은 이미 약간의 가벼운 자바스크립트 지식을 배웠다.왜?일부는 jQuery의 유행 때문이지만 주로 경험 개발자의 잘못된 이념에서 비롯되었다. jQuery는 간단하기 때문에 초보자에게도 간단하고 적합하다.jQuery는 간결함을 제공합니다. jQuery를 간소화하지 않아서 오래된 브라우저 문제를 많이 극복했습니다.그러나 DOM API와 JavaScript를 캡슐화하는 복잡성에는 크게 도움이 되지 않습니다.$('#id')를 입력합니다.click(function(event) {..}); 확실히 매우 간단하지만, 당신은 배경 지식을 좀 알아야 이 코드를 쓸 수 있습니다. DOM 노드 선택, 이벤트 처리, 리셋 등입니다.만약 DOM API와 자바스크립트를 이해했다면, jQuery는 간단하지만 초보자는 쓰기가 쉽지 않다.Vue.jsVue.제이스는 자바스크립트 마을에 새로 온 녀석이야.그것의 많은 장점은 배우기 쉬운 것이 아마도 첫째일 것이다.간단함은 이미 그것의 설계에 내장되었다.초보자는 VUE로 일반적인 웹 응용 프로그램을 만들 수 있고 그들이 어떻게 일을 하는지 더 잘 알 수 있다. 특히 jQuery로 같은 것을 구축하는 것보다.jQuery와 vue를 사용하자.js는 얼마나 가벼운 프로그램인지 보기 위해 아주 간단한 프로그램을 실행합니다.이 사례 프로그램은 단추가 눌린 횟수를 계산해서 화면에 이 숫자를 표시합니다.
JQuery 구현




  var counter = 0;
  $(document).ready(function() {
    var $output = $('#output');  
    $('#increment').click(function() {
      counter++;
      $output.html(counter);
    });
    $output.html(counter);
  });

它看起来很简单，但考虑到这只是因为你是从经验丰富的开发人员角度看。其实理解代码实际所做的原理是相当棘手的。想想：1. $(document).ready(function() { .. });这这30个字符包含四个棘手的概念：DOM节点的选择、事件处理、文件的加载过程和回调。如果你没有学会所有这些东西，那么你不明白你刚才写的代码。2.要选择一个DOM元素实现操作并完成业务，你需要jQuery构造器$（'…'）。不幸的是，你不能确定到底你会得到什么节点，你需要使用CSS3-like选择器创建一个合适的过滤器，运行时才能确定。要做到这一点，你需要创建一个DOM复制和模拟运行你的滤波器会对它做些什么。当你编写更新DOM的每个方法时，你必须同样地更新你的DOM复制和考虑如果你的过滤器仍然如预期一样正常工作。3.JQuery只有一个模式：选择jQuery某样事情，然后从API的方法做你选择的事情。这一模式的问题是，我们现在有一个扁平的、有超过100个的方法，从AJAX到数组一维迭代。仅仅使用这么多方法的名称描述就能足以区分他们所做的和他们的返回的是不可能的。一个初学者理解这些串联在一起的方法是真的需要好运。

使用Vue.js实现：


  {{ counter }}
  


  new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      increment() { 
        this.counter++;
      }
    }
  });

Vue가 해결되기 전에 jQuery의 많은 문제점: 1.DOM 콜백을 걱정할 필요가 없으며 이러한 복잡성은 포장되어 있습니다.Vue의 Lifecycle Connect는 필요한 경우 보다 정확한 제어를 제공합니다.2. 데이터 속성 카운터와 렌더링 출력 DOM 노드 사이에 뚜렷한 링크가 있다.심리적 DOM을 필요로 하지 않아도 웹 페이지에 업데이트계수기가 당신의 DOM을 어지럽히지 않고 예상치 못한 방식으로 흔들리는 노드의 선택을 어지럽히지 않을 것을 보장할 수 있다.더 이상 DOM 복사가 필요하지 않습니다. 웹 페이지에서 카운터를 업데이트할 때 믿을 수 없는 노드 선택으로 인해 예상치 못한 방식으로 DOM을 어지럽히지 않도록 보장할 수 있습니다.3. 우리는 애매모호한 API 방법을 찾거나 기억해야 한다.서로 다른 기능은 Vue 구조 함수 대상에 잘 조직되고 층으로 나뉘어져 있거나 명령을 통해 템플릿에 있는 DOM 노드에 직접 적용될 수 있다. 이런 명령들은 이해하기 쉬운 상하문을 제공한다.따라서 자바스크립트와 DOM API를 이해했다면, jQuery는 쉽다.하지만 이것은 초보자의 상황이 아니다.따라서 jQuery는 간단하지 않고 약간 간단하다.다른 한편, Vue는 그 디자인에 간단하게 내장되어 있다.DOM API의 여러 가지 어려운 부분을 캡슐화했습니다.초보자는 따라서 그들이 진정으로 이해하는 코드를 빨리 작성할 수 있고, 더 복잡한 것을 해야 할 때, Vue도 그들에게 제공할 수 있다.그래서 다음에 어떤 사람이 당신에게 그들이 사이트 개발자로서 초보자로서 배워야 할 것이 무엇인지 물어볼게요. 아마도 jQuery가 아닐 거예요.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Vue.js와 Jquery의 비교

좋은 웹페이지 즐겨찾기