Vue.js is a progressive JavaScript framework that is used for building user interfaces. It is an open-source framework that is gaining popularity among developers due to its simplicity and flexibility. Vue.js is designed to be easy to understand and use, making it an ideal choice for both beginners and experienced developers.
Vue.js is a reactive framework, which means that it updates the user interface automatically when the data changes. This makes it easy to build dynamic and interactive web applications. Vue.js also provides a set of tools and libraries that make it easy to build complex applications.
This cheat sheet provides a quick reference for Vue.js syntax and features. For more detailed information, please refer to the official Vue.js documentation.
Table of Contents
Vue Instance
Syntax Description new Vue({ options })Creates a new Vue instance elSpecifies the element to mount the Vue instance on dataSpecifies the data object for the Vue instance methodsSpecifies the methods for the Vue instance computedSpecifies the computed properties for the Vue instance watchSpecifies the watchers for the Vue instance createdLifecycle hook that is called when the Vue instance is created mountedLifecycle hook that is called when the Vue instance is mounted on the DOM updatedLifecycle hook that is called when the Vue instance is updated destroyedLifecycle hook that is called when the Vue instance is destroyed
Template Syntax
Syntax Description {{ expression }}Interpolates a JavaScript expression v-bind:attribute=""value"" or :attribute=""value""Binds an attribute to a value v-on:event=""handler"" or @event=""handler""Attaches an event listener to an element v-if=""condition""Renders an element if the condition is true v-else-if=""condition""Renders an element if the previous condition is false and this condition is true v-elseRenders an element if all previous conditions are false v-for=""item in items""Renders an element for each item in an array v-show=""condition""Toggles the visibility of an element based on a condition v-text=""text""Sets the text content of an element v-html=""html""Sets the HTML content of an element
Directives
Syntax Description v-bind:attribute=""value"" or :attribute=""value""Binds an attribute to a value v-on:event=""handler"" or @event=""handler""Attaches an event listener to an element v-if=""condition""Renders an element if the condition is true v-else-if=""condition""Renders an element if the previous condition is false and this condition is true v-elseRenders an element if all previous conditions are false v-for=""item in items""Renders an element for each item in an array v-show=""condition""Toggles the visibility of an element based on a condition v-text=""text""Sets the text content of an element v-html=""html""Sets the HTML content of an element
Computed Properties
Syntax Description computed: { propertyName() { return expression } }Defines a computed property this.propertyNameAccesses a computed property
Watchers
Syntax Description watch: { propertyName(newValue, oldValue) { /* handler */ } }Defines a watcher this.$watch('propertyName', (newValue, oldValue) => { /* handler */ })Defines a watcher
Lifecycle Hooks
Syntax Description created() { /* handler */ }Called when the Vue instance is created mounted() { /* handler */ }Called when the Vue instance is mounted on the DOM updated() { /* handler */ }Called when the Vue instance is updated destroyed() { /* handler */ }Called when the Vue instance is destroyed
Components
Syntax Description Vue.component('componentName', { options })Defines a global component new Vue({ components: { componentName: { options } } })Defines a local component <componentName></componentName>Renders a component
Events
Syntax Description @event=""handler"" or v-on:event=""handler""Attaches an event listener to an element this.$emit('event', data)Emits an event from a component
Forms
Syntax Description v-model=""property""Binds a form input to a property @submit.prevent=""handler""Attaches a submit event listener to a form @input=""handler""Attaches an input event listener to a form input
Filters
Syntax Description Vue.filter('filterName', (value) => { /* handler */ })Defines a global filter {{ value | filterName }}Applies a filter to a value
Mixins
Syntax Description Vue.mixin({ options })Defines a global mixin mixins: [mixin1, mixin2]Defines local mixins
Plugins
Syntax Description Vue.use(plugin)Installs a plugin Vue.prototype.$pluginMethod = (/* args */) => { /* handler */ }Defines a plugin method
Reference
Vue.js Documentation