jQuery를 VUE로 바꾸는 방법

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

처음부터 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 구성 요소를 생성 할 수 있습니다.

우리가 구축 할 내용

이 기사는 Sparksuite에서 제공하는 오픈 소스 템플릿을 사용하여 간단한 온라인 송장을 구축합니다. 바라건대 이것은 다른 할 일 목록보다 혁신적이며 이해하기 쉽고 Vue를 사용하는 이점을 입증 할만 큼 복잡합니다.
• 우리는 품목, 단가 및 수량 입력을 제공하여 대화식으로 만들고 값 중 하나가 변경 될 때 "가격"열을 자동으로 재 계산합니다. 또한 송장에 새 빈 행을 삽입하는 버튼과 데이터를 편집 할 때 자동으로 업데이트되는 "총"필드를 추가합니다.
단일 (빈) 행의 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="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="https://www.php.cn/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;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="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의 디자인은 처음부터 점진적으로 채택 가능성을 가지고 있습니다. 핵심 라이브러리는보기 레이어에만 초점을 맞추고 시작하기 쉽고 다른 라이브러리 또는 기존 프로젝트와 통합됩니다.

jQuery를 vue.js로 교체하는 이유는 무엇입니까?

jQuery는 수년 동안 신뢰할 수있는 도구 였지만 vue.js는 웹 애플리케이션을 구축하는보다 현대적이고 포괄적 인 방법을 제공합니다. vue.js는 구성 요소 기반으로 재사용 성과 유지 가능성을 촉진합니다. 또한 주 관리, 라우팅 등과 같은 도구가있는 더 강력한 생태계가 있습니다. 또한 Vue.js에는 경우에 따라 성능을 향상시킬 수있는 가상 DOM이 있습니다.

jQuery 코드를 vue.js로 변환하는 방법은 무엇입니까?

jQuery 코드를 vue.js로 변환하려면 jQuery 함수의 동등한 vue.js 메소드 및 속성을 이해해야합니다. 예를 들어, jQuery의 $ (document) .ready () 대신 vue의 mounted () 라이프 사이클 후크를 사용합니다. 마찬가지로 HTTP 요청에 jQuery의 $ .ajax () 대신 vue의 axios 또는 fetch를 사용합니다.

하나의 프로젝트에서 jQuery 및 vue.js를 사용할 수 있습니까?

기술적으로 jQuery와 vue.js를 모두 사용할 수 있지만 일반적으로 권장되는 것은 아닙니다. 두 라이브러리가 자체 용어로 DOM을 관리하려고 시도함에 따라 두 가지를 혼합하면 코드 혼란과 잠재적 충돌로 이어질 수 있습니다. 그들 중 하나를 완전히 사용하는 것이 가장 좋습니다.

jQuery와 비교하여 vue.js에서 이벤트를 처리하는 방법은 무엇입니까?

jQuery에서는 일반적으로 .click (), .on () 또는 .bind ()와 같은 메소드를 사용하여 이벤트 리스너를 요소에 첨부합니다. vue.js에서는 V-ON 지시문 (또는 약어 @)을 사용하여 DOM 이벤트를 듣고 트리거시 JavaScript를 실행합니다.

vue.js의 데이터 결합은 jQuery에 비해 어떻게 작동합니까?

jQuery에는 데이터 바인딩이 내장되어 있지 않습니다. 요소를 수동으로 선택하고 내용을 업데이트합니다. 반대로 vue.js에는 강력한 데이터 바인딩 시스템이 있습니다. V- 모델 지침을 사용하여 양식 입력, TextArea 및 Select 요소에 양방향 데이터 바인딩을 생성 할 수 있습니다.

jQuery와 비교하여 vue.js의 요소를 애니메이션하는 방법은 무엇입니까?

jQuery는 .fadein (), .slideup () 등과 같은 내장 애니메이션 메소드가 있습니다. 반면 vue.js는 DOM으로 들어오고 나가는 요소를 애니메이션 할 때 더 큰 유연성을 허용하는 변환 구성 요소를 제공합니다.

jQuery와 비교하여 vue.js에서 HTTP 요청을하는 방법은 무엇입니까?

jQuery에서는 일반적으로 $ .ajax () 메소드를 사용하여 http 요청을합니다. vue.js에는이 방법이 내장되어 있지 않지만 최신 API (예 : Fetch) 또는 Axios와 같은 라이브러리를 사용하여 HTTP 요청을 할 수 있습니다.

vue.js는 jQuery와 비교하여 반응성을 어떻게 처리합니까?

jQuery에는 내장 된 반응 시스템이 없습니다. 데이터가 변경되면 DOM을 수동으로 업데이트합니다. 반면에 vue.js에는 반응성 데이터 시스템이 있습니다. 데이터를 변경하면보기가 자동으로 업데이트됩니다.

jQuery 플러그인을 vue.js 구성 요소로 바꾸는 방법은 무엇입니까?

많은 jQuery 플러그인은 vue.js 구성 요소로 대체 ​​될 수 있습니다. Vue.js에는 사용 가능한 수천 개의 오픈 소스 구성 요소를 제공하는 풍부한 생태계가 있습니다. 고유 한 사용자 정의 구성 요소를 만들 수도 있습니다. 이것은 코드의 재사용 성과 유지 가능성을 향상시킵니다.

요구 사항에 따라 출력을 다시 작성하고 모든 사진의 원래 형식과 위치를 유지했습니다. Codepen에 액세스 할 수 없으므로 실제 Codepen 링크를 제공 할 수 없습니다. "[Codepen Link]"자리 표시자를 작성하고 교체하십시오.

위 내용은 jQuery를 VUE로 바꾸는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!