Global configuration

Vue. config is a global configuration object

silent

  • Types: Boolean
  • Default value: false
  • usage
VUE.config.silent = true
Copy the code

Whether to cancel all logs and warnings of Vue

optionMergeStrategies

Options for customizing merge policies that affect each Vue instance.

  • Type: {[key: string]: Function}
  • Default value: {}
  • usage
Vue.config.optionMergeStrategies._my_option=function(parent,child,vm){
	return child+1;
}
var p = Vue.extend({
	_my_option:1
});
// p.options._my_option = 2;

Copy the code

devtools

Configure whether to allow vue-devtools to check code, default true (production false)

Vue.config.dectools = true
Copy the code

errorHandler

Specifies a handler that does not catch errors during component rendering and observation. The handler gets the error message and the Vue instance.

Vue.config.errorHandler = function(err,vm,info){
	// Processing error
}

Copy the code

Contains:

  1. Errors in the component lifecycle
  2. Error inside custom event handler

In a production environment, you still prefer to print errors directly to the console.

warnHandler

Defines handlers for runtime warnings. This parameter is valid only in the production environment.

Vue.config.warnHandler = function(msg,vm,trace){
	/ / processing,
	// The relationship trace inherited by the trace component
}

Copy the code

ignoredElements

Ignore definition elements other than Vue. Otherwise, an error is thrown.

Vue.config.ignoredElements = {
	'my-web-component'./ / ignore 'my - web - component'
	/^myElement/.// Ignore elements that begin with myElement
}

Copy the code

keyCode

Custom key alias.

'my - click: 177, the up: [do] 33}Copy the code

performance

Performance tracking for initialization, compilation, and patching

Vue.config.performance = false;

Copy the code
  1. Works in development mode and with performance-mark enabled browsers.
  2. Display in the Performance/event line panel of browser development tools.

productionTip

Setting vUE up to generate production prompts

Vue.config.productionTip = false;

Copy the code

Global PI,

extend

  • Parameters:

{Object} options

  • Usage:

Using the base Vue constructor, create a “subclass.” The parameter is an object that contains the component selection. The data option is a special case; note that it must be a function in vue.extend ().

var temp = Vue.extend({
	template:`<div>hello world<p>{{name}}</p></div>`.data(){
		return {
			name:'Meng Fan'}}});new temp().$mount("#app");

Copy the code

nextTick

  • Parameters:

{Function} [callback]

{Object} [context]

  • Usage:

A deferred callback is performed after the next DOM update loop ends. Use this method immediately after modifying the data to get the updated DOM

methods:{
	updateName(){
		this.name = 'Meng Fan';
		Vue.nextTick()
		.then(function(){
			// Dom is updated}}})Copy the code

set

  • Parameters:

{Object | Array} target

{string | number} propertyName/index

{any} value

  • Return value: the value set
  • Usage:

Adds a property to a reactive object that is also reactive. Vue.set(Object|Array,String|Number,any)

// 
updateUser(){
  Vue.set(this.user,"name"."004");
}

Copy the code
  1. Trigger view updates and cannot be used for normal new properties
  2. Object cannot be a Vue instance or its data object.

delete

  • Parameters:

Vue.delete(Object|Array,String|number)

  • Usage:
Vue.delete(this.user,'name');

Copy the code

directive

  • Parameters:

Vue.directive(String,Function|Object)

  • Usage:

Register or get global directives

// Register, hook functions are optional
Vue.directive('my-directive', {bind:function(){
		// Call once to initialize the Settings
	},
	inserted:function(){
		// called when the binding element is inserted into the parent element
	},
	update:function(){
		// called when the component is updated.
	},
	componentUpdated:function(){
		// called when the component and its child vNodes are updated.
	},
	unbind:function(){
		// called once, when unbound from the element.}});// Register. Bind and update will be called by default
Vue.directive("my-test".function(){
	/ / the bind and update
});
// Get instructions
var myDirective = Vue.directive('my-test');

Copy the code
  1. Hook function parameters (el, binding, vnode, oldVnode) \
  2. El: for the binding element DOM\
  3. Binding: An object containing read-only attributes (name, value, oldValue…)

filter

  • Parameters:

Vue.filter(String,Function)

  • Usage:

Register or get global filters. Format the text.

Vue.filter('my-filter'.function(value){
	// The value returned
});
var myFilter = Vue.filter('my-filter');
/ / use
{{name|myFilter }}
<div v-bind:id="id|myFilter('arg') "></div>

Copy the code
  1. In two places:{{}}andv-bindThe expressions \
  2. Operation chain can be used to|Instructions \
  3. Receive multiple parameters, arG being the second parameter.

component

  • Parameters:

Vue.component(String,Function|Object)

  • Usage:

Register or get components.

// Display the incoming constructor
Vue.component('my-component',Vue.extend({}));
// Pass in the option object, called by default
Vue.component('my-component'{});/ / to get
var myComponent = Vue.component('my-component');

Copy the code

use

  • Parameters:

{Object | Function} plugin

  • Usage:
Vue.use(myPlugin);
// Develop the component
MyPlugin.install = function(Vue,options){
	Vue.myMethods = function(){
		// Add global methods, attributes
	}
	Vue.directive('directive'.function(){
		// Add a global directive})}Copy the code
  1. A plug-in is an object that must provide the install method. \
  2. A plug-in is a function that will be used as the install method. \
  3. Must be inNew Vue ()Call before.

mixin

  • Parameters:

{Object} mixin

  • Usage:
Created :function(){// some behavior}});Copy the code
  1. Globally register a mixin that affects all Vue instances created after registration. Plug-in authors can use interfuse to inject custom behavior into components. Not recommended for use in application code.

compile

  • Parameters:

{string} template

  • Usage:

Compile the template string. Only useful for standalone builds.

var res = Vue.compile('<div>{{name}}</div>');
new Vue({
	data(){
		return {
			name:' '}},render:res.render,
});

Copy the code

Once is better than a thousand times