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>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接
相关推荐
-
Vue 中如何正确引入第三方模块的方法步骤
方法一:配置 webpack ProvidePlugin 全局引入 假设要使用到 jquery,那么可以通过配置 webpack 的 ProvidePlugin 的插件来全局引入: https://webpack.js.org/plugins/provide-plugin/ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) 方法二:包装成插件在 Vue 中调用 use 方法安装 另外一种比较靠谱的方法是将第三方模块打包成插件
-
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 第三方字体图标引入 Font Awesome的方法
Font Awesome 用过Bootstrap字体图符的小伙伴肯定很熟悉字体图符的便利,不管是在加载还是修改方面,字体图符远远优于图片.但是饿了吗封装的Element UI提供的字体图符少之又少,又不想用图片,只能自己扩展图符咯. Font Awesome 提供了675个可缩放的矢量图标,可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果.还有很多优点不一一举例,可自行查看文档:http://fontawesome.dashgame.com/ npm 安
-
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库的四种方式
目录 一.绝对路径直接引入,全局可用 二.绝对路径直接引入,配置后,import 引入后再使用 三.webpack中配置 alias,import 引入后再使用 四.webpack 中配置 plugins,无需 import 全局可用 结论 我们以 jQuery 为例,来讲解 一.绝对路径直接引入,全局可用 主入口页面 index.html 中用 script 标签引入: <script src="./static/jquery-1.12.4.js"></script
-
在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)错误的解决办法
引入第三方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包先手动下载,大规模多依赖,还是需要
随机推荐
- ORACLE 12C PDB 维护基础知识介绍
- vue滚动轴插件better-scroll使用详解
- Linux内核链表实现过程
- Oracle 跨库 查询 复制表数据 分布式查询介绍
- 使用Python写一个贪吃蛇游戏实例代码
- 微信小程序 wx.login解密出现乱码的问题解决办法
- JAVA POST与GET数据传递时中文乱码问题解决方法
- Vue.js:使用Vue-Router 2实现路由功能介绍
- java中计算集合的交差并集示例代码
- shell脚本实现的网站日志分析统计(可以统计9种数据)
- 总结Python编程中函数的使用要点
- XP安装过程中的潜在危险
- 使用Rhino让java执行javascript的方法实例
- C#词法分析器之转换DFA详解
- php中的时间处理
- Android自定义View绘图实现拖影动画
- 浅谈spring中scope作用域
- 对numpy中向量式三目运算符详解
- bash命令使用详解
- 50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)