您好,登錄后才能下訂單哦!
學習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 }) },
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。