jQueryとVue.jsの比較（入力バインディング編）

jQueryで現状フロントの値の監視や操作、DOMの表示制御などを行ってる。
Vue.jsに置き換えるとイベント発火制御が少なくて済んだりコンポーネント化ができたりと、メリットあるなぁ〜というフンワリ理解してる部分を、実際に同じものをjQueryとVue.jsで作って違いを理解してみます。

今回は入力バインディング編です。

前提

Vue.jsはCDN版の方を使います。
jQueryについても同様にCDN版です。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<!-- jQuery + Popper.js + Bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

※見た目を簡単にキレイにしたいのでBootstrapも使ってます。

フォーム入力バインディング

<input type="text">で入力された値を<p>タグ内に同期で表示させるというシンプルなものです。

画面

jQueryの場合

HTMLのBODY部分は以下の通りです。

<div class="container">
  <div class="mt-5"></div>
  <div class="card">
    <div class="card-header">
      jQueryの場合
    </div>
    <div class="card-body">
      <div class="form-group">
        <label for="text1">Text:</label>
        <input type="text" id="text1" class="form-control" value="hoge" />
      </div>
      <h5 class="card-title">値を反映</h5>
      <p class="card-text" id="result1"></p>
    </div>
  </div>
</div>

input type="text"の#text1に入力された値をpの#result1に反映させます。
まず初期値を反映させるために以下が必要です。

$(function() {
	// 初期値反映
	$("#result1").html($("#text1").val());
});

そして、入力された値が変更されたことをトリガーにするのであれば以下のようなchangeイベントトリガーでもいいのですがchangeイベントだと入力エリアからフォーカスが外れたときにしか発火されないので

$("#text1").change(function() {
	// changeイベントだと入力エリアからフォーカスが外れたときにだけ発火
	$("#result1").html($(this).val());
});

今回は値の入力と同期させたいのでkeyupイベントトリガーが正しいです。

$("#text1").keyup(function() {
	// keyupイベントは入力時にキーを離した瞬間に発火
	$("#result1").html($(this).val());
});

結果

以下のような動きをする画面ができました。

では次にVue.jsの場合です。

Vue.jsの場合

HTMLのBODY部分は以下の通りです。

<div class="container">
    <div class="mt-5"></div>
    <div class="card" id="vue">
	    <div class="card-header">
	        Vue.jsの場合
	    </div>
	    <div class="card-body">
	        <div class="form-group">
	        <label for="text2">Text:</label>
	        <input type="text" id="text2" class="form-control" v-model="result2"/>
	        </div>
	        <h5 class="card-title">値を反映</h5>
	        <p class="card-text" id="result2">{{ result2 }}</p>
	    </div>
    </div>
</div>

• <div class="card" id="vue">とVueが操作するエリアと指定させるためにid="vue"としました
• inputタグにv-model="result2"が追加されています。
• pタグには{{ result2 }}が追加されてます。

javascriptは何をするかというと以下のみです。

new Vue({
    el: "#vue",
    data: {
        result2: "hoge"
    }
});

やっていることは以下のみです。

• new VueでVueのインスタンスを作成
• elで固有のルートを指定（今回は#vue）
• dataにresult2を定義し、初期値に"hoge"を入れる

HTML部分と組み合わせると・・・

• #vue配下はVueで操作するエリアとして指定されて、result2というデータを持っている
• inputタグに入力された値はv-modelでdataのresult2に値を管理させるようにしている
• {{ result2 }}はdataのreslut2を表示している

ということになります。

結果

まとめ

Vue.jsの入力バインディング１つとってもjQueryだと初期値を考慮して、イベントを監視して、イベント発火したら特定のタグ要素に値を反映して〜と、１つづつ明示的に指定していく必要がある印象です。
他にも色々と違いは出てくると思うのでネタが思いつき次第まとめていきます。

また、個人的にですがQiitaの投稿が久しぶりなので、リハビリ兼ねてライトな部分からですがjQueryよりVueのココがいいよって理解するためにも継続していけるようがんばります。

追記

jQueryとVue.jsの比較（算出プロパティ編）を書きました。