今更ですがVue.jsを試してみました。
元々興味はあったのですが、なかなか重い腰が動かずで。。
今回触ってみてもっと深く勉強したいと思い、備忘のために記事にします。

試しに作ってみた

See the Pen jOOEKVM by ricchan_k (@ricchan_k) on CodePen.

入力文字数がオーバーすると隣にエラーメッセージが出る、簡単なお問い合わせフォームを作ってみました。
作り方について、以下に書いてきます。

HTML側の記載

<body>
    <div id="vueSample"><!-- Vueで利用したい範囲をDOMで囲う -->
      <div>名前</div>
      <input v-model="name" placeholder="やまだ はなこ" /><!-- 入力フォームバインディングをv-modelで設定-->
      <span class="errorMessage">{{ validateName }}</span><!-- Vueから返却された値を表示する場所を宣言 -->

         ～　中略　～

      <button @click="sendInfo">送信</button><!-- クリックされたとき、sendInfoというイベントを発火させる -->
    </div>
<body>

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

↑の場合だと「v-model="name"」と宣言することで、テキストボックスの中の文字が変更されたらVue内のnameも自動的に更新され、逆にVue内のnameが更新されたらHTML側のテキストボックスも更新されるという仕組みになっています。

Vue部分の記載

Vueインスタンスの生成

  new Vue({ // これ書くことでVueインスタンスが生成される
    el: '#vueSample', // Vueの利用する範囲をDOMで指定
    data: { //Vueで使うプロパティの初期値を宣言
      name: '',
      tel: '',
      toiawase: ''
    },

まずはVueインスタンスの作成や初期設定などを行っていきます。

算出プロパティの宣言

    computed: { // 算出プロパティの宣言
      validateName: function () { // validateNameプロパティの宣言
        if(this.name.length > 10) { // nameが10文字を超えた場合
          return "名前は10文字以内で入力してください";
        }
      },

      ～　中略　～
    },

次に算出プロパティを宣言します。算出プロパティとは、処理に名前を付け、処理を変数のように扱うイメージです。↑の例だと、nameが10文字超えた場合、validateNameにエラーメッセージを設定するという算出プロパティを設定しています。

イベントハンドラの設定

    methods: {
      sendInfo: function() {
      	//送信ボタンが押されたらなにしようかな
      }
    }

何も処理書いていないですが、HTML側の「button @click="sendInfo" ～」のイベントが発火した場合になにするかを書きます。

使ってみて思ったこと

場合によってはjQueryで書いたほうがシンプルなのでは？という部分もありましたが、Vue.jsで書くことでよりシンプルに実現できたりして、フロントサイドの開発が楽しくなりました。
まだまだVue.jsで出来ることはありそうなので、今後も勉強を続けていきたいです。