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:`<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安装版本号。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342