vue怎么把api 挂载到全局_Vue全局API总结

1.extend用于创建一个子类Vue,用$mount来挂载

template:'

{ {a}} { {b}} { {c}}

',

data:function(){return{

a:'Welcome',

b:"To",

c:"BeiJing"}

}

});new app().$mount("#app")

2.Vue.nextTick([callback,context])在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

Title

获取标签内容

{ {message}}

var app=newVue({

el:"#app",

data:{

message:"我爱北京天安门"},

methods:{

getTag:function(){this.message='我爱我家';

console.log(document.querySelector('h1').innerHTML)

}

}

});

结果如下：

我们可以看到视图更新以后拿到的并不是更新后的innerHTML，因为dom结构更新是一个异步事件

再看下面的例子

Title

获取标签内容

{ {message}}

var app=newVue({

el:"#app",

data:{

message:"我爱北京天安门"},

methods:{

getTag:function(){this.message='我爱我家';this.$nextTick(function(){

console.log(document.querySelector('h1').innerHTML)

})

}

}

});

我们可以看到它会等dom结构更新完成后再去获取更新后的innerHTML值

3.Vue.set(target,key,value)普通的情况下对Vue实例里面的数据进行更改，数据改掉了，但是呈现在页面的视图并没有发生变化，所以借用该方法视图也会跟着刷新

普通方式视图并没有刷新

var app=newVue({

el:"#app",

data:{

arr:['北京','上海','天津','重庆']

}

});

app.arr[0]='北京天安门';

set方式视图会刷新

<