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インスタンスのプロパティやメソッドの紹介でした。

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

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

おすすめ書籍

基礎から学ぶ Vue.js Vue.js入門 基礎から実践アプリケーション開発まで Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:


comment

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

CAPTCHA


関連記事

react-icon

React Big Calendarの複数タイムゾーン対応

1 はじめに2 端末のタイムゾーンのみに対応する場合3 複数のタイムゾーンに対応する。3.1 日時を指定のタイムゾーンに変換する3.2 イベントの開始日時・終了日時を動的に設定する3.3 ラップクラス ...

【入門】Vuetifyで手軽に綺麗なWebページを作る

1 はじめに1.1 Vuetifyとは2 Vuetifyを導入する2.1 パッケージを追加する2.2 TypeScriptを採用している場合3 Vuetifyのコンポーネント3.1 Applicati ...

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

1 はじめに2 vue-routerのインストール3 サーバーサイドの改修3.1 APIに詳細(show)を追加3.2 元となるビューファイルを作成3.3 ルーティングの修正4 Vue.jsの実装4. ...

svelte

Svelteのチュートリアルをやってみた

1 はじめに2 Svelteとは?2.1 Svelteの特徴2.2 Write less code2.3 No Virtual DOM2.4 Truly reactive3 Svelteのシンタックス ...

Vue.jsでWebアプリケーションを作る〜Vue.jsの基礎〜

1 はじめに1.1 Vue.jsとは1.2 インストール1.3 Vueアプリケーションを作る2 データを表示する2.1 文字列を表示する2.2 HTMLで表示する3 属性を指定する3.1 インラインス ...

フォロー

blog-page_side_responsive

2017年7月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。