vue中如何引入js文件_vue调用外部js方法

vue中如何引入js文件_vue调用外部js方法1、直接在dom上操作:exportdefault{mounted(){consts=document.createElement(‘script’);s.type=’text/javascript’;s.src=’https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js’;documen…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

1、直接在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);
 },
}

2、用Vue 的 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> 在页面中调用

3、通过封装一个组件 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>

参考:

http://www.jb51.net/article/111634.htm

http://blog.csdn.net/sinat_17775997/article/details/55798611

原文链接:https://www.cnblogs.com/wang715100018066/p/7690641.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/184679.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Java集合篇:fail-fast机制 与 fail-safe

    Java集合篇:fail-fast机制 与 fail-safe

    2021年10月4日
    45
  • ITIL V3与ITIL V2的价值差异[通俗易懂]

    ITIL V3与ITIL V2的价值差异[通俗易懂]之前有篇日志写了ITILv3的介绍。这里说一下v3和v2才差异 ITILV3自从2007年推出后,已经将近两年了,这两年时间足够令相关的研究者和爱好者能知晓这个名词。对于新的名词、概念或者技术推出后,往往会有三个时期存在较多的争论,最热闹的时候一般是刚推出或临近推出的时期,而后慢慢冷淡一段时间后,不少有机会深入这些新事物的人慢慢地又会有第二个阶段的争论,最后一个阶段常常是这个新事物真正

    2022年10月6日
    5
  • 2011年全国电子设计大赛综合测试题_全国大学生英语竞赛 C类

    2011年全国电子设计大赛综合测试题_全国大学生英语竞赛 C类系统方案总体设计方案本系统主要由电位器模块、直流减速电机模块、电源模块、电机驱动模块、单片机最小系统班组成。电位器与主控芯片STM32F407ZGT6相连,通过电位的测算实时向MCU发送摆杆的状态,MCU通过控制LM298N电机驱动模块来控制直流减速电机,进而控制摆杆的状态,并使用LCD显示相关参数。方案的比较与选择2.1传感器的选择方案一:采用三轴陀螺仪测量摆杆的偏转角度。当选用三轴陀螺仪检测摆杆的偏转角度时,虽然可以计算摆杆的偏转角度,但是传感器必须要固定在摆杆上,同时需与M…

    2022年8月18日
    6
  • Ubuntu系统操作快捷键

    Ubuntu操作基本快捷键*打开主菜单=Alt+F1*运行=Alt+F2*显示桌面=Ctrl+Alt+d*最小化当前窗口=Alt+F9*最大化当前窗口=

    2021年12月22日
    40
  • VMware安装RedFlag Linux Desktop 5.0「建议收藏」

    VMware安装RedFlag Linux Desktop 5.0「建议收藏」第一次安装的时候提示找不到硬盘,google了一下,原来在新建虚拟机的时候要选择”OtherLinux2.6.xkernel”,另外SCSI适配器选择“LSILogic”。这样就ok了.

    2022年8月20日
    9
  • pytest重试_pytest失败重跑

    pytest重试_pytest失败重跑安装:pip3installpytest-rerunfailures重新运行所有失败用例要重新运行所有测试失败的用例,请使用–reruns命令行选项,并指定要运行测试的最大次数:$py

    2022年7月29日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号