20200816

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:`

hello world

{{name}}

`,

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 }}


两处:{{}}和 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('

{{name}}
');

new Vue({

data(){

return {

name:''

}

},

render:res.render,

});


version

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

你可能感兴趣的:(20200816)