JQueryからVueへの移動を行います

jqueryを長い間使用しており、最近VUEに変わった開発者は、両方の移行プロセスに興味があるかもしれません。

まず第一に、私は明確である必要があります、私はあなたがjqueryをあきらめることをお勧めしません。この声明は現在人気がありますが、私は数年前に同様の記事を自分で書きました（「どのように（jqueryを使用しないか））。 jQueryがニーズを満たすことができ、エンドユーザーがあなたのウェブサイトをスムーズに使用できる場合は、それを使用し続けます。

このガイドは、主にJQueryを使用して長年の経験があり、Vueで同じタスクを達成する方法を学びたい開発者向けです。ですから、私はjQueryの「コア」ユースケースだと思うものに焦点を当てます。私はすべての可能な機能をカバーするわけではありませんが、代わりに「私はjqueryで[x]をしばしばします」というアプローチを取ります。 （ところで、私が例を書く方法は、タスクを達成するための単なる方法であることに注意してください。JQueryとVueの両方が同じ目標を達成するための複数の方法を提供しています。これは良いことです！）

それでは、jQueryに頼るかもしれないいくつかの高度なタスクを考えてみましょう。

• DOM内の要素を見つける（後でそれらを操作する）
• DOMのコンテンツを変更します（たとえば、段落のテキストまたはボタンのクラス）
• フォーム値を読み取り、設定します
• フォーム検証（実際には上記の単なる組み合わせ）
• Ajaxの呼び出しと処理結果
• イベント処理（たとえば、ボタンがクリックされたときにアクションを実行します）
• 要素のスタイルを測定または変更します

もちろん、jQueryにはそれ以上のものがありますが、これらの使用は（少なくとも私の意見では）最も一般的なユースケースをカバーしています。また、上記のリストには多くの相互相関があることに注意してください。それでは、各機能を1つずつ比較することから始めるべきですか？いいえ、心配しないでください。最初にVUEアプリケーションの主な違いを紹介しましょう。

Vueの「行動の範囲」を定義します

ページにjQueryを追加すると、実際にJavaScriptコードにスイスアーミーナイフを追加して、一般的なWeb開発タスクを処理します。適切だと思われる任意の順序で、あらゆるユースケースを実行できます。たとえば、顧客は今日フォーム検証を必要とする場合があり、その後、約1か月で、Ajaxベースの検索フォームをWebサイトのヘッダーに追加するように依頼する場合があります。

Vueはこの点で大きな違いがあります。 VUEプロジェクトを開始するとき、最初にDOMで焦点を当てたい「地域」を定義します。それでは、単純なプロトタイプのWebページを考えてみましょう。

<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アプリケーションでは、最初に何を処理するかを指定します。クライアントが最初にログインフォーム要素に検証を追加するように要求するとします。私たちのVueコードはこれを指定します：

新しいVue（{
  EL： '#LoginForm'、
  //コードはここにあります...
}）;

これは、顧客が後でサイドバーに何かを追加することを決定した場合、通常、 2番目のVUEアプリケーションを追加することを意味します。

新しいVue（{
  EL： '#LoginForm'、
  //コードはここにあります...
}）;

新しいVue（{
  EL： '#sidebar'、
  //コードはここにあります...
}）;

これは悪いことですか？絶対にそうではありません。すぐにパッケージングのメリットを獲得しました。誤って共通名の変数を使用している場合（私たち全員がしました）、コードの他の部分と矛盾することを心配する必要はありません。顧客が後で別のリクエストを追加したら、このようなユニークで論理的なVUEコードのセットを分離して、お互いに干渉することを保証できるようにします。

だから、これは良いことです。しかし、私が最初にVueを使い始めたとき、それは私に一時停止を与えました。それでは、ユースケースを見てみましょう。

DOMで要素を見つけます

あなたが見つけるもう1つの興味深いまたは恐ろしい側面は、「DOMで要素を見つける」方法です。これは少しあいまいですが、特定の例を考えてみましょう。ボタンがあり、クリックすると何かが起こります。ここに簡略化された例があります：

<button id="myButton">私をクリックしてください！</button>

 $（document）.ready（function（）{

  $（ '＃mybutton'）。クリック（function（）{
    アラート（1）;
  }）;

}）;

それでは、Vueがどのように実装するかと比較しましょう。

<div id="app">
  <button>私をクリックしてください！</button>
</div>

const app = new Vue（{
  EL： '＃app'、
  方法：{
    DOSOMTHING：function（）{
      アラート（1）;
    }
  }
}）;

VUEアプリケーションは冗長ですが、タグと呼び出される関数間で操作を直接接続する方法（「クリック」）をどのように接続するかに注意してください。 Vueのコードには、DOMとの関連性はありません（ELパーツを除き、機能する必要がある場所を定義します）。それは私にヴェーについて最も確信してくれたものの1つです。何が起こっているのかを理解する方が簡単です。また、ID値とセレクターについてあまり心配する必要はありません。ボタンのクラスまたはIDを変更した場合、コードに戻ってセレクターの更新を心配する必要はありません。

別の例を考えてみましょう：DOMのテキストを見つけて変更します。ボタンをクリックした後、DOMの別の部分のテキストが変更されるようになると想像してください。

<button id="myButton">私をクリックしてください！</button>

$（document）.ready（function（）{

  $（ '＃mybutton'）。クリック（function（）{
    $（ '＃result'）。テキスト（ '私をクリックしました、ありがとう！'）;
  }）;

}）;

新しいスパンを追加しましたが、ボタンをクリックすると、別のセレクターを使用してそれを見つけ、jQueryユーティリティメソッドを使用して内部のテキストを変更します。次に、Vueバージョンを検討してください。

<div id="app">
  <button>私をクリックしてください！</button>
  <span>{{resterText}}</span>
</div>

const app = new Vue（{
  EL： '＃app'、
  データ： {
    結果テキスト： ''
  }、
  方法：{
    DOSOMTHING：function（）{
      this.resultText = 'あなたは私をクリックしました、ありがとう！ ';
    }
  }
}）;

この例では、VUEのテンプレート言語（強調表示された行）を使用して、スパン内で変数をレンダリングすることを指定します。これで、ボタンがクリックされると、値が変更され、スパンの内部テキストが自動的に変更されます。

ちなみに、Vueはv-on属性の略語をサポートするため、例のボタンは @click = "dosomething"に置き換えることができます。

フォーム変数の読み取りと書き込み

処理フォームは、おそらくJavaScriptでできる最も一般的で有用なことの1つです。 JavaScriptの前でさえ、私の初期の「Web開発」のほとんどは、フォームの提出を処理するためにPerlスクリプトを作成していました。ユーザー入力を受け入れる主要な方法として、フォームはWebにとって重要であり、かなり長い間当てはまる可能性があります。いくつかのフォームフィールドを読み取り、別のフィールドを設定する簡単なjQueryの例を考えてみましょう。

= 合計を尋ねます

$（document）.ready（function（）{
  $ first = $（ '＃first'）;
  $ second = $（ '＃second'）;
  $ sum = $（ '＃sum'）;
  $ button = $（ '＃sumbutton'）;

  $ button.on（ 'click'、function（e）{
    E.PreventDefault（）;
    total = parseint（$ first.val（）、10）parseint（$ second.val（）、10）;
    $ sum.val（合計）;
  }）;
}）;

このコードは、jQueryがVAL（）メソッドを読み、書き込む方法を示しています。 DOMから4つのアイテム（3つのフォームフィールドとボタンすべて）を使用し、単純な数学操作を使用して結果を生成することになります。次に、Vueバージョンを検討してください。

= 合計を尋ねます

新しいVue（{
  EL： '#myform'、
  データ： {
    最初：0、
    2番目：0、
    合計：0
  }、
  方法：{
    dosum：function（）{
      this.sum = this.first this.second;
    }
  }
}）

これにより、いくつかの興味深いVUEショートカットが紹介されます。まず、V-Modelは、VUEがDOMとJavaScriptの値の間に双方向データ結合を作成する方法です。データブロック変数は、フォームフィールドと自動的に同期されます。データを変更すると、フォームが更新されます。フォームを変更すると、データが更新されます。 .Numberは、フォームフィールドの継承された文字列値を数字として扱うようにVueに指示するフラグです。省略して追加操作を行うと、算術操作の代わりに文字列の追加が表示されます。私は1世紀近くJavaScriptを使用していますが、まだこれを台無しにしています。

もう1つの賢い「スキル」は @click.preventです。最初に、@Clickはボタンのクリックハンドラーを定義し、.Preventは部分的にブラウザがフォームのデフォルト動作（event.PreventDefault（）に相当）の送信を防ぎます。

最後のポイントは、ボタンに結合したdosumメソッドの追加です。データ変数を使用するだけであることに注意してください（VUEはこの範囲で提供されています）。

これは主に私の個人的な感覚ですが、Vueで書かれたときにスクリプトにクエリセレクターの不足と、HTMLがそれが何をしているかを明確にする方法が本当に好きです。

最後に、ボタンを完全に取り除くこともできます。

=

新しいVue（{
  EL： '#myform'、
  データ： {
    最初：0、
    2番目：0
  }、
  計算：{
    合計：function（）{
      これを返します。最初にthis.second;
    }
  }
}）

VUEのよりクーラー機能は、計算されたプロパティです。それらは、派生した値が更新されたときに識別するダミーです。上記のコードでは、2つのフォームフィールドのいずれかが変更されるとすぐに、合計が更新されます。これは、フォームフィールドの外で機能します。このような合計をレンダリングできます。

合計は{{sum}}です。

ajaxを使用します

Ajaxを使用するのがどれほど簡単か。これは称賛に値します。実際、私はおそらく合計で「ネイティブ」方法でAjaxを使用したと言えます。 （興味がある場合は、XmlhttpRequestの仕様を見ることができ、自分で避けたことを嬉しく思います。）jQueryのSimple $ .get（...）メソッドは多くの場合動作し、$ .ajax（）もより複雑なものが必要なときに簡単になります。 jQueryがうまくやっているもう1つのことは、JSONP要求を処理する方法です。現在、ほとんどのJSONPはCORSを使用する必要はありませんが、JSONPは異なるドメインでAPIへのリクエストを処理する方法です。

それで、Ajaxを簡単にするためにVueは何をしましたか？何もない！

わかりました、これは恐ろしいように聞こえますが、そうではありません。 HTTPリクエストを処理するための多くのオプションがあります。Vue.JSは、開発者が自分でそれを処理する方法を決定できるようにするためのより不可知論的なアプローチを採用しています。はい、それはより多くの仕事を意味しますが、いくつかの素晴らしい選択肢があります。

最初に考慮すべきことは、Vueコミュニティで非常に人気のある約束ベースのライブラリであるAxiosです。以下は、その動作中の簡単な例です（そのreadmeから取られた）：

 axios.get（ '/user？id = 12345'）
  .then（function（response）{
    // console.log（response）;
  }）
  .catch（function（error）{
    //エラーconsole.log（error）;
  }）
  .then（function（）{
    //常に実行}）;

Axiosは確かに投稿リクエストをサポートしており、ヘッダーと他の多くのオプションを指定できます。

AxiosはVue開発者の間で非常に人気がありますが、私はそれがあまり好きではありません。 （少なくともまだそうではありません。）代わりに、私はフェッチを好みます。 Fetchは外部ライブラリではなく、HTTP要求を実行する標準的なWeb方法です。フェッチはブラウザの約90％で十分にサポートされていますが、それは完全に安全ではないことを意味しますが、必要に応じて常にPolyFillを使用できます。

これはここで議論していることの範囲を完全に超えていますが、キングスリー・サイラスは、AxiosとFetch with Reactを使用することに関する優れたガイドを書きました。

Axiosと同様に、Fetchは約束に基づいており、フレンドリーなAPIを持っています。

 fetch（ 'http://example.com/movies.json'）
  .then（function（response）{
    return Response.json（）;
  }）
  .then（function（myjson）{
    console.log（json.stringify（myjson））;
  }）;

AxiosとFetchの両方がすべてのタイプのHTTPリクエストをカバーするため、いずれかが任意の多くのニーズに適しています。簡単な比較を見てみましょう。これは、スターウォーズAPIを使用した簡単なjQueryデモです。

<h1 id="スターウォーズの映画">スターウォーズの映画</h1>

$（document）.ready（function（）{
  $ .get（ 'https://swapi.com/api/films'、function（res）{
    let list = '';
    result.results.foreach（function（r）{
      リスト= `

$ {r.title}

`; }）; $（ '＃films'）。html（list）; }）; }）;

上記の例では、$ .getを使用してAPIにアクセスし、映画リストに戻ります。次に、そのデータを使用して、LIタグ要素としてタイトルのリストを生成し、すべてをULブロックに挿入します。

さて、VUEを使用して例を考えてみましょう。

  <h1 id="スターウォーズの映画">スターウォーズの映画</h1>
  
{{film.title}}

const app = new Vue（{
  EL： '＃app'、
  データ： {
    映画：[]
  }、
  created（）{
    fetch（ 'https://swapi.com/api/films'）
      .then（res => res.json（））
      .then（res => {
        this.films = result.results;
      }）;
  }
}）

この最良の部分は、おそらくV-Forテンプレートの使用です。 Vueはレイアウト（少なくともJavaScript）を気にしないことに注意してください。データはAPIから取得されます。変数が割り当てられます。レイアウトはそれを表示する責任があります。私はいつもJavaScriptでHTMLを使用することを嫌っていましたが、jQueryはこの問題の解決策を持っていますが、それをVueに焼くことはそれを自然な選択にします。

完全な（少し些細な）例

より深い理解のために、より現実的な例を考えてみましょう。お客様は、製品APIの高レベルのAjax対応フロントエンド検索インターフェイスを構築するように依頼しました。関数リストには以下が含まれます。

• 名前と製品のカテゴリによるフィルタリングをサポートします
• 検証用語またはカテゴリを提供することを要求する検証を形成します
• APIがアクセスしている場合は、ユーザーにメッセージを表示し、[送信]ボタンを無効にします
• 完了すると、処理レポートには製品や一致が表示されません

jqueryバージョンから始めましょう。最初はHTMLです：

検索 カテゴリ 全て 食べ物 ゲーム 検索

2つのフィルターと2つのDivを備えたフォームがあります。 1つは、エラーを検索または報告する際に一時的な状態として使用され、もう1つは結果をレンダリングするために使用されます。次に、コードを確認してください。

 // ...（コードが長すぎる、ここでは省略）...

このコードは、最初に使用したい各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-Modelを使用して、データを簡単に処理します。
• @click.preventを使用して、メイン検索操作を処理します。
• 使用：無効にして、ボタンの無効状態をVUEアプリケーションの値にバインドします（後で何をするかを確認します）。
• ステータス値は、前の例とはわずかに異なります。 jQueryには、DOMプロジェクトにテキストを設定する特定の方法とHTMLの別の方法がありますが、VUEは、レンダリングする値にHTMLを割り当てるときにV-HTMLを使用する必要があります。 {{{status}}をHTMLで使用しようとすると、タグが漏れます。
• 最後に、V-Forで条件付きでレンダリングされたV-IFを使用して反復が処理されます。

それでは、コードを見てみましょう。

 // ...（コードが長すぎる、ここでは省略）...

言及する価値のある最初のコードブロックは、データフィールドのセットです。フィールドを形成するためにマップするものもあれば、結果、ステータスメッセージなどにマッピングされます。SearchProductsメソッドは、jQueryバージョンと同じもののほとんどを処理しますが、一般に、DOMに直接結合するコードははるかに少なくなります。たとえば、結果が順序付けられていないリストにリストされていることがわかっていても、コード自体はこれについて気にしません。単に値を割り当てるだけで、タグはそれをレンダリングする責任があります。全体として、JavaScriptコードはjQueryコードよりもロジックに焦点を当てており、懸念のより良い分離を「感じています」。

jQueryはなくなりました、Vueは永遠に続きます！

わかりました、それは少し誇張されています。私が最初に言ったように、あなたがjqueryを使用したいのなら、それがあなたのために働いているなら、私はあなたが何も変えるべきであるとは絶対に考えていません。

しかし、VueはjQueryの使用に慣れている人々にとって良い「次のステップ」のように感じていると言えます。 Vueは複雑なアプリケーションをサポートし、足場と構築プロジェクトのための強力なコマンドラインツールを持っています。しかし、より簡単なタスクのために、Vueは優れた「モダンなjQuery」の代替品としての私の頼りになる開発ツールになりました！

以上がJQueryからVueへの移動を行いますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。