今更ですが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で出来ることはありそうなので、今後も勉強を続けていきたいです。