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

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

このガイドは、主にJQueryを使用して長年の経験があり、Vueで同じタスクを達(dá)成する方法を?qū)Wびたい開発者向けです。ですから、私はjQueryの「コア」ユースケースだと思うものに焦點を當(dāng)てます。私はすべての可能な機(jī)能をカバーするわけではありませんが、代わりに「私はjqueryで[x]をしばしばします」というアプローチを取ります。 （ところで、私が例を書く方法は、タスクを達(dá)成するための単なる方法であることに注意してください。JQueryとVueの両方が同じ目標(biāo)を達(dá)成するための複數(shù)の方法を提供しています。これは良いことです?。?/p>

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

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

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

Vueの「行動の範(fàn)囲」を定義します

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

Vueはこの點で大きな違いがあります。 VUEプロジェクトを開始するとき、最初にDOMで焦點を當(dāng)てたい「地域」を定義します。それでは、単純なプロトタイプの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'、
  //コードはここにあります...
}）;

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

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

DOMで要素を見つけます

あなたが見つけるもう1つの興味深いまたは恐ろしい側(cè)面は、「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アプリケーションは冗長ですが、タグと呼び出される関數(shù)間で操作を直接接続する方法（「クリック」）をどのように接続するかに注意してください。 Vueのコードには、DOMとの関連性はありません（ELパーツを除き、機(jī)能する必要がある場所を定義します）。それは私にヴェーについて最も確信してくれたものの1つです。何が起こっているのかを理解する方が簡単です。また、ID値とセレクターについてあまり心配する必要はありません。ボタンのクラスまたはIDを変更した場合、コードに戻ってセレクターの更新を心配する必要はありません。

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

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

$（document）.ready（function（）{

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

}）;

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

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

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

この例では、VUEのテンプレート言語（強(qiáng)調(diào)表示された行）を使用して、スパン內(nèi)で変數(shù)をレンダリングすることを指定します。これで、ボタンがクリックされると、値が変更され、スパンの內(nèi)部テキストが自動的に変更されます。

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

フォーム変數(shù)の読み取りと書き込み

処理フォームは、おそらくJavaScriptでできる最も一般的で有用なことの1つです。 JavaScriptの前でさえ、私の初期の「Web開発」のほとんどは、フォームの提出を処理するためにPerlスクリプトを作成していました。ユーザー入力を受け入れる主要な方法として、フォームはWebにとって重要であり、かなり長い間當(dāng)てはまる可能性があります。いくつかのフォームフィールドを読み取り、別のフィールドを設(shè)定する簡単な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（合計）;
  }）;
}）;

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

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

合計は{{sum}}です。

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

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

<h1>スターウォーズの映畫</h1>

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

  <h1>スターウォーズの映畫</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;
      }）;
  }
}）

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

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

このコードは、最初に使用したい各DOMプロジェクト（フォームフィールド、ボタン、およびDiv）の変數(shù)のセットを作成します。ロジックのコアは、ボタンのクリックハンドラーにあります。確認(rèn)し、すべてが機(jī)能する場合は、APIにリクエストを投稿します。それが戻ったとき、一致がない場合、結(jié)果をレンダリングするか、メッセージを表示します。

それでは、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を使用して、メイン検索操作を処理します。
• 使用：無効にして、ボタンの無効狀態(tài)をVUEアプリケーションの値にバインドします（後で何をするかを確認(rèn)します）。
• ステータス値は、前の例とはわずかに異なります。 jQueryには、DOMプロジェクトにテキストを設(shè)定する特定の方法とHTMLの別の方法がありますが、VUEは、レンダリングする値にHTMLを割り當(dāng)てるときにV-HTMLを使用する必要があります。 {{{status}}をHTMLで使用しようとすると、タグが漏れます。
• 最後に、V-Forで條件付きでレンダリングされたV-IFを使用して反復(fù)が処理されます。

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

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

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

jQueryはなくなりました、Vueは永遠(yuǎn)に続きます！

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

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

以上がJQueryからVueへの移動を行いますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。