JQueryをVueに置き換える方法

jqueryに別れを告げ、vue.jsを受け入れる：よりシンプルで効率的なWebアプリケーションを構築する

ゼロからvue.jsを学びたいですか？ SitePoint Premiumに参加して、Vue.jsの基本、プロジェクトの実践、ヒントなどをカバーするVue.jsの本の完全なコレクションを月額14.99ドルで入手してください！ 多くの開発者は、簡単なアプリケーションを構築する際にまだjQueryに依存しています。時々、ページに少量の対話性を追加する必要がある場合がありますが、JavaScriptフレームワークを使用して複雑すぎると思われます - 追加のコードボリューム、ボイラープレートコード、ビルドツール、モジュールパッカーなど。 CDNからjQueryを紹介することは、選択できる簡単なようです。

この記事は、比較的単純なプロジェクトでさえ、vue.js（以下VUEと呼ばれる）を使用することは何の努力も必要ありませんが、より良いコードをより速く書くのに役立つと納得させることを目的としています。それぞれjQueryとvueを使用してエンコードする例として簡単な例を挙げて、その違いを徐々に示します。

キーポイント

基本的なプロジェクトのためにjQueryをvue.jsに置き換えることは難しくなく、より良いコードをより良く書くことができます。

• vue.jsを使用すると、UIをそれを駆動するロジック/データから明確に分離し、コードを理解してテストしやすくします。
• vue.jsのUIは宣言的です。つまり、開発者は、DOMを実装する方法に注意を払うことなく、見たいものに集中する必要があります。
• vue.jsとjqueryのサイズは似ていますが、Vue.jsは、より便利な開発エクスペリエンスと読みやすいコードを提供します。
• Vue.jsは、複雑なフロントエンドアプリケーションに結合できるモジュラーで再利用可能なUIコンポーネントを作成できます。
何を構築するか

この記事では、SparkSuiteが提供するオープンソーステンプレートを使用して、簡単なオンライン請求書を作成します。うまくいけば、これは別のTo Doリストよりも革新的であり、理解しやすい間VUEを使用することの利点を示すのに十分なほど複雑であることを願っています。

アイテム、単価、および数量入力を提供することにより、インタラクティブにし、値の1つが変更されたときに「価格」列を自動的に再計算します。また、新しい空白の行を請求書に挿入するボタンと、データの編集時に自動的に更新される「合計」フィールドも追加します。

単一の（空の）行のHTMLが次のようになるようにテンプレートを変更しました。

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 まず、jQueryを使用してこの関数を実装する方法を見てみましょう。

リスナーをテーブル自体に添付し、「単位コスト」または「数量」値が変更されると、計算されたトーダル機能が実行されます。

<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 上記のコードでは、ライン内のすべての入力要素への参照を取得し、2番目と3番目の要素を掛けてサブテルを取得します。次に、この値を行の最後のセルに挿入します。

<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>

ヘルパー関数もあり、サブテルと合計の両方が2つの小数にフォーマットされ、通貨シンボルが付いていることを確認します。

<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>

最後に、[行を追加]ボタンのクリックハンドラーがあります。ここで行うことは、最後のプロジェクト行を選択してコピーを作成することです。クローン型の行への入力はデフォルト値に設定され、新しい最後の行として挿入されます。また、ユーザーを促進し、最初の入力にフォーカスを設定して、タイピングを開始できるようにすることもできます。

以下は完全なjQueryデモンストレーションです。 JQueryの欠点

では、このコードの何が問題になっていますか？または、どこで改善できますか？

VueやReactのような新しいライブラリを聞いたことがあるかもしれません。もちろん、このjQueryコードを見ると、コードのほとんどは、DOMの操作方法に関する指示のリストです。コードの各部分である「何」の目的は、「それを行う方法」の詳細を区別することがしばしば困難です。もちろん、コードを名前が付いた関数に分解することでコードの意図を明確にすることができますが、このコードはしばらくすると再考するためにある程度の努力が必要です。

この種のコードのもう1つの問題は、DOM自体にアプリケーション状態を保存することです。注文プロジェクトに関する情報は、UIを構成するHTMLの一部としてのみ存在します。これは、1つの場所のみに情報を表示する場合、大きな問題のようには見えませんが、アプリケーションの複数の場所に同じデータを表示する必要があると、各セクションが同期し続けることを確認します。単一の事実源はありません。

私たちがDOMの外側に状態を救わず、これらの問題を回避することを止めることはできませんが、Vueのようなライブラリは、優れたアーキテクチャとクリーナーの作成を促進する機能と構造を提供します。

vue

に変換します

では、VUEを使用してこの機能を再現するにはどうすればよいですか？

前述したように、Vueはモジュールパッカー、翻訳者を使用するか、1つのファイルコンポーネント（.vueファイル）を選択して開始する必要はありません。 jQueryのように、CDNのライブラリを単純に含めることができます。スクリプトタグを置き換えることから始めましょう：

次に、新しいVUEインスタンスを作成する必要があります：

ここでは、vueを管理したいドキュメントのどの部分を識別するために、セレクター（jqueryと同じように）であるELオプションを提供する必要があります。

<code class="language-javascript">function formatAsCurrency(amount) {
  return `$${Number(amount).toFixed(2)}`;
}</code>

ページ全体（たとえば、単一ページのアプリケーションの場合）または単一の

から始まるものをVueに処理することができます。請求書の例では、vueにHTMLテーブルを制御させます。

<code class="language-javascript">$('.btn-add-row').on('click', () => {
  const $lastRow = $('.item:last');
  const $newRow = $lastRow.clone();

  $newRow.find('input').val('');
  $newRow.find('td:last').text('<pre class="brush:php;toolbar:false"><code class="language-html"></code>

.00'); $newRow.insertAfter($lastRow); $newRow.find('input:first').focus(); });データ

3つの例からVUEインスタンスに関連するデータを追加しましょう：

<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

データ属性は、アプリケーション状態を保存する場所です。これには、アプリケーションに使用するデータだけでなく、UIステータスに関する情報（たとえば、タブグループの現在活動的な一部、またはアコーディオンが拡張または崩壊したかどうか）も含まれます。

Vueは、アプリケーションの状態をその表現（つまり、DOM）から分離し、1つのPlace-A単一の事実源に集中することを奨励しています。

テンプレートの変更

データオブジェクトからアイテムを表示するようにテンプレートを設定しましょう。 Vueにテーブルを制御したいと言っているので、HTMLのテンプレート構文を使用して、Vueをレンダリングして操作する方法を伝えることができます。

v-forプロパティを使用して、アイテム配列内の各アイテムのHTMLをレンダリングできます。

<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>

Vueは、v -Forによって構築された配列（またはオブジェクト）に渡す各要素に対してこのタグを繰り返し、この場合はループ内の各要素を参照することができます。 Vueはデータオブジェクトのすべてのプロパティを観察しているため、アイテムのコンテンツが変更されると、マークアップを動的に変更します。アイテムをアプリケーションステータスに追加または削除するだけで、VUEはUIの更新を担当します。

また、ユーザーがアイテムの説明、単価、数量に入力できるように、入力ボックスを追加する必要があります。

ここでは、V-Modelプロパティを使用して、プロジェクトモデルの入力とプロパティの間に双方向のバインディングを設定します。これは、入力を変更すると、プロジェクトモデルの対応するプロパティが更新され、その逆があることを意味します。

<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>

最後のセルでは、二重ブレース{{{}}を使用してテキストを出力します。有効なJavaScript式をブレース内に使用できるため、2つのプロジェクトプロパティを掛けて結果を出力します。同様に、Vueはデータモデルを観察しているため、いずれかのプロパティを変更すると、式が自動的に再計算されます。

イベントと方法

今では、アイテムのコレクションをレンダリングするためのテンプレートをセットアップしましたが、どのようにして新しい行を追加しますか？ Vueは空の行をレンダリングするためにアイテムに何かをレンダリングするため、必要なデフォルト値でオブジェクトをアイテムアレイに押し込むだけです。

テンプレートでアクセスできる関数を作成するには、メソッドオブジェクトのプロパティとしてVUEインスタンスにそれらを渡す必要があります。

アイテムアレイに新しいアイテムを追加するために呼び出すことができるaddrowメソッドを定義しましょう：

<code class="language-javascript">function formatAsCurrency(amount) {
  return `$${Number(amount).toFixed(2)}`;
}</code>

作成したメソッドは、Vueインスタンス自体に自動的にバインドされるため、データオブジェクトのプロパティやその他のメソッドにこれのプロパティとしてアクセスできることに注意してください。

では、メソッドがあります。[行の追加]ボタンをクリックすると、どのように呼び出されますか？テンプレート内の要素にイベントリスナーを追加するための構文はv-on：event-name：

<code class="language-javascript">$('.btn-add-row').on('click', () => {
  const $lastRow = $('.item:last');
  const $newRow = $lastRow.clone();

  $newRow.find('input').val('');
  $newRow.find('td:last').text('<pre class="brush:php;toolbar:false"><code class="language-html"></code>

.00'); $newRow.insertAfter($lastRow); $newRow.find('input:first').focus(); });

vueは、上記のコードで行ったように、v-on：の代わりに @を使用できるようにショートカットを提供します。ハンドラーの場合、VUEインスタンスで任意の方法を指定できます。

コンピューティングプロパティ

<code class="language-javascript">const app = new Vue({
  el: 'table'
});</code>

請求書の下部に合計を表示する必要があります。おそらくこれをテンプレート自体で行うことができます。前述したように、Vueはカーリーブレースの間にJavaScriptステートメントを置くことができます。ただし、テンプレートの外側の非常に基本的なロジックを超えて何かを維持することをお勧めします。

このために別の方法を使用できますが、計算されたプロパティがより適切であると思います。作成方法と同様に、機能を含む計算されたオブジェクトをVUEインスタンスに渡します。これらの関数の結果をテンプレートで使用したいと考えています。

これで、この計算されたプロパティをテンプレートで参照できます。

<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

気づいたように、計算されたプロパティはデータのように扱うことができます。しかし、計算されたプロパティを使用することには別の利点があります。Vueは、返品値をキャッシュするのに十分賢く、データプロパティの1つが変更に依存する場合にのみ関数を再計算します。

<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>

メソッドを使用して合計を計算すると、テンプレートが再レンダリングされるたびに計算が実行されます。計算されたプロパティを使用しているため、アイテムの数量または価格フィールドが変更された場合にのみ、合計が再計算されます。

フィルター

実装に小さなエラーがあることに気付いたかもしれません。ユニットコストは整数ですが、総総額と小計は表示されたときに表示されません。私たちが本当に望んでいるのは、これらの数字を2つの小数点として常に表示することです。

サブタルを計算して合計を計算するコードを変更するのではなく、Vueは、このような一般的なフォーマットタスクを処理する良い方法を提供します：フィルター。

あなたが推測したかもしれないように、あなたが推測したかもしれません、フィルターを作成するために、私たちは単に私たちのVueのインスタンスのキーを持ってオブジェクトを渡すだけです：

ここでは、value.tofixed（2）を呼び出す通貨と呼ばれる非常にシンプルなフィルターを作成し、結果を返します。次のように、テンプレートの任意の出力に適用できます。

以下は完全なVueデモです：

<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>

Codepen link

<code class="language-javascript">function formatAsCurrency(amount) {
  return `$${Number(amount).toFixed(2)}`;
}</code>

要約

コードの2つのバージョンを並べて比較し、Vueアプリケーションのいくつかの側面が顕著です。

UIとそれを駆動するロジック/データとの間の明確な分離：コードは理解しやすく、テストしやすいです。

UIは宣言的です。それを実装するために操作する方法に注意を払うことなく、あなたが見たいものを気にするだけです。

2つのライブラリのサイズ（KB）はほぼ同じです。もちろん、カスタムビルドでjQueryを合理化できますが、請求書の例のような比較的単純なプロジェクトであっても、開発の容易さとコードの読みやすさはこの違いを正当化すると思います。

vueは、ここで紹介していない多くのことを行うことができます。その利点は、複雑なフロントエンドアプリケーションに結合できるモジュラーで再利用可能なUIコンポーネントを作成できることです。 Vueを詳細に知りたい場合は、Vue.js 2.0フレームワークで起きて実行していることを確認することをお勧めします。

JQueryをVue

に置き換えることに関する

FAQ

jQueryとvue.jsの主な違いは何ですか？

jQueryは、高速でコンパクトで機能が豊富なJavaScriptライブラリです。 HTMLドキュメントの通過と操作、イベント処理、アニメーションを簡単にし、その使いやすいAPIはさまざまなブラウザーで実行できます。一方、Vue.jsは、ユーザーインターフェイスを構築するためのプログレッシブJavaScriptフレームワークです。他の全体的なフレームワークとは異なり、Vueの設計は当初から採用されています。コアライブラリはビューレイヤーのみに焦点を当てており、簡単に開始でき、他のライブラリや既存のプロジェクトと統合します。

jqueryをvue.jsに置き換えることを検討する必要があるのはなぜですか？

jQueryは長年にわたって信頼できるツールでしたが、Vue.JSは、Webアプリケーションを構築するためのより近代的で包括的な方法を提供します。 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を使用します。

1つのプロジェクトでjqueryとvue.jsを使用できますか？

技術的にはjQueryとvue.jsの両方を使用できますが、これは通常推奨されません。両方のライブラリが独自の条件でDOMを管理しようとするため、2つを混ぜるとコードの混乱と潜在的な競合につながる可能性があります。そのうちの1つを完全に使用するのが最善です。

jQueryと比較して、vue.jsでイベントを処理する方法は？

jqueryでは、.click（）、.on（）、または.bind（）などのメソッドを使用して、イベントリスナーを要素に添付します。 Vue.jsでは、V-onディレクティブ（またはその略語 @）を使用してDOMイベントをリッスンし、トリガーされたときにJavaScriptを実行します。

vue.jsのデータバインディングは、jqueryと比較してどのように機能しますか？

jQueryには、組み込みのデータバインディングがありません。要素を手動で選択し、その内容を更新します。それどころか、Vue.jsには強力なデータ結合システムがあります。 V-Modelディレクティブを使用して、フォーム入力、Textarea、および選択要素に双方向データバインディングを作成できます。

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リンク]」プレースホルダーを自分で作成して交換してください。

以上がJQueryをVueに置き換える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。