Vue.jsメモ（用語まとめ）

個人的まとめです

初学者なので間違っていればご指摘いただければ幸いです。

随時更新。

データバインディング

• データ（Javascript）と描画（html）を結びつける仕組み
• データに変化があれば自動的にDOMを更新することが可能

従来の場合

legacy.js

var el = document.getElementById('app')
el.innerText = 'Hello Vue.js'

Vue.jsの場合

vue.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

• el: #app - mountする要素
• data: {} - アプリケーションで使用するデータ

行数的には長く見えるが、従来のDOM更新（ライブラリを使用しない）は数が増えると同じ手続きが増えてしまう。

ディレクティブ

• v-から始まる属性
• データバインディングに使用
• アプリケーション内のデータ用オブジェクトのプロパティを生成

e.g. v-bind :value .sync = "message"
左から、ディレクティブ, 引数, 修飾子, 値(JavaScriptの式)

一例：
v-model, v-on, v-bind, v-if, v-else-if, v-else, v-show, v-for

データ駆動(data-driven)

• データを中心としたアプリケーション設計
• データの状態によって動的に（自動的に）、描画やアクションなどが変わる

Nuxt.js(ナクスジェーエス)、VuePress

• Vue.jsの拡張フレームワーク

ライフサイクルフック

• Vueインスタンスの特定のタイミングでの自動呼び出し

リアクティブデータ、リアクティブシステム

• getしたときsetしたときのフック処理が登録された反応できるデータ
• リアクティブシステムのひとつにデータバインディングがある

機能

• DOM更新の最適化
• 加工したデータの同期
• 変更の検知⇒フックした処理の自動実行

Mustache(マスタッシュ)

• {{ hoge }}で記述する記法
• hogeプロパティをbindする（常に同期するので、DOM更新のためのコードを記述しなくてよい）