A. vue外部js动态加载
vue加载远程(网络)jsvue项目中有时候会遇到加载远程(网络)js的情况,常用的方法有以下两种:
以加载在线的cesium为例
在组件中可以通过window.Cesium来获取加载的js,示例如下:
在main.js里注册组件
注意:注册组件一定要在newVue之前
在组件中使用:
这样使用比较灵活还能在加载完成和加载失败时做一些操作。
vue项目中插入外部js
script1.onload要在页面加载js之前写
···
constcenterRotationAd=document.getElementById("centerRotationAd");
···
VUE中如何动态编译js需求:动态获取一段字符串类型的js脚本,动态编译它并且可以完美在vue中运行与之交互。
实现:动态编译js的方式有eval和newfunction
简单例子:
eval:
newfunction:
显然后者更利于扩展,详细了解区别可以参考链接内容:
要注意使用newFunction,在vue环境中直接赋值的方式函数作用域与赋值vue结构对象不同:
如何在.vue文件中引入外部jsVue的createElement方法,简单的封装一个组件解决问题。
解决方法
第一版代码(直接在操作Dom)如下:
exportdefault{
mounted(){
consts=document.createElement('script');
s.type='text/javascript'
s.src=''
document.body.appendChild(s);
},
}
使用createElement方法:
exportdefault{
components:{
'dingtalk':{
render(createElement){
returncreateElement(
'script',
{
attrs:{
type:'text/javascript',
src:'',
},
},
);
},
},
},
}
//使用在页面中调用
终极方案
通过封装一个组件remote-js实现:
exportdefault{
components:{
'remote-js':{
render(createElement){
returncreateElement('script',{attrs:{type:'text/javascript',src:this.src}});
},
props:{
src:{type:String,required:true},
},
},
},
}
使用方法:
remote-jssrc=""remote-js