jQuery를 VUE로 바꾸는 방법-JS 튜토리얼-php.cn

jQuery에게 작별 인사를하고 Vue.js를 받아들이십시오 : 더 간단하고 효율적인 웹 응용 프로그램을 구축하십시오

How to Replace jQuery with Vue 처음부터 vue.js를 배우고 싶습니까? Vue.js 기본 사항, 프로젝트 관행, 팁 등을 다루는 Vue.js 책의 전체 모음을 보려면 지금 Sitepoint Premium에 가입하십시오. 많은 개발자들은 간단한 응용 프로그램을 구축 할 때 여전히 jQuery에 의존합니다. 때로는 페이지에 소량의 상호 작용을 추가하면 JavaScript 프레임 워크를 사용하여 추가 코드 볼륨, 보일러 플레이트 코드, 빌드 도구 및 모듈 패커 등이 너무 복잡해 보입니다. CDN에서 jQuery를 소개하는 것은 선택한 산들 바람처럼 보입니다.

이 기사는 비교적 간단한 프로젝트의 경우 vue.js (vue라고 함)를 사용하는 데 어떤 노력도 필요하지 않지만 더 나은 코드를 더 빨리 쓰는 데 도움이 될 것임을 확신시키기위한 것입니다. 우리는 간단한 예제로 jquery와 vue를 사용하여 각각 인코딩하고 차이점을 점차적으로 보여줍니다.

키 포인트

기본 프로젝트의 경우 vue.js로 jQuery를 교체하는 것은 어렵지 않으며 더 빠르고 빠른 코드를 작성할 수 있습니다.

vue.js를 사용하면 UI 가이를 구동하는 논리/데이터와 명확하게 분리되어 코드를 쉽게 이해하고 테스트 할 수 있습니다.

vue.js의 UI는 선언적입니다. 즉, 개발자는 DOM을 구현하기 위해 DOM을 운영하는 방법에주의를 기울이지 않고보고 싶은 것에 집중하면됩니다.

vue.js와 jQuery의 크기는 비슷하지만 vue.js는보다 편리한 개발 경험과 더 쉬운 읽기 가능한 코드를 제공합니다.

vue.js는 복잡한 프론트 엔드 애플리케이션으로 결합 할 수있는 모듈 식, 재사용 가능한 UI 구성 요소를 생성 할 수 있습니다.

우리가 구축 할 내용

우리는 품목, 단가 및 수량 입력을 제공하여 대화식으로 만들고 값 중 하나가 변경 될 때 "가격"열을 자동으로 재 계산합니다. 또한 송장에 새 빈 행을 삽입하는 버튼과 데이터를 편집 할 때 자동으로 업데이트되는 "총"필드를 추가합니다.

단일 (빈) 행의 HTML이 다음과 같이 보이도록 템플릿을 수정했습니다.

jQuery 구현

먼저, jQuery를 사용 하여이 기능을 구현하는 방법을 살펴 보겠습니다.

우리는 리스너를 테이블 자체에 첨부하고 "단위 비용"또는 "수량"값이 변경되면 계산 된 토탈 함수가 실행됩니다.

이 함수는 테이블의 모든 항목 행을 찾아서 그들을 통해 루프하고 각 행을 계산 기능으로 전달한 다음 결과를 추가합니다. 그런 다음이 합계를 송장의 관련 위치에 삽입하십시오.

<tr> class="item">
  <td><input type="text" v-model="item.description" /></td>
  <td><input type="number" v-model="item.price" /></td>
  <td><input type="number" v-model="item.quantity" /></td>
  <td><pre class="brush:php;toolbar:false"><code class="language-javascript">$('table').on('mouseup keyup', 'input[type=number]', calculateTotals);

로그인 후 복사

.00

 위의 코드에서, 우리는 라인의 모든 입력 요소에 대한 참조를 얻고 두 번째 및 세 번째 요소에 곱하여 하위 운동을 얻습니다. 그런 다음이 값을 행의 마지막 셀에 삽입하십시오. <p>
</p>
<a> 우리는 또한 하위 운동과 총이 두 가지 소수의 형식으로 형식화되고 통화 기호로 접두사가되도록 도우미 기능을 가지고 있습니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function calculateTotals() {
  const subtotals = $('.item').map((idx, val) =&gt; calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) =&gt; a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<p>
<have> 마지막으로 "행 추가"버튼에 대한 클릭 핸들러가 있습니다. 우리가하는 일은 마지막 프로젝트 행을 선택하고 사본을 만드는 것입니다. 클로닝 된 행에 대한 입력은 기본값으로 설정되어 새로운 마지막 행으로 삽입됩니다. 또한 사용자를 용이하게하고 첫 번째 입력에 초점을 설정하여 입력을 시작할 수 있습니다. </p>
<the> 다음은 완전한 jQuery 데모입니다 : <🎜 🎜> Codepen Link <🎜 🎜> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function calculateSubtotal(row) {
  const $row = $(row);
  const inputs = $row.find('input');
  const subtotal = inputs[1].value * inputs[2].value;

  $row.find('td:last').text(formatAsCurrency(subtotal));

  return subtotal;
}</pre><div class="contentsignin">로그인 후 복사</div></div>
<ant> jQuery의 단점 <🎜 🎜>
<'s> 그렇다면이 코드에 무슨 문제가 있습니까? 또는 어디에서 개선 할 수 있습니까? <p>
<heard> 당신은 Vue 및 React와 같은 일부 새로운 도서관에 대해 들었을 것입니다. 물론이 jQuery 코드를 살펴보면 대부분의 코드는 DOM을 작동하는 방법에 대한 지침 목록입니다. 코드의 각 부분 ( "What")의 목적은 종종 "어떻게하는 방법"의 세부 사항을 구별하기가 어렵습니다. 물론, 우리는 코드를 잘 알려진 기능으로 나누어 코드의 의도를 명확히 할 수 있지만,이 코드는 여전히 잠시 후에는 다시 이해하기 위해 약간의 노력이 필요합니다. </p>
이런 종류의 코드의 또 다른 문제는 DOM 자체에 응용 프로그램 상태를 저장한다는 것입니다. 주문 프로젝트에 대한 정보는 UI를 구성하는 HTML의 일부로 만 존재합니다. 이것은 하나의 위치에만 정보를 표시 할 때 큰 문제가되지 않지만 응용 프로그램의 여러 위치에 동일한 데이터를 표시하기 시작하면 각 섹션이 동기화되어 있는지 확인하십시오. 사실의 원천은 없습니다. <p>
<stop>는 우리가 DOM 이외의 상태를 저장하지 못하고 이러한 문제를 피하는 것을 막을 수는 없지만 Vue와 같은 라이브러리는 좋은 아키텍처의 생성을 용이하게하고 더 깨끗하고 모듈 식 코드를 작성하는 기능과 구조를 제공합니다. <a href="//m.sbmmt.com/link/dc22f6d44314e4501d867451048a5cf9">
<ue> vue로 변환 <🎜 </a>
<do> 그렇다면 VUE를 어떻게 사용 하여이 기능을 재현합니까? </p>
<earlier> 앞에서 언급했듯이 Vue는 모듈 패커, 번역기를 사용하거나 단일 파일 구성 요소 (.Vue 파일)를 선택하여 시작할 필요가 없습니다. JQuery와 마찬가지로 CDN의 라이브러리를 단순히 포함시킬 수 있습니다. 스크립트 태그 대체부터 시작하겠습니다 : <🎜 🎜>
<p>
<need need> 다음으로, 우리는 새로운 vue 인스턴스를 만들어야합니다 : </p>
<p>
<need> 여기서 우리는 vue를 관리하려는 문서의 어떤 부분을 식별하기 위해 선택기 (jQuery와 마찬가지로) el 옵션을 제공하면됩니다. </p>
<v> 우리는 Vue가 전체 페이지 (예 : 단일 페이지 응용 프로그램의 경우) 또는 단일 <p>에서 시작하는 것을 처리 할 수 있습니다. 송장 예를 들어 VUE가 HTML 테이블을 제어하게합니다. </p>
<p> 데이터 <🎜 🎜>
<add> 또한 세 예제 행에서 vue 인스턴스에 관련 데이터를 추가하겠습니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;tr&gt; class=&quot;item&quot;&gt;
  &lt;td&gt;&lt;input type=&quot;text&quot; v-model=&quot;item.description&quot; /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type=&quot;number&quot; v-model=&quot;item.price&quot; /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type=&quot;number&quot; v-model=&quot;item.quantity&quot; /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;$('table').on('mouseup keyup', 'input[type=number]', calculateTotals);</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>.00</td>
</tr>

데이터 속성은 응용 프로그램 상태를 저장하는 위치입니다. 여기에는 응용 프로그램을 사용하려는 데이터뿐만 아니라 UI 상태에 대한 정보 (예 : 현재 활성화 된 부분 또는 아코디언이 확장 또는 붕괴되는지)가 포함됩니다.

vue는 응용 프로그램의 상태를 표현 (즉, DOM)과 분리하고 한 장소에 단일 소스에 집중하도록 권장합니다.

템플릿 수정 <🎜

이제 데이터 객체에서 항목을 표시하도록 템플릿을 설정하겠습니다. 우리는 Vue에게 테이블을 제어하기를 원한다고 말했기 때문에 HTML에서 템플릿 구문을 사용하여 Vue에게 렌더링하고 조작하는 방법을 알려줄 수 있습니다.

<-f> v-for 속성을 사용하여 항목 배열의 각 항목에 대해 HTML 조각을 렌더링 할 수 있습니다.

vue는 V -FOR에 의해 제작 된 배열 (또는 객체)에 전달되는 각 요소에 대해이 태그를 반복하여 루프에서 각 요소를 참조 할 수 있습니다 -이 경우 항목. VUE는 데이터 객체의 모든 속성을 관찰하고 있으므로 항목 내용이 변경 될 때 마크 업을 동적으로 다시 렌더링합니다. 응용 프로그램 상태에 항목을 추가하거나 삭제하면 VUE가 UI를 업데이트 할 책임이 있습니다.

또한 사용자가 항목 설명, 단가 및 수량을 채울 수 있도록 입력 상자를 추가해야합니다.

여기서, 우리는 V- 모델 속성을 사용하여 프로젝트 모델의 입력과 속성 사이의 양방향 바인딩을 설정합니다. 이는 입력에 대한 변경 사항이 프로젝트 모델의 해당 속성을 업데이트하고 그 반대도 마찬가지입니다.

마지막 셀에서 는 이중 버팀대 {{}}를 사용하여 일부 텍스트를 출력합니다. 브레이스 내부에서 유효한 JavaScript 표현식을 사용할 수 있으므로 두 프로젝트 속성을 곱하고 결과를 출력합니다. 마찬가지로 VUE는 데이터 모델을 관찰하기 때문에 두 속성의 변경으로 인해 표현식이 자동으로 다시 계산됩니다.

<<<> 이벤트 및 방법 <🎜 🎜> 이제 항목 수집을 렌더링하기 위해 템플릿을 설정했지만 새 라인을 어떻게 추가합니까? VUE는 항목에 무엇이든 렌더링되어 빈 줄을 렌더링하기 위해 원하는 기본값을 가진 객체를 항목 배열로 밀어야합니다.

템플릿에서 액세스 할 수있는 함수를 만들려면 메소드 객체의 속성으로 vue 인스턴스로 전달해야합니다.

function calculateTotals() {
  const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) => a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}

로그인 후 복사

항목 배열에 새 항목을 추가하기 위해 호출 할 수있는 Addrow 메소드를 정의하자.

우리가 만든 모든 메소드는 VUE 인스턴스 자체에 자동으로 바인딩되므로 데이터 객체의 속성 및 기타 메소드에 이의 속성으로 액세스 할 수 있습니다.

그래서 이제 우리는 메소드가 있습니다. "행 추가"버튼을 클릭 할 때 어떻게 호출합니까? 템플릿의 요소에 이벤트 리스너를 추가하기위한 구문은 V-On : event-name : <🎜 🎜>입니다.

vue는 또한 위의 코드에서했던 것처럼 v-on 대신 @를 사용할 수 있도록 바로 가기를 제공합니다. 핸들러의 경우 VUE 인스턴스에 모든 메소드를 지정할 수 있습니다.

컴퓨팅 속성 <🎜 🎜> 이제 송장의 하단에 총계를 표시하면됩니다. 앞에서 언급했듯이 템플릿 자체에서 이것을 할 수있을 것입니다. 그러나 템플릿 외부에서 매우 기본적인 논리를 넘어서는 것이 더 좋습니다.

우리는 이것에 다른 방법을 사용할 수 있지만 계산 된 속성이 더 적절하다고 생각합니다. 생성 방법과 유사하게 함수가 포함 된 계산 된 객체를 VUE 인스턴스에 전달하고 템플릿에서 이러한 함수의 결과를 사용하기를 원합니다 :

이제 템플릿 에서이 계산 된 속성을 참조 할 수 있습니다.

당신이 알 수 있듯이, 계산 된 속성은 데이터처럼 취급 될 수 있습니다. 그러나 계산 된 속성을 사용하면 또 다른 이점이 있습니다. vue는 리턴 값을 캐시 할 수있을만큼 똑똑하며 데이터 속성 중 하나가 변경에 의존하는 경우에만 함수를 다시 계산합니다.

<tr> class="item">
  <td><input type="text" v-model="item.description" /></td>
  <td><input type="number" v-model="item.price" /></td>
  <td><input type="number" v-model="item.quantity" /></td>
  <td><pre class="brush:php;toolbar:false"><code class="language-javascript">$('table').on('mouseup keyup', 'input[type=number]', calculateTotals);

로그인 후 복사

.00 우리가 방법을 사용하여 총계를 계산하면 템플릿이 다시 렌더링 될 때마다 계산이 수행됩니다. 우리는 계산 된 속성을 사용하고 있기 때문에 총은 품목의 수량 또는 가격 필드가 변경되는 경우에만 다시 계산됩니다.

필터 <🎜 🎜> 당신은 우리의 구현에서 작은 오류를 발견했을 것입니다. 단가는 정수이지만, 우리의 총계 및 하위 토탈은 표시 될 때 표시되지 않습니다. 우리가 정말로 원하는 것은이 숫자를 항상 두 십자 자리로 표시하는 것입니다.

function calculateTotals() {
  const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) => a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}

로그인 후 복사

하위 운동을 계산하고 총계를 계산하는 코드를 수정하는 대신 Vue는 필터와 같은 일반적인 형식의 형식 작업을 처리 할 수있는 좋은 방법을 제공합니다.

당신이 추측했던 것처럼, 필터를 만들려면, 우리는 그 열쇠가있는 객체를 우리의 vue 인스턴스에 전달합니다 : .

여기서 우리는 value.tofixed (2)를 호출하는 통화라는 매우 간단한 필터를 생성하고 결과를 반환합니다. 다음과 같이 템플릿의 모든 출력에 적용 할 수 있습니다.

다음은 전체 vue 데모입니다 :

Codepen link

요약 코드의 두 버전을 나란히 비교하고 VUE 응용 프로그램의 여러 측면이 두드러집니다.

UI와 그로 인한 논리/데이터 간의 명확한 분리 : 코드는 이해하기 쉽고 테스트하기가 더 쉽습니다.

UI는 선언적입니다 : DOM을 구현하기 위해 DOM을 운영하는 방법에주의를 기울이지 않고보고 싶은 것에 대해서만 관심을 갖기 만하면됩니다.

두 라이브러리의 크기 (KB)는 거의 동일합니다. 물론 사용자 정의 빌드로 jQuery를 간소화 할 수 있지만 송장 예제와 같은 비교적 간단한 프로젝트의 경우 개발의 용이성과 코드의 가독성이 이러한 차이를 정당화한다고 생각합니다.

vue는 여기서 소개하지 않은 많은 일을 할 수 있습니다. 이 장점은 복잡한 프론트 엔드 애플리케이션으로 결합 할 수있는 모듈 식, 재사용 가능한 UI 구성 요소를 만들 수 있다는 것입니다. Vue를 깊이 알고 싶다면 vue.js 2.0 프레임 워크에서 일어나고 실행하는 것이 좋습니다.

jQuery를 vue 로 대체하는 것에 대한 faqs

jquery와 vue.js의 주요 차이점은 무엇입니까?

jQuery는 빠르고 컴팩트하며 기능이 풍부한 JavaScript 라이브러리입니다. HTML 문서는 트래버스 및 조작, 이벤트 처리 및 애니메이션을보다 쉽게 만들 수 있으며 사용하기 쉬운 API는 다양한 브라우저에서 실행할 수 있습니다. 반면 vue.js는 사용자 인터페이스를 구축하기위한 점진적인 JavaScript 프레임 워크입니다. 다른 전체 프레임 워크와 달리 Vue의 디자인은 처음부터 점진적으로 채택 가능성을 가지고 있습니다. 핵심 라이브러리는보기 레이어에만 초점을 맞추고 시작하기 쉽고 다른 라이브러리 또는 기존 프로젝트와 통합됩니다.