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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 基于CCXT接口建立的多模块数字货币量化交易模型(MMQT)在python中的实现[通俗易懂]

    基于CCXT接口建立的多模块数字货币量化交易模型(MMQT)在python中的实现[通俗易懂]目录一、前言问题的引出MMQT模型的优势二、MMQT简介1.接口模块2.风控模块3.策略模块4.反馈模块三、MMQT的代码实现1.定义中间模块(类)1.初始化2.获取账户信息、交易对信息、订单信息3.数据更新4.创建订单5.获取订单状态6.撤销订单7.获取k线信息2.定义风控模块(类)3.定义策略模块(类)1.策略模块初始化2.技术分析及交易下单3.反馈模块4.相关类实例化1.ccxt实例化2.中间类、风控类、策略类实例化3.调控程序四、回测的代码实现1.获取数据2.数据清洗3.模拟账户初始化4.回测程序五

    2022年6月26日
    115
  • 增量式光电编码器原理及其结构图_绝对式光电编码器工作原理

    增量式光电编码器原理及其结构图_绝对式光电编码器工作原理增量式光电编码器原理及其结构     增量式光电编码器的特点是每产生一个输出脉冲信号就对应于一个增量位移,但是不能通过输出脉冲区别出在哪个位置上的增量。它能够产生与位移增量等值的脉冲信号,其作用是提供一种对连续位移量离散化或增量化以及位移变化(速度)的传感方法,它是相对于某个基准点的相对位置增量,不能够直接检测出轴的绝对位置信息。一般来说,增量式光电编码器输出A、B两相互差90°

    2022年9月30日
    2
  • linuxchmod用法_chmod 指定用户

    linuxchmod用法_chmod 指定用户chmod—-改变一个或多个文件的存取模式(mode)chmod[options]modefiles只能文件属主或特权用户才能使用该功能来改变文件存取模式。mode可以是数字形式或以whoopcodepermission形式表示。who是可选的,默认是a(所有用户)。只能选择一个opcode(操作码)。可指定多个mode,以逗号分开。

    2022年10月20日
    2
  • SpringBoot +DynamicDataSource切换多数据源记录方法

    SpringBoot +DynamicDataSource切换多数据源记录方法

    2020年11月9日
    1.7K
  • 各种数据库默认端口总结

    各种数据库默认端口总结关系型数据库一 :Oracle驱动:oracle.jdbc.driver.OracleDriverURL:jdbc:oracle:thin:@&lt;machine_name&gt;&lt;:port&gt;:dbname注:machine_name:数据库所在的机器的名称,如果是本机则是127.0.0.1或者是localhost,如果是远程连接,则是远程的IP地址;port:端口号,默…

    2022年6月13日
    35
  • 单片机控制步进电机-电路连接

    单片机控制步进电机-电路连接单片机控制步进电机-线路连接说明:如何利用单片机去控制步进电机?本案例讲解的内容是硬件连接部分,采用常用的电子器件去实现单片机控制步进电机的功能。后续会分别讲解单片机程序,S曲线生成方法,上位机等相关内容。硬件清单:1、单片机最小系统(本案例使用Atmega16芯片)2、步进电机(二相四线)3、稳压电源(24V)4、步进电机驱动器(TB6600)整体连接图:原理图:控制原…

    2022年5月31日
    31

发表回复

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

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