vue.js引入外部CSS样式和外部JS文件的方法
学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢?
一.引入外部CSS样式文件
1. 在app.vue中<style>下直接引入对应的路径
使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到<style></style>里面,而是发起新的请求获得样式资源,并且没有加scoped。
<style scoped>@import "../static/font/iconfont.css";
</style>
注:如果有样式时,应该放在#app上面引入,不然引入不成功!
2.@import改成<style src=""></style>引入外部样式
二. 引入外部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 })},
vue.js引入外部CSS样式和外部JS文件的方法相关推荐
- Vue项目实战07:引入Normalize.css样式初始化
Normalize.css简介 我们在开发的时候会发现很多样式都自带了各自特有的默认样式,而这样样式通常会被遗忘,导致样式调整起来很繁琐.为了让样式统一,我们在开发的时候通常会对一些元素进行样式重置, ...
- html点击按钮换css文件夹,按钮如何使用外部css样式
按钮如何使用外部css样式 1.首先新建btn.css样式文件 将默认的button样式去除/** * Reset button styles. * It takes a bit of work to ...
- html5hover鼠标悬停,不使用hover外部CSS样式实现hover鼠标悬停改变样式
不能使用外部CSS样式实现hover鼠标悬停改变样式 在DIV+CSS网页布局中,有时我们不能直接使用外部CSS样式控制DIV样式,比如对a设置a:hover样式. 可以使用onMouseOver(鼠 ...
- CSS:链接外部css样式时候link标签使用方法
1.link实例 <head> <link rel="stylesheet" type="text/css" href="mysty ...
- IOS UIWebView引用外部CSS样式(转载)
首先,将要引用的CSS样式导入到工程文件,然后我们可以自己拼装一个网页并引用这个样式,具体代码实现如下: -(void)viewDidLoad { [super viewDidLoad]; NSStr ...
- vue动态获取css样式,Vue 框架之动态绑定 css 样式实例分析
今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使 ...
- Vue 项目部署出现css样式失效的解决方案
Vue 项目部署出现css样式失效的解决方案 参考文章: (1)Vue 项目部署出现css样式失效的解决方案 (2)https://www.cnblogs.com/Desmondexperience/ ...
- JS添加/修改CSS样式
JS添加/修改CSS样式是通过.style.xxxx属性=值来实现的,记得是等号赋值. document.getElementById("xx").style.xxx=xxxxx; ...
- vue项目引入不符合ES6模块化标准的JS文件
vue项目引入不符合ES6模块化标准的JS文件 实现方式 实现原理 实现方式 要引入的文件放在public目录下,在index.html中通过script标签引入 实现原理 参考vue官网–处理静态资 ...
- 如何通过js改变css样式,如何通过JS 动态改变CSS样式
如何通过JS 动态改变CSS样式0 豆豆dou...2013.09.15浏览640次分享举报 .TLIWREGION3CSS { position:absolute; left:32px; top:4 ...
最新文章
- java junit 运行_appium+java+junit demo运行
- 最小割 ---- 集合冲突模型 ----- P1646 [国家集训队]happiness
- java mysql 查询结果_JAVA中显示MYSQL查询结果
- SHOI2008仙人掌图(tarjan+dp)
- Spring源码编译及过程中的一些问题总结
- Go语言TCP网络编程(详细)
- nyoj36最长公共子序列 动态规划
- 在Windows下为PHP安装redis扩展
- [转]汇编语言的准备知识--给初次接触汇编者 3
- 简历javaweb项目描述怎么写_硬件工程师简历-项目经验怎么写【范文】
- WebSocket 实现原理
- 异常:Error resolving template “xxx“, template might not exist or might not be accessible...解决办法
- 教你在电脑中学会视频格式批量转换
- Xilinx XC7Z020双核ARM+FPGA开发板试用合集——硬件赏析
- python知识点大全-2
- %02x与%2x 区别
- rust怎么弄区域网_Rust10个实用小技巧,教你轻松省时省空间!
- Java高级之HashMap中的put()方法和putIfAbsent()方法
- UVALive 4850 Installations 贪心
- Kubernetes1.4新特性前瞻:设置JOB执行计划
热门文章
- visual studio 2013 快速安全ocx(ActiveX控件)开发
- 编码顺序、frame_num和POC
- Bookshelf 2 POJ - 3628(01背包||DFS)
- vue可填写表格_vue表格中添加一条数据且可编辑
- Redis常用数据结构
- STL---二分查找、去重、全排列
- 模板引擎工作原理_zuma致:新手SEO须知搜索引擎工作原理
- iphone实用配置工具_除了让你买买买,苹果官网还隐藏着这些实用网页工具
- python矩阵计算器心得_NLP-tas词汇共现矩阵计算工具
- bootstraptable查看详情_bootstrap table detailView详情视图树形模式