2024-08-14
Vue tree map
Animations
<Transition>
<TransitionGroup>
Application
createApp()
app.mount()
app.unmount()
app.component()
app.directive()
app.use()
app.mixin()
app.provide()
app.runWithContext()
app.version
app.config
app.config.errorHandler
defineComponent()
defineAsyncComponent()
Built-in components
<Teleport>
<KeepAlive>
<component>
<Suspense>
Components
defineProps()
defineEmits()
defineModel()
defineExpose()
defineOptions()
inheritAttrs
useAttrs()
v-bind="$attrs"
defineSlots()
Lifecycle Hooks
onMounted()
onUpdated()
onUnmounted()
onBeforeMount()
onBeforeUpdate()
onBeforeUnmount()
onErrorCaptured()
onRenderTracked()
onRenderTriggered()
onActivated()
onDeactivated()
onServerPrefetch()
<style>
v-deep
<style scope>
Dependency Injection
provide()
inject()
hasInjectionContext()
Forms
<input v-model="name">
<input v-model.lazy="name">
<input v-model.number="name">
<input v-model.trim="name">
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no" />
Reactivity
ref()
reactive()
nextTick()
computed()
computed()
readonly()
watchEffect()
watchPostEffect()
watchSyncEffect()
watch()
utilities
isRef()
unRef()
toRef()
toValue()
toRefs()
isProxy()
isReactive()
isReadonly()
advanced
shallowRef()
triggerRef()
customRef()
shallowReactive()
shallowReadonly()
toRaw()
markRaw()
effectScope()
getCurrentScope()
onScopeDispose()
Routing
vue-router
<RouterLink>
<RouterView>
useRouter()
useRoute()
Server-Side Rendering (SSR)
Built-in
createSSRApp()
renderToString()
Nuxt
Quasar
Vite SSR
State Management
reactive()
Custom composables
Pinia
Vuex
Template & Directives
{{ message }}
{{ number + 1 }}
v-text
v-html
v-bind
v-pre
v-show
v-if
v-else
v-else-if
v-for
v-slot
v-once
v-memo
v-cloak
<component>
<slot>
<template>
key
ref
is
Testing
Unit
describe()
test()
expect().toBe()
Vitest (recommended)
Jest
Component
Whitebox: Unit Testing
Blackbox: Component Testing
Vitest (recommended)
Cypress Component Testing
@testing-library/cypress
@vue/test-utils
E2E
Cypress (recommended)
Playwright
Nightwatch
WebdriverIO