jQuery에서 vue로 이동합니다

jQuery를 오랫동안 사용해 온 개발자는 최근 VUE로 전환 한 개발자는 두 마이그레이션 과정에 관심이있을 수 있습니다.

우선, 분명해야합니다. jQuery를 포기하는 것이 좋습니다. 이 진술은 지금 인기가 있지만 몇 년 전에 비슷한 기사를 썼습니다 (“jQuery를 사용하지 않습니까?”). JQuery가 귀하의 요구를 충족 할 수 있고 최종 사용자가 웹 사이트를 원활하게 사용할 수 있다면 계속 사용하십시오.

이 안내서는 주로 jQuery를 사용한 수년간의 경험이 있고 VUE에서 동일한 작업을 수행하는 방법을 배우고 자하는 개발자를위한 것입니다. 그래서 jQuery의 "핵심"사용 사례라고 생각하는 것에 집중할 것입니다. 나는 가능한 모든 기능을 다루지 않고 대신 "나는 종종 jQuery를 사용하여 [x]를 수행한다"접근법을 취하는데, 이는 학습을 고려하는 사람들에게 더 공명 할 수 있습니다. (그건 그렇고, 내가 예제를 작성하는 방식은 작업을 달성하는 방법 일뿐입니다. jQuery와 Vue는 모두 같은 목표를 달성 할 수있는 여러 가지 방법을 제공합니다. 이는 좋은 일입니다!)

따라서 jQuery로 전환 할 수있는 고급 작업을 고려해 봅시다.

• DOM에서 요소를 찾으십시오 (나중에 작동하려면)
• DOM의 내용을 변경합니다 (예 : 단락의 텍스트 또는 버튼 클래스)
• 양식 값을 읽고 설정합니다
• 양식 검증 (실제로 위의 조합 만)
• Ajax 호출 및 처리 결과
• 이벤트 처리 (예 : 버튼을 클릭하면 작업을 수행합니다)
• 요소의 스타일을 측정하거나 변경하십시오

물론, jQuery는 그 이상의 것이 있지만, 이러한 용도 (적어도 제 생각에는) 가장 일반적인 사용 사례를 다룹니다. 또한 위 목록에는 많은 상호 상관이 있습니다. 그렇다면 각 기능을 하나씩 비교하여 시작해야합니까? 아니, 걱정하지 마세요. 먼저 VUE 응용 프로그램의 주요 차이점을 소개하겠습니다.

Vue의 "행동 범위"를 정의하십시오

페이지에 jQuery를 추가하면 실제로 공통 웹 개발 작업을 처리하기 위해 스위스 군용 나이프를 JavaScript 코드에 추가합니다. 우리는 우리가 적절하다고 생각하는 순서로 모든 유스 케이스를 실행할 수 있습니다. 예를 들어, 고객은 오늘 양식 검증이 필요할 수 있으며 약 한 달 안에 웹 사이트 헤더에 Ajax 기반 검색 양식을 추가하도록 요청합니다.

Vue는 이와 관련하여 상당한 차이가 있습니다. VUE 프로젝트를 시작할 때 먼저 DOM에 집중하려는 "지역"을 정의합니다. 따라서 간단한 프로토 타입 웹 페이지를 고려해 봅시다.

<header>
  멋진 헤더 콘텐츠</header>
<div id="sidebar">
  일부 사이드 바 컨텐츠</div>

<main>
  <p id="main-content">
    주요 웹 사이트 콘텐츠, 매우 중요한 콘텐츠 ...
  </p>
  <div id="loginForm">
    물론 로그인 양식도 있습니다</div>
</main>

일반적인 jQuery 응용 프로그램에서는 헤더, 사이드 바, 로그인 양식 등을 처리하기위한 코드를 작성할 수 있습니다.

 $ (document) .ready (function () {

  $ ( 'Header') // 뭔가 ...

  $ ( '#sidebar') // 뭔가 ...

  $ ( '#loginform') // 뭔가 ...

});

VUE 응용 프로그램에서 먼저 처리 할 내용을 지정합니다. 고객이 먼저 LoginForm 요소에 유효성 검사를 추가하도록 요청한다고 가정 해 봅시다. VUE 코드는 다음을 지정합니다.

 새로운 vue ({
  el : '#LogInform',
  // 코드가 여기 있습니다 ...
});

즉, 나중에 고객이 사이드 바에 무언가를 추가하기로 결정하면 일반적으로 두 번째 VUE 응용 프로그램이 추가됩니다.

 새로운 vue ({
  el : '#LogInform',
  // 코드가 여기 있습니다 ...
});

새로운 vue ({
  el : '#sidebar',
  // 코드가 여기 있습니다 ...
});

이게 나쁜 일이야? 절대적으로 아닙니다. 우리는 즉시 포장의 이점을 얻었습니다. 실수로 공통 이름이있는 변수를 사용하는 경우 (모두 한) 코드의 다른 부분과 충돌하는 것에 대해 걱정할 필요가 없습니다. 고객이 나중에 다른 요청을 추가하면 이와 같은 고유 한 논리적 VUE 코드 세트를 분리하여 서로를 방해 할 것이라고 확신 할 수 있습니다.

그래서 이것은 좋은 일입니다. 그러나 내가 Vue를 처음 사용하기 시작했을 때 그것은 나에게 일시 중지를 주었다. 이제 우리의 사용 사례를 살펴 보겠습니다.

Dom에서 요소를 찾으십시오

당신이 찾을 수있는 또 다른 흥미롭거나 무서운 측면은 "DOM에서 요소를 찾는 방법"입니다. 이것은 약간 모호하지만 구체적인 예를 고려해 봅시다. 우리는 버튼이 있고 클릭하면 무언가가 일어납니다. 간단한 예는 다음과 같습니다.

 <button id="myButton">나를 클릭하세요!</button>

 $ (document) .ready (function () {

  $ ( '#myButton'). 클릭 (function () {
    경고 (1);
  });

});

이제 Vue가 어떻게 구현되는지와 비교해 봅시다.

<div id="app">
  <button>나를 클릭하세요!</button>
</div>

const app = new vue ({
  el : '#app',
  방법 : {
    dosomething : function () {
      경고 (1);
    }
  }
});

VUE 응용 프로그램은 장점이지만 태그와 호출 할 기능간에 작업 ( "클릭")을 직접 연결하는 방법을 알고 있어야합니다. Vue의 코드는 DOM과 관련이 없습니다 (EL 부품 제외, 우리는 그것이 작동 해야하는 위치를 정의합니다). Vue에 대해 가장 많이 확신 한 것 중 하나입니다. 무슨 일이 일어나고 있는지 이해하는 것이 더 쉽습니다. 또한 ID 값과 선택기에 대해 너무 걱정할 필요가 없습니다. 버튼의 클래스 또는 ID를 변경하면 코드로 돌아가서 선택기 업데이트에 대해 걱정할 필요가 없습니다.

또 다른 예를 고려해 봅시다 : DOM에서 텍스트 찾기 및 변경. 버튼을 클릭 한 후 DOM의 다른 부분의 텍스트가 변경 될 것이라고 상상해보십시오.

 <button id="myButton">나를 클릭하세요!</button>

$ (document) .ready (function () {

  $ ( '#myButton'). 클릭 (function () {
    $ ( '#result'). text ( '당신은 나를 클릭했습니다. 감사합니다!');
  });

});

새 스팬을 추가했는데 이제 버튼을 클릭하면 다른 선택기를 사용하여 jQuery 유틸리티 메소드를 사용하여 텍스트를 변경합니다. 이제 VUE 버전을 고려하십시오.

<div id="app">
  <button>나를 클릭하세요!</button>
  <span>{{resulttext}}</span>
</div>

const app = new vue ({
  el : '#app',
  데이터 : {
    resultText : ''
  },
  방법 : {
    dosomething : function () {
      this.resulttext = '당신은 나를 클릭했습니다. 감사합니다! ';;
    }
  }
});

이 예에서는 vue의 템플릿 언어 (강조 표시된 줄)를 사용하여 스팬 내부에서 변수를 렌더링 할 수 있도록 지정합니다. 이제 버튼을 클릭하면 값이 변경되면 스팬의 내부 텍스트가 자동으로 변경됩니다.

그건 그렇고, vue는 v-on 속성의 약어를 지원하므로 예제의 버튼을 @click = "dosomething"으로 대체 할 수 있습니다.

양식 변수를 읽고 쓰십시오

처리 양식은 아마도 JavaScript에서 우리가 할 수있는 가장 일반적이고 유용한 일 중 하나 일 것입니다. JavaScript 이전에도 초기의 "웹 개발"의 대부분은 양식 제출을 처리하기 위해 Perl 스크립트를 작성하는 것이 었습니다. 사용자 입력을 받아들이는 주요 방법으로서 양식은 웹에 중요했으며 여전히 꽤 오랫동안 경우에도 불구하고. 일부 양식 필드를 읽고 다른 필드를 설정하는 간단한 jQuery 예제를 고려해 봅시다.

= 합계를 요청하십시오

$ (document) .ready (function () {
  $ first = $ ( '#first');
  $ second = $ ( '#second');
  $ sum = $ ( '#sum');
  $ button = $ ( '#sumbutton');

  $ button.on ( 'click', function (e) {
    e.preventDefault ();
    총 = parseint ($ first.val (), 10) parseint ($ Second.val (), 10);
    $ sum.val (총);
  });
});

이 코드는 jQuery가 Val () 메소드를 통해 읽고 쓰는 방법을 보여줍니다. 결국 DOM에서 4 개의 항목 (세 가지 형태 필드 및 버튼 모두)을 가져 와서 간단한 수학 작업을 사용하여 결과를 생성합니다. 이제 VUE 버전을 고려하십시오.

= 합계를 요청하십시오

새로운 vue ({
  el : '#MyForm',
  데이터 : {
    첫째 : 0,
    두 번째 : 0,
    합 : 0
  },
  방법 : {
    dosum : function () {
      this.sum = this.first this.second;
    }
  }
})

이것은 흥미로운 Vue 바로 가기를 소개합니다. 첫째, V-Model은 VUE가 DOM과 JavaScript의 값간에 양방향 데이터 바인딩을 만드는 방법입니다. 데이터 블록 변수는 양식 필드와 자동으로 동기화됩니다. 데이터를 변경하면 양식이 업데이트됩니다. 양식을 변경하면 데이터가 업데이트됩니다. .Number는 VUE에게 양식 필드의 상속 문자열 값을 숫자로 취급하도록 지시하는 깃발입니다. 우리가 그것을 생략하고 추가 작업을 수행하면 산술 작동 대신 문자열 추가가 표시됩니다. 나는 거의 1 세기 동안 JavaScript를 사용해 왔으며 여전히 이것을 엉망으로 만들고 있습니다.

또 다른 영리한 "기술"은 @click.prevent입니다. 먼저 @Click은 버튼의 클릭 핸들러를 정의 한 다음 .prevent는 브라우저가 양식의 기본 동작을 제출하지 못하게합니다 (event.preventDefault ()와 동일).

마지막 요점은 버튼에 바인딩 된 복합 메소드를 추가하는 것입니다. 데이터 변수 만 사용합니다 (VUE는이 범위에서 제공됩니다).

이것은 주로 개인적인 느낌이지만, Vue에 썼을 때 스크립트에 쿼리 선택기가 부족하고 HTML이 어떻게하는지 더 명확하게 할 수있는 방법이 마음에 듭니다.

마지막으로 버튼을 완전히 제거 할 수도 있습니다.

=

새로운 vue ({
  el : '#MyForm',
  데이터 : {
    첫째 : 0,
    둘째 : 0
  },
  계산 : {
    합 : function () {
      이것을 반환하십시오.
    }
  }
})

VUE의 더 멋진 기능은 계산 된 특성입니다. 파생 값이 업데이트되는시기를 식별하는 인형입니다. 위의 코드에서는 두 양식 필드 중 하나가 변경 되 자마자 합계가 업데이트됩니다. 이것은 형태 필드 외부에서 작동합니다. 우리는 다음과 같이 합계를 렌더링 할 수 있습니다.

 총은 {{sum}}입니다.

Ajax 사용

칭찬할만한 Ajax를 사용하는 것이 얼마나 쉬운 지. 사실, 나는 아마도 "기본"방식으로 Ajax를 사용했다고 말할 수 있습니다. (궁금한 점이 있다면 xmlhttprequest의 사양을 살펴볼 수 있고 직접 피할 수있을 것입니다.) jQuery의 간단한 $ .get (...) 메소드는 많은 경우에 작동하며 $ .ajax ()도 더 복잡한 것이 필요할 때 쉽게 만듭니다. jQuery가 잘하는 또 다른 일은 JSONP 요청을 처리하는 방법입니다. 대부분의 JSONP는 현재 CORS를 사용하지 않아도되지만 JSONP는 다른 도메인에서 API에 대한 요청을 처리하는 방법입니다.

그렇다면 Vue는 Ajax를 더 쉽게 만들기 위해 무엇을 했습니까? 아무것도 아님!

좋아, 이것은 끔찍하게 들리지만 그렇지 않습니다. HTTP 요청을 처리하는 데 사용할 수있는 많은 옵션이 있으며 Vue.js는 개발자가 스스로 처리하는 방법을 결정할 수 있도록보다 불가지론적인 접근 방식을 취합니다. 그렇습니다. 더 많은 작업을 의미하지만 몇 가지 훌륭한 옵션이 있습니다.

가장 먼저 고려해야 할 것은 VUE 커뮤니티에서 매우 인기있는 약속 기반 라이브러리 인 Axios입니다. 다음은 행동중인 간단한 예입니다 (Readme에서 가져온).

 axios.get ( '/user? id = 12345')
  . 그런 다음 (함수 (응답) {
    // console.log (응답);
  })
  .catch (함수 (오류) {
    // 오류 핸들 에러 Console.log (오류);
  })
  . 그런데 (function () {
    // 항상 실행});

Axios는 확실히 게시물 요청을 지원하며 다른 많은 옵션뿐만 아니라 헤더를 지정할 수 있습니다.

Axios는 VUE 개발자들 사이에서 매우 인기가 있지만 정말 마음에 들지 않습니다. (적어도 아직은 아닙니다.) 대신, 나는 페치를 선호합니다. Fetch 는 외부 라이브러리가 아니라 HTTP 요청을 수행하는 표준 웹 방법입니다. Fetch는 브라우저의 약 90%에서 잘 지원되지만 완전히 안전 하지는 않지만 필요한 경우 항상 Polyfill을 사용할 수 있습니다.

이것은 우리가 여기서 논의하는 범위를 완전히 벗어나지 만 Kingsley Silas는 Axios를 사용하고 React와의 가져 오기에 대한 훌륭한 안내서를 작성했습니다.

Axios와 마찬가지로 Fetch는 또한 약속을 기반으로하며 친근한 API를 가지고 있습니다.

 fetch ( 'http://example.com/movies.json')
  . 그런 다음 (함수 (응답) {
    return response.json ();
  })
  .
    console.log (json.stringify (myjson));
  });

Axios와 Fetch는 모든 유형의 HTTP 요청을 포함하므로 어느 중 하나가 많은 요구에 적합합니다. 간단한 비교를 살펴 보겠습니다. 이것은 Star Wars API를 사용한 간단한 jQuery 데모입니다.

<h1 id="스타-워즈-영화"> 스타 워즈 영화</h1>

$ (document) .ready (function () {
  $ .get ( 'https://swapi.com/api/films', function (res) {
    list = '';
    result.results.foreach (function (r) {
      목록 =`

$ {r.title}

`;; }); $ ( '#films'). html (목록); }); });

위의 예에서는 $ .get을 사용하여 API에 액세스하고 영화 목록으로 돌아갑니다. 그런 다음 해당 데이터를 사용하여 Li 태그 요소로 제목 목록을 생성하고 모두 UL 블록에 삽입합니다.

이제 VUE를 사용하여 예제를 고려해 봅시다.

<div id="app">
  <h1 id="스타-워즈-영화">스타 워즈 영화</h1>
  <ul><li v-for="film in films">{{film.title}}</li></ul>
</div>

const app = new vue ({
  el : '#app',
  데이터 : {
    영화 : []
  },
  생성 된 () {
    fetch ( 'https://swapi.com/api/films')
      . then (res => res.json ())
      . 그런데 (res => {
        this.films = result.results;
      });
  }
})

이 가장 중요한 부분은 아마도 V-FOR 템플릿을 사용하는 것입니다. VUE는 레이아웃 (적어도 JavaScript)에 신경 쓰지 않습니다. 데이터는 API에서 가져옵니다. 변수가 할당됩니다. 레이아웃이 표시를 담당합니다. 나는 항상 내 JavaScript에서 HTML을 사용하는 것을 싫어했으며 jQuery는이 문제에 대한 해결책을 가지고 있지만 VUE에 베이킹하면 자연스러운 선택이됩니다.

완전한 (약간 사소한) 예

더 깊은 이해를 위해보다 현실적인 예를 고려해 봅시다. 고객은 제품 API에 대한 높은 수준의 Ajax 지원 프론트 엔드 검색 인터페이스를 구축하도록 요청했습니다. 함수 목록에는 다음이 포함됩니다.

• 이름 및 제품 범주 별 필터링을 지원합니다
• 검증 양식, 검색어 또는 범주를 제공하도록 요구합니다.
• API가 액세스하는 경우 사용자에게 메시지를 표시하고 제출 버튼을 비활성화합니다.
• 완료되면 처리 보고서에 제품이 표시되지 않거나 매치가 나열되어 있습니다.

jQuery 버전부터 시작하겠습니다. 첫 번째는 html입니다.

찾다 범주 모두 음식 게임 찾다

두 개의 필터와 두 개의 div가있는 양식이 있습니다. 하나는 오류를 검색하거나보고 할 때 임시 상태로 사용되며 다른 하나는 결과를 렌더링하는 데 사용됩니다. 이제 코드를 확인하십시오.

 // ... (코드가 너무 길어, 여기에서 생략) ...

이 코드는 먼저 사용하려는 각 DOM 프로젝트 (형식 필드, 버튼 및 div)에 대한 변수 세트를 만듭니다. 논리의 핵심은 버튼의 클릭 핸들러에 있습니다. 우리는 모든 것이 작동하는지 확인하고 API에 요청을 게시합니다. 반환되면 일치하지 않으면 결과를 렌더링하거나 메시지를 표시합니다.

이제 VUE 버전을 고려해 봅시다. 다시, 레이아웃부터 시작하겠습니다.

<div id="app">
  <form>
    <p>
      <label for="search">찾다</label>
      <input type="text" v-model="search" id="search">
    </p>
    <p>
      <label for="category">범주</label>
      <select v-model="category" id="category">
        <option value="">모두</option>
        <option value="Food">음식</option>
        <option value="Games">게임</option>
      </select>
    </p>
    <button :disabled="searchBtnDisabled">찾다</button>
  </form>

  <div v-html="status"></div>
  <ul v-if="results"><li v-for="result in results">{{result.name}}</li></ul>
</div>

상단부터 시작하여 변경 사항은 다음과 같습니다.

• Vue가 작동하는 곳을 알 수 있도록 레이아웃을 div로 감싸십시오.
• 양식 필드에 V- 모델을 사용하여 데이터를 쉽게 처리하십시오.
• @click.prevent를 사용하여 기본 검색 작업을 처리하십시오.
• 사용 : 버튼의 비활성화 상태를 VUE 응용 프로그램의 값에 바인딩하려면 비활성화했습니다 (나중에 수행하는 작업을 볼 수 있습니다).
• 상태 값은 이전 예제와 약간 다릅니다. JQuery는 DOM 프로젝트에서 텍스트를 설정하고 HTML의 다른 방법을 설정하는 특정 방법을 가지고 있지만 vue는 렌더링 할 값에 HTML을 할당 할 때 V-HTML을 사용해야합니다. html과 함께 {{status}}을 사용하려고하면 태그가 빠져 나옵니다.
• 마지막으로, 반복은 V-FOR로 조건부로 렌더링 된 V-IF를 사용하여 처리됩니다.

이제 코드를 살펴 보겠습니다.

 // ... (코드가 너무 길어, 여기에서 생략) ...

언급 할 가치가있는 첫 번째 코드 블록은 데이터 필드 세트입니다. 일부는 필드를 형성하는 반면, 다른 일부는 결과, 상태 메시지 등에 매핑됩니다. SearchProducts 메소드는 jQuery 버전에서와 동일한 것을 처리하지만 일반적으로 DOM에 직접 바인딩되는 코드는 훨씬 적습니다. 예를 들어, 결과가 변하지 않는 목록에 나열되어 있음을 알고 있더라도 코드 자체는 이에 관심이 없습니다. 그것은 단순히 값을 할당하며 값을 렌더링하는 데 책임이 있습니다. 전반적으로 JavaScript 코드는 jQuery 코드보다 논리에 더 중점을 둡니다.

jQuery는 사라졌고, Vue는 영원히 지속됩니다!

좋아, 그것은 약간 과장되었습니다. 내가 처음에 말했듯이, 당신이 jQuery를 사용하고 싶고 그것이 당신에게 효과적이라면, 나는 당신이 아무것도 바꾸어야한다고 생각하지 않습니다.

그러나 Vue는 jQuery를 사용하는 데 익숙한 사람들에게 좋은 "다음 단계"처럼 느껴집니다. VUE는 복잡한 응용 프로그램을 지원하며 발판 및 건축 프로젝트를위한 강력한 명령 줄 도구를 가지고 있습니다. 그러나 간단한 작업을 위해 Vue는 훌륭한 "현대적인 jQuery"대안으로서 개발 도구가되었습니다!

위 내용은 jQuery에서 vue로 이동합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!