Vue 基础API汇总—全局配置、全局API

全局配置

Vue.config 是全局配置对象。

silent

默认false，是否取消Vue所有的日志与警告。
Vue.config.silent = true;

optionMergeStrategies

自定义合并策略的选项。影响每一个Vue实例。

Vue.config.optionMergeStrategies._my_option=function(parent,child,vm){
	return child+1;
}
var p = Vue.extend({
	_my_option:1
});
// p.options._my_option = 2;

混入、合并策略这一块理解欠缺。

devtools

配置是否允许vue-devtools检查代码。默认true（生产版为false）
Vue.config.devtools = true

errorHandler

指定组件渲染和观察期间未捕获错误的处理函数。处理函数可获取到错误信息和Vue实例。

Vue.config.errorHandler = function(err,vm,info){
	// 处理错误
}

包含： 1.组件生命周期里的错误。
    2.自定义事件处理函数内部的错误。
在生产环境中还是喜欢错误发生时直接打印在控制台。

warnHandler

定义运行时警告的处理函数。只在生产环境下生效。

Vue.config.warnHandler = function(msg,vm,trace){
	// 处理	,
	// trace 组件继承的关系追踪
}

ignoredElements

忽略Vue之外的自定义元素。否则，会抛出错误。

Vue.config.ignoredElements = {
	'my-web-component',                  // 忽略‘my-web-component’
	/^myElement/,                        // 忽略以myElement开头的元素
}

keyCodes

自定义键位别名。

Vue.config.keyCodes = {
	'my-click':177,
	up:[33,45]
}

performance

初始化、编译、打补丁的性能追踪。

Vue.config.performance = false;

适用于开发模式和支持performance.mark的浏览器。
在浏览器开发工具的性能/时间线面板展示。

productionTip

设置vue启动时生成生产提示。

Vue.config.productionTip = false;

全局API

extend

基础Vue构造器，创建一个子类。参数是包含组件选项的对象。

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

nextTick

在下次数据更新后执行延迟回调。在数据修改后，立即执行该方法。

methods:{
	updateName(){
		this.name = '黎明';
		Vue.nextTick()
		.then(function(){
			// dom update
		})
	}
}

set

向响应式对象中添加属性，该属性也是响应式的。

Vue.set(Object|Array,String|Number,any);

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

触发视图更新，不能用于普通的新增属性。
对象不能使Vue实例或者实例的根数据对象。

delete

删除对象的属性。

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

Vue.delete(this.user,'name');

确保一些属性被删除不能更新视图的问题。

directive

注册或获取全局指令

Vue.directive(String,Function|Object)

// 注册，钩子函数均可选
Vue.directive('my-directive',{
	bind:function(){
		//调用一次，初始化设置
	},
	inserted:function(){
		// 绑定元素插入父元素时调用
	},
	update:function(){
		//所在组件更新时调用。
	},
	componentUpdated:function(){
		//所在组件以及子VNode更新时调用。
	},
	unbind:function(){
		//调用一次，与元素解绑时调用。
	}
});
// 注册，默认会调用bind、update
Vue.directive("my-test",function(){
	// bind、update
});
// 获取指令
var myDirective = Vue.directive('my-test');

钩子函数参数（el,binding,vnode,oldVnode）
el:为绑定元素DOM
binding:包含只读属性的一个对象（name、value、oldValue…）

filter

注册或获取全局过滤器。进行文本格式化。

Vue.filter(String,Function)

Vue.filter('my-filter',function(value){
	// 返回的值
});
var myFilter = Vue.filter('my-filter');
// 使用
{{name|myFilter }}
<div v-bind:id="id|myFilter('arg') "></div>

两处：{{}}和 v-bind表达式
可使用操作链，以|指示
接收多个参数，arg为第二个参数。

component

注册或获取组件。

Vue.component(String,Function|Object)

//显示传入构造器
Vue.component('my-component',Vue.extend({}));
// 传入选项对象，默认调用
Vue.component('my-component',{});
// 获取
var myComponent = Vue.component('my-component');

use

安装Vue.js插件

Vue.use(myPlugin);
// 开发组件
MyPlugin.install = function(Vue,options){
	Vue.myMethods = function(){
		// 添加全局方法、属性
	}
	Vue.directive('directive',function(){
		// 添加全局指令
	})
}

插件是一个对象，必须提供install方法。
插件是一个函数，会被作为install方法。
须在new Vue（）之前调用。

mixin

全局注入一个混入。影响每一个创建的Vue实例。

Vue.mixin({
	created:function(){
		// 一些行为
	}
});

影响每一个Vue实例，包括引用的插件。
避免使用

compile

编译模板字符串。只在独立构建时有用。

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

version

提供字符串形式的Vue安装版本号。

眼过千遍不如手过一遍