カテゴリ: notes
タグ: vuejs

Vueインスタンス|Vue.js再学習

触れないタイミングが3ヶ月あったり忘れてしまった事に焦りを感じたので、今度は勉強したことをブロクに残していきたいと思います。 内容的には公式ドキュメントの写経のようなものになります。

今日はVueインスタンスを見ていきます。

Vue インスタンス

Vueインスタンス

Vueインスタンスの作成

vm = new Vue({
  // オプション(データ、メソッドなど)
})

全てのVueアプリケーションは、Vue関数で新しい*Vueインスタンス*を作成することで起動されます。

vmはViewModelの略でVueインスタンスの変数名として慣例的に使われます。

データ

var data = { a: 1 }

vm = new Vue({
  data: data
})

// インスタンスのプロパティを取得すると、
// 元のデータからそのプロパティが返される
vm.a == data.a // => true

このデータを変更すると、ビューが再レンダリングされます。

// プロパティの代入は、元のデータにも反映されます
vm.a = 2
data.a // => 2

// その逆もまた反映されます
data.a = 2
vm.a // => 2

Vueインスタンス作成時に存在していたプロパティだけが*リアクティブ*になります。 つまり上記はレンダリングされますが、以下のように新しいプロパティを追加した場合、

vm.b = 'h1'

この場合、bプロパティへの変更はビューの更新を引き起こしません。 後からプロパティが必要になることが分かっているならば、空でも存在しない場合でも初期値を設定するだけで済みます。

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

インスタンスのプロパティ、メソッド、ライフサイクルフックについては今は特に気にする必要がないのでパスします。

About

はらぺこ

職業:フロントエンドエンジニア
趣味:自転車/テニス/空手
愛車:
 ✓ブリヂストン オルディナs5
 ✓アンカー RS8 EL

神戸にて爆誕。
友人から「お前がマスターして教えてくれ」と渡された『HTML&スタイルシート ポケットリファレンス』がキッカケでWeb業界への一歩を踏み出す事になる。

2013年7月にクロスバイクを購入して自転車にドハマリする。
全力で遊ぶ合間に、ほどほどに頑張る日々を過ごしています。

飼い主 はっぴー

2014年10月20日(誕生日)の引っ越し日、捨て猫になっていた所、運命の出会いを果たす。 
(その日は雨で、3日間雨が続く寒い日だった。このまま放っておけないと自転車生活と秤にかけて、はっぴーを選択する)
5時間かけて油断させ、近づいてきた所をガッと拾い上げ、そのまま家へ猛ダッシュ、玄関の鍵を閉めて家族になる。以後オレたちはファミリーだ。

助けたつもりが、実際は自分の方が精神的に救われている。はっぴーなしでは生きていけない。(最早「飼い主」と言って差し支えないだろう)

「はっぴー」という名前の由来は、『幸せになってほしい』という想いで名付けた。