Vue Js 2

Posted on  by admin

You’re browsing the documentation for v2.x and earlier. For v3.x, click here.

Lifecycle Diagram

Vue.config is an object containing Vue’s global configurations. You can modify its properties listed below before bootstrapping your application:.

Declarative Rendering

Suppress all Vue logs and warnings. Type:{ [key: string]: Function }. Define custom merging strategies for options. The merge strategy receives the value of that option defined on the parent and child instances as the first and second arguments, respectively.

Instance Lifecycle Hooks

The context Vue instance is passed as the third argument.

See also:Custom Option Merging Strategies. Default:true (false in production builds).

Handling User Input

Configure whether to allow vue-devtools inspection. This option’s default value is true in development builds and false in production builds.

What is Vue.js?

You can set it to true to enable inspection for production builds. Assign a handler for uncaught errors during component render function and watchers.

The handler gets called with the error and the Vue instance. In 2.2.0+, this hook also captures errors in component lifecycle hooks.

Also, when this hook is undefined, captured errors will be logged with console.error instead of crashing the app.

Data and Methods

In 2.4.0+, this hook also captures errors thrown inside Vue custom event handlers.

In 2.6.0+, this hook also captures errors thrown inside v-on DOM listeners. In addition, if any of the covered hooks or handlers returns a Promise chain (e.g.

async functions), the error from that Promise chain will also be handled.

Error tracking services Sentry and Bugsnag provide official integrations using this option.

Assign a custom handler for runtime Vue warnings. Note this only works during development and is ignored in production.

Type:Array. Make Vue ignore custom elements defined outside of Vue (e.g., using the Web Components APIs). Otherwise, it will throw a warning about an Unknown custom element, assuming that you forgot to register a global component or misspelled a component name.

Instance Methods / Events

Type:{ [key: string]: number | Array }. Define custom key alias(es) for v-on. Default:false (from 2.2.3+). Set this to true to enable component init, compile, render and patch performance tracing in the browser devtool performance/timeline panel.

Instance Properties

Only works in development mode and in browsers that support the performance.mark API. Set this to false to prevent the production tip on Vue startup. Create a “subclass” of the base Vue constructor. The argument should be an object containing component options.

The special case to note here is the data option - it must be a function when used with Vue.extend(). Will result in:. See also:Components. Defer the callback to be executed after the next DOM update cycle.

Instance Methods / Lifecycle

Use it immediately after you’ve changed some data to wait for the DOM update. New in 2.1.0+: returns a Promise if no callback is provided and Promise is supported in the execution environment.

UMDCommonJSES Module (for bundlers)ES Module (for browsers)
Fullvue.jsvue.common.jsvue.esm.jsvue.esm.browser.js
Runtime-onlyvue.runtime.jsvue.runtime.common.jsvue.runtime.esm.js-
Full (production)vue.min.js--vue.esm.browser.min.js
Runtime-only (production)vue.runtime.min.js---

Instance Methods / Data

  • Please note that Vue does not come with a Promise polyfill, so if you target browsers that don’t support Promises natively (looking at you, IE), you will have to provide a polyfill yourself.

  • See also:Async Update Queue. Returns: the set value. Adds a property to a reactive object, ensuring the new property is also reactive, so triggers view updates.

  • This must be used to add new properties to reactive objects, as Vue cannot detect normal property additions (e.g. this.myObject.newProperty = 'hi').

  • The target object cannot be a Vue instance, or the root data object of a Vue instance. See also:Reactivity in Depth. Only in 2.2.0+: Also works with Array + index. Delete a property on an object. If the object is reactive, ensure the deletion triggers view updates.

  • This is primarily used to get around the limitation that Vue cannot detect property deletions, but you should rarely need to use it. The target object cannot be a Vue instance, or the root data object of a Vue instance.

  • See also:Reactivity in Depth. Register or retrieve a global directive.

    • See also:Custom Directives. Register or retrieve a global filter. See also:Filters. Register or retrieve a global component. Registration also automatically sets the component’s name with the given id. See also:Components. Install a Vue.js plugin. If the plugin is an Object, it must expose an install method. If it is a function itself, it will be treated as the install method.

    • The install method will be called with Vue as the argument. This method has to be called before calling new Vue().

Ready for More?

When this method is called on the same plugin multiple times, the plugin will be installed only once. See also:Plugins. Apply a mixin globally, which affects every Vue instance created afterwards.

This can be used by plugin authors to inject custom behavior into components. Not recommended in application code. See also:Global Mixin. Compiles a template string into a render function. Only available in the full build. See also:Render Functions.

Make an object reactive. Internally, Vue uses this on the object returned by the data function. The returned object can be used directly inside render functions and computed properties, and will trigger appropriate updates when mutated.

destroyed

vm.$parent

performance

It can also be used as a minimal, cross-component state store for simple scenarios:.

vm.$once( event, callback )

In Vue 2.x, Vue.observable directly mutates the object passed to it, so that it is equivalent to the object returned, as demonstrated here.

Global Config

In Vue 3.x, a reactive proxy will be returned instead, leaving the original object non-reactive if mutated directly. Therefore, for future compatibility, we recommend always working with the object returned by Vue.observable, rather than the object originally passed to it.

See also:Reactivity in Depth. Details: Provides the installed version of Vue as a string. This is especially useful for community plugins and components, where you might use different strategies for different versions.

Type:Object | Function. Restriction: Only accepts Function when used in a component definition. The data object for the Vue instance. Vue will recursively convert its properties into getter/setters to make it “reactive”. The object must be plain: native objects such as browser API objects and prototype properties are ignored. A rule of thumb is that data should just be data - it is not recommended to observe objects with their own stateful behavior.

productionTip

Once observed, you can no longer add reactive properties to the root data object.

It is therefore recommended to declare all root-level reactive properties upfront, before creating the instance.

model

After the instance is created, the original data object can be accessed as vm.$data.

Vue.version

The Vue instance also proxies all the properties found on the data object, so vm.a will be equivalent to vm.$data.a.

Properties that start with _ or $ will not be proxied on the Vue instance because they may conflict with Vue’s internal properties and API methods.

Server-Side Rendering

You will have to access them as vm.$data._property. When defining a component, data must be declared as a function that returns the initial data object, because there will be many instances created using the same definition.

If we use a plain object for data, that same object will be shared by reference across all instances created! By providing a data function, every time a new instance is created we can call it to return a fresh copy of the initial data.

Options / DOM

If required, a deep clone of the original object can be obtained by passing vm.$data through JSON.parse(JSON.stringify(..)). Note that if you use an arrow function with the data property, this won’t be the component’s instance, but you can still access the instance as the function’s first argument:.

Getting Started

See also:Reactivity in Depth. Type:Array | Object.

Options / Misc

A list/hash of attributes that are exposed to accept data from the parent component.

It has an Array-based simple syntax and an alternative Object-based syntax that allows advanced configurations such as type checking, custom validation and default values.
With Object-based syntax, you can use following options:. type: can be one of the following native constructors: String, Number, Boolean, Array, Object, Date, Function, Symbol, any custom constructor function or an array of those.