2024-08-10
Vue cheatsheet
Vue is a JavaScript framework for building user interfaces.
Application
html
<div id="app">Hello {{ name }}!</div>
js
import { createApp } from 'vue';
const app = createApp({
data() {
return { name: 'Marcin' };
},
});
app.mount('#app');
Template
Value binding
html
{{ name }}
Attributes binding
html
<button :disabled="isDisabled">Submit</button>
<div v-bind="attrs"></div>
html
<div :class="{ 'article--edited': isEdited }"></div>
Conditional rendering
html
<article v-if="loaded"></article>
html
<div v-if="loaded"></div>
<div v-else-if="error">Error</div>
<div v-else>Loading...</div>
Loops
html
<ul>
<li v-for="item in items" :key="item.id">
{{ item.value }}
</li>
</ul>
html
<ul>
<li v-for="(item, index) in items" :key="index">
{{ index }} - {{ item.value }}
</li>
</ul>
Events
html
<button
type="button"
@click="doSomething"
>Submit</button>
Form input
vue
<input type="text" v-model="value" />
vue
<textarea v-model="value"></textarea>
vue
<input type="checkbox" id="checkbox" v-model="checked" />
vue
<input type="radio" id="man" value="Man" v-model="gender" />
<label for="man">Man</label>
<input type="radio" id="woman" value="Woman" v-model="gender" />
<label for="woman">Woman</label>
html
<select v-model="language">
<option disabled value="">Please select one</option>
<option value="en">EN</option>
<option value="pl">PL</option>
<option value="de">DE</option>
</select>
Component
Reactivity
ts
const name = ref('Marcin');
console.log(name.value); // Marcin
ts
const state = reactive({ name: 'Marcin' });
console.log(state.name); // Marcin
ts
const age = ref(20);
const name = ref('Peter');
const label = computed(() => {
if (age.value < 18) {
return 'Not allowed';
}
return name.value;
});
console.log(label.value); // Peter
age.value = 12;
console.log(label.value); // Not allowed
Props
vue
<script setup lang="ts">
const props = defineProps<{
name: string,
surname?: string,
}>();
</script>
<template>
{{ props.name }}
{{ name }}
</template>
vue
<MyComponent name="Marcin" surname="Saja" />
Events
vue
<script setup lang="ts">
const emit = defineEmits('submit');
</script>
<template>
<button type="button" @click="emit('submit')">Submit</button>
</template>
vue
<MyComponent @submit="alert('Submitted')" />
v-model
vue
<script setup lang="ts">
const model = defineModel();
</script>
<template>
<div>
{{ model }}
</div>
<input type="text" v-model="model" />
</template>
vue
<MyComponent v-model="name" />
Watchers
ts
const name = ref();
watch(name, (newName) => console.log('change!'));
ts
const name = ref('Marcin');
const surname = ref('Saja');
watchEffect(() => {
if (name.value.length > 0) {
console.log('name has length greater than 0');
}
if (surname.value.length > 0) {
console.log('surname has length greater than 0');
}
})
Template refs
vue
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const input = ref(null);
onMounted(() => {
input.value.focus();
})
</script>
<template>
<input ref="input" />
</template>
Slots
vue
<template>
<div>
This is the slot:
<slot></slot>
</div>
</template>
vue
<MyComponent>
Content of the slot
</MyComponent>
Lifecycle
js
onMounted(() => console.log('Component mounted'));
onUpdated(() => console.log('Component updated'));
onUnmounted(() => console.log('Component unmounted'));
onBeforeMount(() => console.log('Component before mount'));
onBeforeUpdate(() => console.log('Component before updated'));
onBeforeUnmount(() => console.log('Component before unmount'));
onErrorCaptured(() => console.log('Error in the component'));
js
// SSR only
onServerPrefetch(() => console.log('Prefetched on server'));
js
// Only in <KeepAlive> component:
onActivated(() => console.log('Component activated'));
onDeactivated(() => console.log('Component deactivated'));
Dependency injection
vue
<script setup lang="ts">
// parent component:
import { provide } from 'vue';
provide('url', 'https://msaja.dev/api/');
</script>
vue
<script setup lang="ts">
// child component:
import { inject } from 'vue';
const url = inject('url');
</script>
Directives
vue
<script setup>
// enables v-focus in templates
const vFocus = {
mounted: (el) => el.focus()
}
</script>
<template>
<input v-focus />
</template>