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


相关推荐

  • C语言学生成绩管理系统详解[通俗易懂]

    文章目录一、系统概述二、数据类型三、自定义函数说明四、运行界面五、源代码源代码请直接跳到最后引言:最近写了C语言的大作业,感觉做得还行,记录一下,给后人一些参考,给自己留更深印象方便后续改进!不知道发了这篇博客会不会认为我抄袭…害怕.jpg一、系统概述使用单向链表和文件作为基本数据结构,设计一个学生成绩管理程序,管理某学校学生成绩。[1]插入数据[2]修改对应数据项的数据[3]删除对应学号的信息[4]查找某学号的信息[5]查找不及格学生[6]对学生成绩进行排名[7]统计各个等级的学生

    2022年4月11日
    52
  • SpringMVC: web.xml中声明DispatcherServlet时一定要加入load-on-startup标签[通俗易懂]

    SpringMVC: web.xml中声明DispatcherServlet时一定要加入load-on-startup标签

    2022年1月23日
    34
  • linux rpm卸载包及其依赖,Linux下如何用rpm卸载软件 rpm依赖包强制卸载

    linux rpm卸载包及其依赖,Linux下如何用rpm卸载软件 rpm依赖包强制卸载以Mysql为例。#查看安装的Mysql版本sjgx2:/usr/local/mysql/bin#rpm-qa|grep-imysqlMySQL-client-5.1.17-0.glibc23MySQL-server-5.1.17-0.glibc23#卸载sjgx2:/usr/local/mysql/bin#rpm-eMySQL-client-5.1.17-0.glibc23s…

    2022年9月22日
    0
  • stm32收发 wiegand 韦根协议开发详解

    stm32收发 wiegand 韦根协议开发详解在刚开始接触到韦根接口时,知道这是一种门禁相关的传输协议。其中有两种比较常用的韦根数据格式,韦根26和韦根34,其中韦根26是开放的,韦根34开不开放我不知道(看样子不开放),但是在网上还是能看到韦根34的代码协议,下面介绍一下韦根26以及韦根34的相关内容。Wiegand26格式:各数据位的含义:第1位: 为输出数据2—13位的偶校验位第2-9位:…

    2022年10月27日
    0
  • c语言心形曲线_c语言怎么画心

    c语言心形曲线_c语言怎么画心原理:利用内嵌循环绘制方程:(x2+y2−1)3=x2y3(x^2+y^2-1)^3=x^2y^3(x2+y2−1)3=x2y3的图像代码:/*说明:本程序的原理是根据方程(x^2+y^2-1)^3=x^2*y^3作差得值f,若f<=0,则用’*’填充,否则就用”填充最后得到了心形曲线*/#include<cstdio>#include<iostream>usingnamespacestd;intmain(){float

    2022年8月31日
    0
  • tar 解压缩命令详解

    tar 解压缩命令详解以下是对tar命令的一些总结:解压操作:tar解压缩命令详解这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个。下面的参数是根据需要在压缩或解压档案时可选的。下

    2022年7月1日
    24

发表回复

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

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