はじめに
本稿はフロントエンド領域から逃げてきたバックエンドエンジニアが追い詰められて0から勉強した軌跡である。詳細は前回をご参照ください＾＾
ネコ本とは？
みんな大好きMio様の名著「基礎から学ぶ Vue.js」です。
https://www.amazon.co.jp/dp/B07D9BYHMZ
童貞卒業までの道程
- （済）基本
- （済）データバインディング、条件分岐、繰り返し
- ハンドラ、双方向バインディング
- 算出プロパティ // ←今日はここまで
- ウォッチャ、フィルタ
- コンポーネント、VueCLI、単一ファイルコンポーネント
- Vuex
- Vue Router
それでは道程卒業を目指してやっていきましょう。
ハンドラ
ハンドラとは「イベントハンドラ」の略
クリックやタップ、スクロールなどのイベントに紐づいて実行される処理のことを指す
※イベントと処理（ハンドラ）を紐づけることを「ハンドル」と呼ぶらしい。分かりにくいですね。
ハンドラはVueインスタンスのmethodsオプション内に記載します。
Vue.new({
el: "#app",
data: {
message: "Hello Vue.js"
count: 0
},
methods: {
handleClick: function(){
alert("clickButton!")
}
}
})
イベントと紐づける場合はv-onか@を利用します。
どうでもいいですが、v-〇〇←これのことを「ディレクティブ」と呼ぶらしいですね。今後その表現に統一するようにします。
<div id="app">
// これで動く
<button v-on:click="handleClick">クリックミー！</button>
// これでも動く
<button @click="handleClick">クリックミー！</button>
</div>
こうですね。クリックイベントに紐づけています。
対象となるイベントはDOMのイベントに依存するようです。つまりブラウザ依存ですね。
双方向バインディング
フォームで何かを入力する時に、描画している情報とリアクティブなデータが双方向に同期している必要がありますね。
v-modelディレクティブを使って双方向にバインディングしましょう。
Vue.new({
el: "#app",
data: {
message: "Hello View.js"
}
})
上記のようなVueインスタンスが存在する場合
<div id="app">
<input type="text" v-model="message">
<p>{{ message }}</p>
</div>
こうすると、フォームで入力した内容と描画している情報が双方向にバインディングされます。
v-modelはデータバインディングだけでなく、イベントハンドリングをして入力値を元にデータを更新している。
データバインディングと入力値を反映するイベントハンドリングの2つを同時に行う。
大事なことなのでわざわざ２回書きました。これで忘れなさそうですね。
v-modelでバインディングするデータの型はフォームのタイプと一致させなければならない。
（複数選択できるチェックボックスなら配列型にしなければならないとか）
## 算出プロパティ
算出してくれるプロパティ？笑
事前に処理を名前付きで記載しておくことで、可読性を上げることができそうです。
Vue.new({
el: "#app",
data: {
message: "hello"
},
computed: {
fullMessage: function() {
return this.message + "Vue.js"
}
}
})
上記のようなVueインスタンスが存在する場合
<div id="app">
<p>{{ message }}</p>
<p>{{ fullMessage }}</p>
</div>
こうすることで、算出プロパティで処理された結果を表示できますね。
メソッドとの違いは、結果をキャッシュするところらしい。
キャッシュが更新されるのは関連するリアクティブデータが更新された時だけだとか。
つまり、上記の例で言えば、messageというリアクティブデータが更新されなければ、ずっと結果をキャッシュしてくれるので、何度も使う場合は表示速度が向上しそうですね。
おわりに
今日はここまで。
次回のウォッチャまで書いたらネコ本に記載の簡単なサンプルアプリでも実装するかなぁ( ˘ω˘ )