专栏首页娱乐心理测试vue.js引入外部CSS样式和外部JS文件的方法

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

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

一.引入外部CSS样式文件

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

image

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

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

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

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

image

二. 引入外部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 })
    },

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • wxml、wxss、js 引入外部文件的方法

    import可以在文件中使用目标文件定义的template,import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 im...

    honey缘木鱼
  • mpvue 全局变量在HTML模板<template> 的应用

    我们在开发项目时,经常用到的就是全局变量,在vue.js项目中,只要在main.js设置好全局变量后,在所有的页面方法和模板中都可以引用,把vue.js项目中的...

    honey缘木鱼
  • 解读mpvue官方文档的Class 与 Style 绑定及不支持语法

    在vue.js项目转化为小程序时,把原来页面的代码直接拷贝过去,发现布局改变很多,很多已经设置的标签的css样式并没有显示出来,查看官方文档,得知原来vue.j...

    honey缘木鱼
  • Java 实现高并发秒杀

    使用联合查询避免同一用户多次秒杀同一商品(利用在插入购物明细表中的秒杀id和用户的唯一标识来避免)。

    Java搬砖工人
  • Java调用微信扫一扫

    公司公众号二次开发需要调用微信扫一扫接口,在网上查了很多相关资料感觉也不是特别的全,在此特意整理一遍资料,供给自己和大家参考,如有相关缺陷请大家指出。

    gang_luo
  • 浅析eBay联盟营销的上下文广告机制

    用户1263954
  • 用Python做简易词云

    最近突发奇想,想做个词云玩玩,这算是Python的一个很初级的应用,虽然很初级,依然免不了会出现各种bug~

    爱吃西瓜的番茄酱
  • UI前端同学回来抢经验,react native开发实战五部曲的实战与锤炼,咬牙学完保证变大牛!

    背景 现在很多移动项目全都专项纯rn开发,对于rn的应用趋势不言而喻,学习一些rn的语法并不是十分困难,但是如何在项目中灵活运用,增加实战项目经验,这还是比较困...

    企鹅号小编
  • .NET 云原生架构师训练营(模块二 基础巩固 消息队列 介绍与基础)--学习笔记

    2、异步:消息堆积能力;发送方接收方不需同时在线,发送方接收方不需同时扩容(削峰)。

    郑子铭
  • Java8新特性

    1.HashMap 首先就是对 java 的 HashMap 进行了修改,以前是通过 hashCode 方法来判断他们的地址值是否一样 ,如果相同的话再使用 e...

    lwen

扫码关注云+社区

领取腾讯云代金券