Vue.js用語辞典【未完】

ディレクティブ

• DOM 要素に対して何かを実行することをライブラリに伝達する、マークアップ中の特別なトークン。
• 「v-」で始まるやつ
• ディレクティブ＝指令する
• Vue.jsに仕事を振る仕組み

• 接頭辞はデフォルトで v

  • v-bind
  • v-if
  • v-show
  • v-for
  • v-on

• 参考：体で覚えるVue.js - ディレクティブ編 〜 JSおくのほそ道 #023

• 参考：Vue.jsのv-ifとv-showの違い

• 参考：v-for で配列に要素をマッピングする

メソッドハンドラ

• 「クリック」や「入力」といったイベントをハンドリングする
• クリックしたらアラートを出す！、マウスオーバーしたら文字が大きくなるみたいな動きをつけたい時使おう
• 簡単な「v-on」ディレクティブを使った例

See the Pen pooJzQr by アズマックス (@yuki-azuma) on CodePen.

• 参考：【Vue.js】イベントハンドリングをサンプルを作りながら理解する
• 参考：イベントハンドラー／イベントリスナーについて[addEventListener]

双方向データバインディング

• 双方向にデータが同期するデータバインディング
• そもそも、データバインディングとは、「データと描画を同期する仕組み」
• Aが変わったら、Bも変わり、Bが変われば、Aも変わるイメージ

コンポーネント

• 名前付きの再利用可能な Vue インスタンス
• 必要なだけ何度でも再利用できる

• 部品ごとに使われることが多い

  • 例）
  • 画面のヘッダー部分のコンポーネント
  • フッター部分のコンポーネント、
  • サイドメニューのコンポーネント

• 下図は、画面のパーツ構成をVueファイルの構成に置き換えた時のイメージ図
  

• 開発規模が大きくなってきたら、コンポーネントは大活躍する

• 以下のワードもよく出てくるので、覚えておきたい

  • $emit
  • props
  • ローカルコンポーネント
  • グローバルコンポーネント

• 参考：Vue.js「コンポーネント」入門」

• 参考：Vue.jsのコンポーネント入門

• 参考：Vue.jsをシンプルに理解しよう その２

その他参考

• 参考：Vue の v-bind:class に複数の条件付き class を入れる簡単な方法（オブジェクト（ハッシュ）、配列）