Vue如何引入远程JS文件


Posted in Javascript onApril 20, 2017

问题

最近在使用 Vue 做东西,用到钉钉扫描登录的功能,这里需要引入远程的 js 文件,因为 Vue 的方式跟之前的不太一样,又不想把文件下载到本地应用,找了一下解决的方法,貌似都需要引入第三方的库,最后找到了解决方案,分享之。

思路

一开始的思路是在 Vue 加载完 Dom 之后(mounted),使用 JavaScript 脚本在 body 中插入远程的脚本文件。

后来发现了 Vue 的 createElement 方法,简单的封装一个组件解决问题。

解决方法

第一版代码(直接在操作 Dom )如下:

export default {
 mounted() {
  const s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js';
  document.body.appendChild(s);
 },
}

使用 createElement 方法:

export default {
 components: {
  'dingtalk': {
   render(createElement) {
    return createElement(
     'script',
     {
      attrs: {
       type: 'text/javascript',
       src: 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js',
      },
     },
    );
   },
  },
 },
}

// 使用 <dingtalk></dingtalk> 在页面中调用

终极方案

通过封装一个组件 remote-js 实现:

export default {
 components: {
  'remote-js': {
  render(createElement) {
   return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});
  },
  props: {
   src: { type: String, required: true },
  },
 },
 },
}

使用方法:

<remote-js src="https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js">
</remote-js>

因为刚开始学习 Vue 有什么问题欢迎大家指出,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery validate.js表单验证的基本用法入门
May 13 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
AngularJS改变元素显示状态
Apr 20 #Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 #Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 #Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 #Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 #Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 #Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 #Javascript
You might like
php的计数器程序
2006/10/09 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
php生成图片验证码
2015/06/09 PHP
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
关于element的表单组件整理笔记
2021/02/05 Javascript
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
Python回调函数用法实例详解
2015/07/02 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
益模软件Java笔试题
2012/03/27 面试题
高校学生干部的自我评价分享
2013/11/04 职场文书
个人实用的自我评价范文
2013/11/23 职场文书
户外宣传策划方案
2014/05/25 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
七一讲话心得体会
2014/09/05 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
代办社保委托书范文
2014/10/06 职场文书