vue.js引入外部CSS样式和外部JS文件的方法


Posted in Javascript onJanuary 06, 2019

学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢?

一.引入外部CSS样式文件

1. 在app.vue中<style>下直接引入对应的路径

vue.js引入外部CSS样式和外部JS文件的方法

使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到<style></style>里面,而是发起新的请求获得样式资源,并且没有加scoped。

<style scoped>
 @import "../static/font/iconfont.css";
</style>

注:如果有样式时,应该放在#app上面引入,不然引入不成功!

2.@import改成<style src=""></style>引入外部样式

vue.js引入外部CSS样式和外部JS文件的方法

二. 引入外部JS文件

1. 一个动画需要的JS库(Velocity.js)

var Velocity = function (string) {

  // 这里是Velocity的具体实现算法

}

2.因为我们想在Vue组件中想要引入Velocity函数,那么要在Velocity加密算法的js脚本的最后,使用如下代码,将Velocity函数导出:

export {
 Velocity
}

注:外部脚本js不要放在components文件夹下,否则会一直报错。可以在src文件夹下新建一个js文件夹,然后将外部js脚本放在这个文件夹下,然后就可以在其他Vue组件中引入该js脚本。

3.在组件中使用 import { 函数名 } from 外部脚本名 来从外部js脚本中导入我们需要使用的函数。

import { Velocity } from '../config/velocity.js'

4. 在Vue组件中正常调用Velocity函数

enter: function (el, done) {
   Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
   Velocity(el, { fontSize: '1em' }, { complete: done })
  },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
jQuery TextBox自动完成条
Jul 22 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
Bootstrap4 gulp 配置详解
Jan 06 #Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 #jQuery
node.js连接mysql与基本用法示例
Jan 05 #Javascript
Node.js Buffer模块功能及常用方法实例分析
Jan 05 #Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 #Javascript
JS无限级导航菜单实现方法
Jan 05 #Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 #Javascript
You might like
PHP的FTP学习(二)
2006/10/09 PHP
PHP用户指南-cookies部分
2006/10/09 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
PHP线程的内存回收问题
2016/07/08 PHP
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
AngularJS入门之动画
2016/07/27 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
vc6编写python扩展的方法分享
2014/01/17 Python
在python中的socket模块使用代理实例
2014/05/29 Python
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
python用post访问restful服务接口的方法
2018/12/07 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
python 实现简易的记事本
2020/11/30 Python
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
财务信息服务专业自荐书范文
2014/02/08 职场文书
室内设计专业自荐信
2014/05/31 职场文书
2014年宣传工作总结
2014/11/18 职场文书