欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2019年01月06日 11:16:05   作者：honey緣木魚  
這篇文章主要介紹了vue.js引入外部CSS樣式和外部JS文件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

學習Vue.js動畫時，需要引入一個animate.css，如何全局引入外部文件呢？

一.引入外部CSS樣式文件

1. 在app.vue中<style>下直接引入對應的路徑

使用@import引入外部css，作用域是全局的，也可在相應的單vue組件引入，import并不是引入代碼到<style></style>里面，而是發(fā)起新的請求獲得樣式資源，并且沒有加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的具體實現(xiàn)算法

}

2.因為我們想在Vue組件中想要引入Velocity函數(shù)，那么要在Velocity加密算法的js腳本的最后，使用如下代碼，將Velocity函數(shù)導出：

export {
 Velocity
}

注：外部腳本js不要放在components文件夾下，否則會一直報錯?？梢栽趕rc文件夾下新建一個js文件夾，然后將外部js腳本放在這個文件夾下，然后就可以在其他Vue組件中引入該js腳本。

3.在組件中使用 import { 函數(shù)名 } from 外部腳本名 來從外部js腳本中導入我們需要使用的函數(shù)。

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

4. 在Vue組件中正常調用Velocity函數(shù)

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論