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>