jQuery를 VUE로 바꾸는 방법
- Lisa Kudrow원래의
- 2025-02-14 09:56:11821검색
처음부터 vue.js를 배우고 싶습니까? Vue.js 기본 사항, 프로젝트 관행, 팁 등을 다루는 Vue.js 책의 전체 모음을 보려면 지금 Sitepoint Premium에 가입하십시오.
키 포인트
-
이 기사는 Sparksuite에서 제공하는 오픈 소스 템플릿을 사용하여 간단한 온라인 송장을 구축합니다. 바라건대 이것은 다른 할 일 목록보다 혁신적이며 이해하기 쉽고 Vue를 사용하는 이점을 입증 할만 큼 복잡합니다.
-
우리는 품목, 단가 및 수량 입력을 제공하여 대화식으로 만들고 값 중 하나가 변경 될 때 "가격"열을 자동으로 재 계산합니다. 또한 송장에 새 빈 행을 삽입하는 버튼과 데이터를 편집 할 때 자동으로 업데이트되는 "총"필드를 추가합니다. -
jQuery 구현
먼저, jQuery를 사용 하여이 기능을 구현하는 방법을 살펴 보겠습니다. - 이 함수는 테이블의 모든 항목 행을 찾아서 그들을 통해 루프하고 각 행을 계산 기능으로 전달한 다음 결과를 추가합니다. 그런 다음이 합계를 송장의 관련 위치에 삽입하십시오.
<code class="language-html"><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);</code>.00
위의 코드에서, 우리는 라인의 모든 입력 요소에 대한 참조를 얻고 두 번째 및 세 번째 요소에 곱하여 하위 운동을 얻습니다. 그런 다음이 값을 행의 마지막 셀에 삽입하십시오. <p>
</p>
<a> 우리는 또한 하위 운동과 총이 두 가지 소수의 형식으로 형식화되고 통화 기호로 접두사가되도록 도우미 기능을 가지고 있습니다. <pre class="brush:php;toolbar:false"><code class="language-javascript">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));
}</code></pre>
<p>
<have> 마지막으로 "행 추가"버튼에 대한 클릭 핸들러가 있습니다. 우리가하는 일은 마지막 프로젝트 행을 선택하고 사본을 만드는 것입니다. 클로닝 된 행에 대한 입력은 기본값으로 설정되어 새로운 마지막 행으로 삽입됩니다. 또한 사용자를 용이하게하고 첫 번째 입력에 초점을 설정하여 입력을 시작할 수 있습니다. </have></p>
<the> 다음은 완전한 jQuery 데모입니다 : Codepen Link <pre class="brush:php;toolbar:false"><code class="language-javascript">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;
}</code></pre>
<ant> jQuery의 단점
그렇다면이 코드에 무슨 문제가 있습니까? 또는 어디에서 개선 할 수 있습니까? <p>
<heard> 당신은 Vue 및 React와 같은 일부 새로운 도서관에 대해 들었을 것입니다. 물론이 jQuery 코드를 살펴보면 대부분의 코드는 DOM을 작동하는 방법에 대한 지침 목록입니다. 코드의 각 부분 ( "What")의 목적은 종종 "어떻게하는 방법"의 세부 사항을 구별하기가 어렵습니다. 물론, 우리는 코드를 잘 알려진 기능으로 나누어 코드의 의도를 명확히 할 수 있지만,이 코드는 여전히 잠시 후에는 다시 이해하기 위해 약간의 노력이 필요합니다. </heard></p>
이런 종류의 코드의 또 다른 문제는 DOM 자체에 응용 프로그램 상태를 저장한다는 것입니다. 주문 프로젝트에 대한 정보는 UI를 구성하는 HTML의 일부로 만 존재합니다. 이것은 하나의 위치에만 정보를 표시 할 때 큰 문제가되지 않지만 응용 프로그램의 여러 위치에 동일한 데이터를 표시하기 시작하면 각 섹션이 동기화되어 있는지 확인하십시오. 사실의 원천은 없습니다. <p>
<stop>는 우리가 DOM 이외의 상태를 저장하지 못하고 이러한 문제를 피하는 것을 막을 수는 없지만 Vue와 같은 라이브러리는 좋은 아키텍처의 생성을 용이하게하고 더 깨끗하고 모듈 식 코드를 작성하는 기능과 구조를 제공합니다. <a href="https://www.php.cn/link/dc22f6d44314e4501d867451048a5cf9">
<ue> vue로 변환
<do> 그렇다면 VUE를 어떻게 사용 하여이 기능을 재현합니까? </do></ue></a></stop></p>
<earlier> 앞에서 언급했듯이 Vue는 모듈 패커, 번역기를 사용하거나 단일 파일 구성 요소 (.Vue 파일)를 선택하여 시작할 필요가 없습니다. JQuery와 마찬가지로 CDN의 라이브러리를 단순히 포함시킬 수 있습니다. 스크립트 태그 대체부터 시작하겠습니다 :
<p>
<need need> 다음으로, 우리는 새로운 vue 인스턴스를 만들어야합니다 : </need></p>
<p>
<need> 여기서 우리는 vue를 관리하려는 문서의 어떤 부분을 식별하기 위해 선택기 (jQuery와 마찬가지로) el 옵션을 제공하면됩니다. </need></p>
<v> 우리는 Vue가 전체 페이지 (예 : 단일 페이지 응용 프로그램의 경우) 또는 단일 <p>에서 시작하는 것을 처리 할 수 있습니다. 송장 예를 들어 VUE가 HTML 테이블을 제어하게합니다. </p>
<p> 데이터
<add> 또한 세 예제 행에서 vue 인스턴스에 관련 데이터를 추가하겠습니다.<pre class="brush:php;toolbar:false"><code class="language-html"><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);</code></pre>.00</td>
</tr>
마지막 셀에서
이벤트 및 방법
<code class="language-javascript">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));
}</code>
<code class="language-html"><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);</code>.00
필터
<code class="language-javascript">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));
}</code>
요약
두 라이브러리의 크기 (KB)는 거의 동일합니다. 물론 사용자 정의 빌드로 jQuery를 간소화 할 수 있지만 송장 예제와 같은 비교적 간단한 프로젝트의 경우 개발의 용이성과 코드의 가독성이 이러한 차이를 정당화한다고 생각합니다.
jQuery를 vue 로 대체하는 것에 대한
요구 사항에 따라 출력을 다시 작성하고 모든 사진의 원래 형식과 위치를 유지했습니다. Codepen에 액세스 할 수 없으므로 실제 Codepen 링크를 제공 할 수 없습니다. "[Codepen Link]"자리 표시자를 작성하고 교체하십시오.
위 내용은 jQuery를 VUE로 바꾸는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!