vue api详解
全局配置:silent: true 或者 false, 脚手架生成默认为false (取消 Vue 所有的日志与警告。)Vue.config.silent = trueoptionMergeStrategies:用于自定义选项的合并策略,Vue已经预定义了一些自己配置项的合并策略,extend,extends和mixins三种方式接收的options,最终都是通过mergeOpti...
全局配置:
silent: true 或者 false, 脚手架生成默认为false (取消 Vue 所有的日志与警告。)
Vue.config.silent = true
optionMergeStrategies:用于自定义选项的合并策略,Vue已经预定义了一些自己配置项的合并策略,extend,extends和mixins三种方式接收的options,最终都是通过mergeOptions进行合并的
var strats = config.optionMergeStrategies;
strats.props =
strats.methods =
strats.computed = function (parentVal, childVal) {
if (!childVal) { return Object.create(parentVal || null) }
if (!parentVal) { return childVal }
var ret = Object.create(null);
extend(ret, parentVal);
extend(ret, childVal);
return ret
};
errorHandler:可以进行全局错误收集,我们可以根据这个特性对前端异常做这样的处理:业务错误直接写在业务里;代码错误、ajax请求异常等错误可以进行全局捕获然后抛出,不至于前端页面挂掉
import Vue from 'vue'
//系统错误捕获
const errorHandler = (error, vm)=>{
console.error('抛出全局异常');
console.error(vm);
console.error(error);
}
Vue.config.errorHandler = errorHandler;
Vue.prototype.$throw = (error)=> errorHandler(error,this);
如果是ajax异步请求,异常需要通过this.$throw()手动抛出
productionTip:设置为 false
以阻止 vue 在启动时生成生产提示。脚手架默认生成false
Vue.config.productionTip = false
全局 API:
extend:使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。可以扩展 Vue 构造器,从而用预定义选项创建可复用的组件构造器。
let options = {
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
},
created(){
console.log('onCreated-1');
}
};
let BaseComponent = Vue.extend(baseOptions);
//基于基础组件BaseComponent,再扩展新逻辑.
new BaseComponent({
created(){
//do something
console.log('onCreated-2');
}
//其他自定义逻辑
});
new BaseComponent().$mount('#mount-point')//将baseComponent实例化 挂载到mount-point
mixin:全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入,向组件注入自定义的行为
Vue.mixin({
updated : function() {
console.log("全局updated");
}
});
nextTick:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
- 在Vue生命周期的
created()
钩子函数进行的DOM操作一定要放在Vue.nextTick()
的回调函数中
delete:删除对象的属性。如果对象是响应式的,确保删除能触发更新视图。在 2.2.0+ 中同样支持在数组上工作
directive:自定义指令或者获取全局指令,Vue.directive要在实例初始化之前,不然会报错,还有,定义的指令不支持驼峰式写法,也会报下面同样的错,钩子函数:bind inserted update componentUpdated unbind
Vue.directive('focus', {//元素一渲染就自动聚焦
inserted: function (el) {
el.focus()
}
})
//使用
<input v-focus>
filter:注册或获取全局过滤器
Vue.filter('my-filter', function (value) {//注册
})
var myFilter = Vue.filter('my-filter')//获取
component:注册获取全局组件
Vue.component('my-component', Vue.extend({ /* ... */ }))
Vue.component('my-component', { /* ... */ })
var MyComponent = Vue.component('my-component')
use:该方法需要在调用 new Vue()
之前被调用。
局部api:
mixins:选项接受一个混合对象的数组。局部混入,这些混合实例对象可以像正常的实例对象一样包含选项,他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。(混入执行顺序:全局混入语句>局部混入语句>原本的语句)
<div id="app">
{{num}}
<button @click="add">addNumber</button>
</div>
<script type="text/javascript">
var mixin = {
updated: function() {
console.log("局部混合updated");
}
};
new Vue({
el: "#app",
data: {
num : 1
},
methods : {
add : function() {
this.num++;
}
},
updated : function(){
console.log('原生updated');
},
mixins: [mixin]
});
</script>
更多推荐
所有评论(0)