FrontEnd

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

投稿日:2017年7月7日 更新日:

はじめに

前回の続きになります。
Vue.js入門その1〜基本文法〜

今回は下記の公式ドキュメントのメモになります。

なお、今回もJSFiddleを使用していきたいと思います。

Vueインスタンス

Vue.jsではルートVueインスタンスを作成することで起動されます。
前回何度も記述したやつです。

ちなみに、vmはViewModelの意味であり、MVVMパターンの影響を受けているとのことです。

私は前回、Vueインスタンスをappという変数に保存しておりましたが、慣例的には誤りだったということになります。
(申し訳ありません!)

プロパティとメソッド

Vueインスタンスは、自身のdataの値を持ちます。
dataが変更されると、Vueインスタンスのプロパティも変化し、その逆も然りです。

試しに、下記のコードを書き、インスタンスを生成します。

コンソールで操作したいので、インスタンスを渡しています。

下記のように試すと、vmのプロパティとdataが一緒に変動していることが分かります。

インスタンスプロパティとして宣言する場合は、vm.$dataとも書けます。
DOMのidを取得する場合は、vm.$elです。

これとは別に、インスタンスメソッドもあります。
$watchで、対象のプロパティが変化したときに呼ばれます。
コールバックで古い値と新しい値を引数で受け取ることができます。
$watch (Vue.jsリファレンス)

これで、aプロパティを監視してくれますので、コンソールにて値を変更すれば、$watchで定義した処理が実行されます。

インスタンスライフサイクルフック

Vueインスタンスが作成されたり、更新されたりするタイミングでフックされる処理を定義できます。

例として、インスタンスが生成されるときにフックされるcreatedで書きます。

これで、インスタンス生成時(JSFiddle実行時)にコンソールに「created!!」という文字が表示されます。

ライフサイクルフックは他にもありますが、試しにdestroyedも使用してみます。

インスタンスが生成された場合は「created!!」、削除された場合は「destroyed!!」と出力されます。
削除するときは、コンソールで下記を入力すればOKです。

$destroyはインスタンスを強制的に破棄するインスタンスメソッドです。

フィルター

例えば、下記のようなコードがあります。

このとき、msgの値を操作し空文字を渡せば空欄になります。
ただ、空文字の場合はデフォルトの文字をセットしたいこともあります。

そのようなときに使うのがフィルタです。
フィルタの使用を宣言する場合は、|を使用します。

まず、HTML側を下記のように変更します。

これで、msgdefaultMsgでフィルタする宣言になります。
defaultMsgはVueインスタンスの中で宣言します。

第一引数にはmsgが入ってきます。
これで、コンソールを使って空文字を渡すと、「Hello from defaultMsg」に変更されます。

算出プロパティ

例文

このような式もVue.jsでは評価できるようですが、非常に読みにくいため、算出プロパティと呼ばれるものを使用することが推奨されています。

算出プロパティを使用した書き換え

HTML

JS

新しく出てきたのはcomputedになります。
computedを宣言することであたかもgetterやsetter関数として使用することができます。
今回はreversedMessageで逆順並び替えを実施しています。

ここで私も思いましたが、これはメソッドと何が違うんだろうと感じるかと思います。
公式リファレンスによると、下記になります。

算出プロパティの代わりに、同じような関数をメソッドとして定義することも可能です。最終的には、2つのアプローチは完全に同じ結果になります。しかしながら、算出プロパティは依存関係にもとづきキャッシュされるという違いがあります。算出プロパティは、それが依存するものが更新されたときにだけ再評価されます。これはつまり、messageが変わらない限りは、reversedMessageに何度アクセスしても、関数を再び実行することなく以前計算された結果を即時に返すということです。

Vue.js リファレンスより

要は依存するプロパティが変更されたときだけ実行されるよ、ということかと思っています。
ただ、再描画したタイミングで必ず実行されるわけではなさそうなので、慣れないうちはメソッドの方が良いのかもしれません(パフォーマンスを考えなければ)。

監視プロパティ

インスタンス上のデータの変更を監視し、反応させることができる監視プロパティというものもあります。

例えばwatchになります。
以下の例題は、苗字と名前を監視し、フルネームを返しています。

HTML

JS

ここで、コンソールで下記のようにfirstNamelastNameを変更すると、「hoge fuga」と表示されます。

算出プロパティで書き換え

ただ、上記のコードは算出プロパティを使用して書き換えることもできます。
こちらの方がコード量は短くなりますね。

算出プロパティでsetter

算出プロパティでsetter関数を定義することもできます。

先ほどの例の逆で、フルネームの値を変更すると、苗字と名前も変更されるようにします。

HTML

JS

先ほどまでのgetterのみであれば、プロパティの後にそのまま関数で良かったのですが、setterも含める場合は、getsetで分ける必要があります。

このあたりはcomputedにも記載があります。

これで、コンソールでfullNameを変更すれば名前と苗字も一緒に変わります。

さいごに

今回はVueインスタンスのプロパティやメソッドの紹介でした。

まだ漠然としていますね。。。

次回は試しに、ここまでの内容で何か作ってみたいと思います!

age_footer_300rect




age_footer_300rect




-FrontEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

Vue.js入門その7〜セレクトボックスを動的に変更してみる〜

1 はじめに1.1 サンプル2 とりあえず作ってみる2.1 ソースコード2.2 セレクトボックスにv-modelでバインド2.3 <option>はv-forでリストレンダリング2.4 メ …

Vue.js入門その1〜基本文法〜

はじめに 軽量JSフレームワークとして有名なVue.js。 最近、Laravelに触れる機会が増えたことと、以前からRails + Vueという構築を耳にするので、今更ではありますが勉強を始めようと思 …

Vue.js入門その3〜簡単にTODOアプリを作ってみたよ〜

はじめに 7/12 修正 記事下部にて、filterメソッドを使用している箇所がありましたが、forEachの方が適しているとご指摘がありましたので、修正しました。 以前Qiitaの方に投稿した記事で …

Vue.js入門その5〜マークダウンのリアルタイムプレビューをつくる〜

1 はじめに1.1 環境構築2 marked.jsの設定2.1 CDNのロード2.2 動作確認3 マークダウンを変換して表示3.1 雛形の作成3.1.1 HTML3.1.2 JS3.2 HTMLに変換 …

WebページにGoogleMapを配置する

1 はじめに2 準備2.1 API Keyを取得する3 簡単な実装3.1 サンプルコード4 タップした位置にマーカを動かす4.1 サンプルコード5 場所を検索する5.1 サンプルコード6 画面例7 さ …

page_side_300rect




bitFlyer

bitFlyer ビットコインを始めるなら安心・安全な取引所で

アプリ情報

私たちは、目標を達成したい方を応援する、TODOアプリもリリースしております。
下記のアイコンから無料でダウンロードできます。

リンク



follow us in feedly

2017年7月
« 6月   8月 »
 1
2345678
9101112131415
16171819202122
23242526272829
3031