VUE引入第三方js包及调用方法讲解

VUE引入第三方js包及调用方法

1、首先是第三方js包存放的位置 一定要放在 static 目录下否则引用不到

2、网上查找到的引用第三方包的四种方式 实测部分第三方js包没法使用，较稳定的方式是在 index.html 中引入js包

<script src="static/xxxxx.js"></script>

3、mounted 是初始化加载的方法 可以理解为jquery 中的页面加载完的初始化方法 如果第三方包有初始化需要调用的一些函数等 需要写在mounted 中

4、第三方js包如果有回调函数需要写实现 也需要写在 mounted  中让其初始化出来 否则js包 回调不到 代码如下

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },mounted () {
      /* eslint-disable */
      // 第三方js包 初始化方法
      Init("divId");
      // 初始化一个变量
      var id_tmp ='';
      // 回调函数
      huidiaohanshu = function(id){
        console.log(id);
        if(id_tmp != ''){
          console.log(id_tmp);
        }
        id_tmp = id;
      }
    },methods: {
      aaa:function (){
        // 点击事件 可以直接调用引入的第三方包中的函数
      }
    }
  }
</script>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接

赞 (0)

相关推荐

  • Vue 第三方字体图标引入 Font Awesome的方法

    Font Awesome 用过Bootstrap字体图符的小伙伴肯定很熟悉字体图符的便利,不管是在加载还是修改方面,字体图符远远优于图片.但是饿了吗封装的Element UI提供的字体图符少之又少,又不想用图片,只能自己扩展图符咯. Font Awesome 提供了675个可缩放的矢量图标,可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果.还有很多优点不一一举例,可自行查看文档:http://fontawesome.dashgame.com/ npm 安

  • Vue cli 引入第三方JS和CSS的常用方法分享

    第一种方法: 直接在index.html中引入 js <script type="text/javascript" src="static/mui.min.js" ></script> css <link rel="stylesheet" href="static/mui.min.css" rel="external nofollow" /> 第二种 在单页面中用impo

  • Vue 中如何正确引入第三方模块的方法步骤

    方法一:配置 webpack ProvidePlugin 全局引入 假设要使用到 jquery,那么可以通过配置 webpack 的 ProvidePlugin 的插件来全局引入: https://webpack.js.org/plugins/provide-plugin/ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) 方法二:包装成插件在 Vue 中调用 use 方法安装 另外一种比较靠谱的方法是将第三方模块打包成插件

  • vue中引入第三方字体文件的方法示例

    vue中引入第三方字体文件的方法示例

    在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 或者https://www.jb51.net/fonts/点击此链接,进行字体下载 2.将字体文件引入 自己定义一个文件夹,放入下载好的.ttf文件 先自己定义一个font.css文件,将下载好的字体文件的路径引入 @font-face { font-family: "华文行楷"; src:

  • VUE引入第三方js包及调用方法讲解

    VUE引入第三方js包及调用方法 1.首先是第三方js包存放的位置 一定要放在 static 目录下否则引用不到 2.网上查找到的引用第三方包的四种方式 实测部分第三方js包没法使用,较稳定的方式是在 index.html 中引入js包 <script src="static/xxxxx.js"></script> 3.mounted 是初始化加载的方法 可以理解为jquery 中的页面加载完的初始化方法 如果第三方包有初始化需要调用的一些函数等 需要写在mou

  • Vue中引入第三方JS库的四种方式

    Vue中引入第三方JS库的四种方式

    目录 一.绝对路径直接引入,全局可用 二.绝对路径直接引入,配置后,import 引入后再使用 三.webpack中配置 alias,import 引入后再使用 四.webpack 中配置 plugins,无需 import 全局可用 结论 我们以 jQuery 为例,来讲解 一.绝对路径直接引入,全局可用 主入口页面 index.html 中用 script 标签引入: <script src="./static/jquery-1.12.4.js"></script

  • 在html中引入外部js文件,并调用带参函数的方法

    在html中引入外部js文件,并调用带参函数的方法

    在html中引入外部js文件,并调用js文件中的带参函数 1 项目结构 2 编写a.js.test.html //a.js function abc(str){ alert(str); } //test.html <html> <head> <script type="text/javascript" src="a.js"></script> <script type="text/javascript&

  • Android.mk引入第三方jar包和so库文件的方法

    以SystemUI为例,如果需要在SystemUI中引入第三方jar包以及so库,可作如下处理: 首先,在frameworks\base\packages\SystemUI下新建libs目录: 将需要引入的jar包放置到libs目录下.然后修改Android.mk文件: 也就说引入jar包主要依赖的是LOCAL_PREBUILT_STATIC_JAVA_LIBRARIES和LOCAL_STATIC_JAVA_LIBRARIES.下面吧完整的Android.mk贴出来,方便拷贝. LOCAL_PA

  • vue引入静态js文件的方法

    由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置.由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译. vue-cli 2.0的作法是在static文件下创建js.vue-cli 3.0 的写法则是直接在public文件夹下创建js. 具体操作如下: 1.在public文件夹下创建config.js文件,里面文件的语法是es5,不允许使用浏览器不能兼容的es6语法.因为该文件不进行编译,es6部分语法浏览器不兼容. 2..在html文件

  • vue 引入公共css文件的简单方法(推荐)

    如果不想把css写在单文件组件里如这样: <template> <div id="app"> <div class='nav-box'> <ul class='nav'> <li> <a href="#/" rel="external nofollow" rel="external nofollow" >home</a> </li>

  • setinterval()与clearInterval()JS函数的调用方法

    本文实例讲述了setinterval()与clearInterval()JS函数的调用方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.

  • IntelliJ IDEA引入第三方jar包或查看Java源码的时候报decompiled.class file bytecode version:52.0(java 8)错误的解决办法

    IntelliJ IDEA引入第三方jar包或查看Java源码的时候报decompiled.class file bytecode version:52.0(java 8)错误的解决办法

    引入第三方jar包或者查看Java源码的时候,经常遇到问题如下: decompiled.class file bytecode version:52.0(java 8) ,open source file. 翻译一下上面的意思:(反编译 .class文件中的字节码 到Java 8 版本) 打开源文件 其实这个时候,你就得注意一下,你看到文件是 .class文件,还是 .java文件. 然后我就详细的总结了一下,二者的差别: 1.先是理论知识: .java为Java的源文件后缀,编写的代码需要写在

  • vscode快速引入第三方jar包发QQ邮件

    本文详细的介绍了vscode快速引入第三方jar包发QQ邮件,分享给大家,具体如下: 安装 jdk 直接安装下一步即是 安装maven 若想多版本切换,删除环境变量中的javapath即可 安装插件 vscode插件装一个pack就行了,后续想装哪个就哪个 使用第三方jar包 简单尝鲜某个jar包,使用maven或gradle太重.而配置一下.setting.json,然后将jar包直接放入该文件夹下即可,不需要手动添加到classpath. 当然前提是jar包先手动下载,大规模多依赖,还是需要

随机推荐