Vue.js チートシート

<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ index }} - {{ item.name }}
  </li>
</ul>
<div v-for="(value, key) in object" :key="key">
  {{ key }}: {{ value }}
</div>

<button @click="doSomething">クリック</button>
<input @keyup.enter="onSubmit">
<form @submit.prevent="onSubmit"></form>

<img :src="imageUrl">
<div :class="{ active: isActive }"></div>
<a :[attributeName]="url">リンク</a>

<input v-model="message">
<textarea v-model="text"></textarea>
<input type="checkbox" v-model="checked">
<select v-model="selectedOption"></select>

<MyComponent>
  <template #header>ヘッダーコンテンツ</template>
  <template #default="{ item }">{{ item.name }}</template>
</MyComponent>

[v-cloak] { display: none; }
<div v-cloak>{{ message }}</div>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

<style scoped>
button { color: red; }
</style>

<script setup>
import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import GlobalComponent from './GlobalComponent.vue'

const app = createApp(App)
app.component('GlobalComponent', GlobalComponent) // グローバル登録
app.mount('#app')

<!-- ChildComponent.vue -->
<script setup>
const props = defineProps({
  message: String,
  count: {
    type: Number,
    default: 0
  }
})
</script>
<template>
  <p>{{ message }} - {{ count }}</p>
</template>

<!-- ParentComponent.vue -->
<script setup>
import ChildComponent from './ChildComponent.vue'
</script>
<template>
  <ChildComponent message="こんにちは" :count="10" />
</template>

<!-- ChildComponent.vue -->
<script setup>
const emit = defineEmits(['response'])
emit('response', '子からのメッセージ！')
</script>

<!-- ParentComponent.vue -->
<script setup>
import ChildComponent from './ChildComponent.vue'
function handleResponse(msg) {
  console.log(msg) // '子からのメッセージ！'
}
</script>
<template>
  <ChildComponent @response="handleResponse" />
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <header><slot name="header">デフォルトヘッダー</slot></header>
    <main><slot>デフォルトコンテンツ</slot></main>
    <footer><slot name="footer" :text="footerText"></slot></footer>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const footerText = ref('フッターデータ')
</script>

<!-- ParentComponent.vue -->
<script setup>
import ChildComponent from './ChildComponent.vue'
</script>
<template>
  <ChildComponent>
    <template #header><h1>カスタムヘッダー</h1></template>
    <p>メインコンテンツ</p>
    <template #footer="{ text }"><i>カスタムフッター: {{ text }}</i></template>
  </ChildComponent>
</template>

<script setup>
import { ref, shallowRef } from 'vue'
import CompA from './CompA.vue'
import CompB from './CompB.vue'
const currentComp = shallowRef(CompA)
</script>
<template>
  <button @click="currentComp = CompA">A表示</button>
  <button @click="currentComp = CompB">B表示</button>
  <component :is="currentComp" />
</template>

<keep-alive>
  <component :is="currentView" />
</keep-alive>

<button @click="showModal = true">モーダル表示</button>
<Teleport to="body">
  <div v-if="showModal" class="modal">
    モーダルコンテンツ
    <button @click="showModal = false">閉じる</button>
  </div>
</Teleport>

<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <div>読み込み中...</div>
  </template>
</Suspense>

import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 0
count.value++

import { reactive } from 'vue'
const state = reactive({ count: 0, user: { name: 'Vue' } })
console.log(state.count) // 0
state.count++
state.user.name = 'User'

import { ref, computed } from 'vue'
const count = ref(1)
const doubleCount = computed(() => count.value * 2)
console.log(doubleCount.value) // 2
count.value = 2
console.log(doubleCount.value) // 4

import { ref, watch } from 'vue'
const count = ref(0)
watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`)
})
count.value = 1 // ログが出力される

import { ref, watchEffect } from 'vue'
const count = ref(0)
watchEffect(() => {
  console.log(`現在のカウント: ${count.value}`) // 初期実行 + count 変更時に実行
})
count.value = 1

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Counter' }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

// MyComponent.vue
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'

const store = useCounterStore()
const { count, doubleCount } = storeToRefs(store) // リアクティビティ維持
const { increment } = store // アクションはそのまま使える

// ParentComponent.vue
import { provide, ref } from 'vue'
const location = ref('北極')
provide('location', location) // 'location' というキーで提供

// ChildComponent.vue (階層はどこでも良い)
import { inject } from 'vue'
const location = inject('location') // 'location' キーで注入
console.log(location.value) // '北極'

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  { path: '/', name: 'home', component: HomeView },
  { path: '/about', name: 'about', component: () => import('../views/AboutView.vue') } // 遅延読み込み
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // ルーターをインポート

createApp(App).use(router).mount('#app') // .use(router) で登録

<router-link to="/">ホーム</router-link>
<router-link :to="{ name: 'about' }">About</router-link>

<!-- App.vue など -->
<template>
  <header>共通ヘッダー</header>
  <main>
    <router-view /> <!-- ここにルートコンポーネントが描画される -->
  </main>
  <footer>共通フッター</footer>
</template>

// Composition API
import { useRouter } from 'vue-router'
const router = useRouter()
function goToAbout() {
  router.push('/about')
  // router.push({ name: 'about' })
  // router.replace('/about') // 履歴に残さない
}

// Options API
// methods: {
//   goToAbout() {
//     this.$router.push('/about')
//   }
// }

// ルート定義
// { path: '/users/:id', name: 'user', component: UserView }

// UserView.vue (Composition API)
import { useRoute } from 'vue-router'
const route = useRoute()
const userId = route.params.id

// UserView.vue (Options API)
// computed: {
//   userId() {
//     return this.$route.params.id
//   }
// }

// グローバルガード (router/index.js)
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next({ name: 'login' }) // ログインページへリダイレクト
  } else {
    next() // 遷移を許可
  }
})

// コンポーネント内ガード (Composition API)
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
onBeforeRouteLeave((to, from, next) => {
  const answer = window.confirm('本当に離れますか？変更が保存されていません。')
  if (!answer) return next(false) // 遷移をキャンセル
  next()
})

// ルート定義
// {
//   path: '/user/:id',
//   component: UserLayout,
//   children: [
//     { path: '', component: UserProfile }, // /user/:id
//     { path: 'posts', component: UserPosts } // /user/:id/posts
//   ]
// }

// UserLayout.vue
// <template>
//   <div>ユーザー情報</div>
//   <router-view /> <!-- ここに UserProfile か UserPosts が表示される -->
// </template>