フレームワーク

Vue.js クイックリファレンス

Vue.js クイックリファレンス の印刷用チートシート。すばやい参照、学習、机上利用向けに整理されています

ソース
Vue.js Documentation (vuejs.org)
ライセンス
MIT
更新日
2026-03-27

サンプル

このチートシートの内容

  • テンプレート構文
  • リアクティビティ
  • 算出プロパティとウォッチャー
  • コンポーネント
  • プロップとイベント
  • スロット
  • Composition API
  • ルーター(Vue Router)
  • ライフサイクルフック
  • リストと条件
  • フォーム処理

テキストと式

<span>{{ message }}</span>
<span>{{ count + 1 }}</span>
<span>{{ ok ? 'Yes' : 'No' }}</span>
<span v-html="rawHtml"></span>

ディレクティブ

{{ expr }}テキスト補間
v-bind:attr / :attr属性を式にバインド
v-on:event / @eventイベントリスナーをアタッチ
v-model双方向バインディング(フォーム)
v-if / v-else-if / v-else条件付きレンダリング
v-showdisplay CSS を切り替え(DOM に残る)
v-forリストレンダリング
v-slot / #name名前付きスロットコンテンツ

属性バインディング

<img :src="imageUrl" :alt="desc" />
<div :class="{ active: isActive }"></div>
<div :style="{ color: textColor }"></div>
<button :disabled="isLoading">Submit</button>

すべてのセクションを含む印刷用チートシートをダウンロード

PDF をダウンロード

ダウンロード

読み方に合った形式を選ぶ