Directives: (Same in Vue 2 and 3)
- v-bind: or : – binds an attribute value to an expression.
- v-model – two-way data binding for form elements.
- v-for – loops through an array and generates elements.
- v-if, v-else-if, v-else – conditionally render elements.
- v-show – conditionally show elements with CSS display property.
- v-on: or @ – attaches an event listener to an element.
- v-text – sets the text content of an element.
- v-html – sets the HTML content of an element.
Components:
- Vue.component(“componentName”, “componentPath”) – registers a global component in Vue.js 2
- app.component(“componentName”, “componentPath”) in Vue.js 3
- props property – passes data from parent component to child component.
- emit method – sends events from the child component to the parent component.
- ref attribute – creates a reference to an element/component.
Lifecycle Vue js 2:
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
Lifecycle Vue js 3:
- beforeCreate.
- created
- beforeMount
- mounted
- beforeUpdate.
- updated
- beforeUnmount.
- unmounted.
I hope this cheat sheet helps you!