This document provides a comprehensive reference to the Vue.js API, covering its core functionalities and options for building dynamic user interfaces. Understanding these elements is crucial for efficient frontend development with Vue.js.

Vue Global Configuration

The Vue.config object allows you to modify Vue's global configurations before bootstrapping your application. This includes settings for developer tools inspection, performance tracing, production tips, ignored custom elements, and custom key aliases for event handling.

Vue Global API

The Global API provides essential methods for managing your Vue application. These include Vue.extend for creating component subclasses, Vue.mixin for applying global mixins, Vue.nextTick for deferring DOM updates, and Vue.use for installing plugins. Additionally, Vue.set and Vue.delete are vital for reactive data manipulation. You can also register global directives, filters, and components using their respective methods.

Instance Options: Data

When creating a Vue instance, you can define various options to control its behavior and data. The data option is a function that returns an object containing your component's reactive state. props define the data passed from parent components, with options for type checking and validation. computed properties offer cached, reactive values derived from your data, while watch allows you to react to data changes. methods provide reusable functions for your component.

Instance Options: DOM and Lifecycle Hooks

The el option specifies the DOM element to mount the Vue instance on. The template option defines the component's HTML structure, or you can use the render function for programmatic VNode creation. Vue provides a rich set of lifecycle hooks, such as beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, and destroyed, allowing you to hook into various stages of the instance's lifecycle. errorCaptured is available for handling errors in descendant components.

Instance Options: Assets and Composition

The directives and filters options allow you to register custom directives and filters globally or locally within a component. The mixins option enables code reuse by merging options from external objects. The extends option provides a way to declaratively extend another component.

Instance Options: Miscellaneous

Additional options include name for component identification and debugging, delimiters for customizing interpolation syntax, functional for creating stateless and instanceless components, inheritAttrs to control attribute inheritance, and comments to preserve HTML comments.

Instance Properties and Methods

Vue instances expose numerous properties like $data, $props, $el, $options, $parent, $root, $children, $refs, $attrs, and $listeners for accessing instance data and relationships. Instance methods include $watch for observing data changes, $set and $delete for reactive updates, $on, $once, $off, and $emit for event handling, and $mount, $forceUpdate, $nextTick, and $destroy for managing the instance lifecycle.

Directives and Special Attributes

Vue provides a powerful set of built-in directives such as v-text, v-html, v-show, v-if, v-for, v-on (shorthand @), and v-bind (shorthand :) for manipulating the DOM and handling user interactions. v-model facilitates two-way data binding on form inputs. Directives like v-pre, v-cloak, and v-once offer performance optimizations and control over compilation. Special attributes like key are essential for efficient list rendering and state management in transitions, while ref provides direct access to DOM elements or component instances.

For more in-depth information, refer to the official Vue.js API documentation.