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


関連記事

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

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

Vue.js 3.0のComposition APIを使ってみた

1 はじめに1.1 Composition APIとは1.2 環境構築2 Composition API での書き方2.1 function2.2 computed2.3 watch2.4 lifec ...

icon

TypeScript初心者が押さえておくべき型システム

1 はじめに2 型アノテーション2.1 プリミティブ型2.2 リテラル型2.3 any2.4 nullとundefined2.5 ユニオン型2.6 交差型2.7 タプル型2.8 列挙型2.9 配列2. ...

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

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

js

TypeScriptでJavaScriptのライブラリを使用するには?

1 はじめに2 対応方法2.1 npmで@typesからインストールする2.2 自分で型定義ファイルを作る3 Declaration Space3.1 Type Declaration Space3. ...

フォロー

follow us in feedly

blog-page_side_responsive

2017年7月
 1
2345678
9101112131415
16171819202122
23242526272829
3031 

アプリ情報

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