Vue全局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;
1
适用于开发模式和支持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安装版本号。
网友评论