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 圆角div的实现代码
Oct 15 Javascript
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 Javascript
vant时间控件使用方法详解
Dec 24 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
Jan 07 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
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
德生PL330的评价与改造
2021/03/02 无线电
php xml实例 留言本
2009/03/20 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
PHP运行模式汇总
2016/11/06 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
Python通过select实现异步IO的方法
2015/06/04 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
详解Python是如何实现issubclass的
2019/07/24 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
Python datetime包函数简单介绍
2019/08/28 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
毕业典礼主持词
2015/06/29 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
MySQL数据库必备之条件查询语句
2021/10/15 MySQL