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 })
  },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • webpack+vue-cli项目中引入外部非模块格式js的方法

    在开发vue的项目(我使用的是vue2),需要添加js,虽然可以通过npm install 安装插件,但是如果有一些插件并没有开源,这时候我们只有脸上宽面条了.所以我更倾向于在webpack中引入外部js文件. 1.直接引用 Note:(红色标注部分) 位置1:将页面中需要用到的js,引入进来,from 后面是该js所在的文件目录: 位置2:需要用到位置一中定义的变量Swiper; 位置3:为防止eslint严格模式下报错,需要将位置2定义的swiper再次调用一下: 以上这篇webpack+v

  • Vue项目中引入外部文件的方法（css、js、less）

    Vue项目中引入外部文件的方法（css、js、less）

    这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css.js.less.fonts文件夹,并放入对应文件. 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,font

  • vuejs实现标签选项卡动态更改css样式的方法

    html <ul class="header-list"> <li v-cloak v-for="(item,index) in headerList" v-on:click="selectMainTheme(index)"><a href="java:;" rel="external nofollow" :class="{'active':idx == index}

  • Vue2.0设置全局样式(less/sass和css)

    Vue2.0设置全局样式(less/sass和css)

    为Vue设置全局样式需要几个步骤(如果是sass将less改成sass即可) 第一步:在src目录下的main.js,也就是入口文件里面添加下面代码 require('!style-loader!css-loader!less-loader!./common/less/index.less') 在Vue1.0版本中可以这样写,但是2.0版本中就不行,会报错提示解析错误 require('./common/less/index.less') 第二步:在build目录下的webpack.base.c

  • 浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法

    vue-cli中已经内置配置好了sass 以及lass的配置.如果需要的话直接下载两个模块就可以了,webpack它会根据 lang 属性自动用适当的加载器去处理. 如果需要使用sass,则安装: npm install node-sass --save-dev npm install sass-loader --save-dev 如果需要使用less,则安装: npm install less --save-dev npm install less-loader --save-dev sass

  • vue.js父组件使用外部对象的方法示例

    最近在碰到有同学问我,vue父组件怎么使用外部对象,具体例子如下: 有组件a: <div @click="onClick">component a</div> // componet a ... methods: { onClick(evt) { // doSomething 这里只能拿到 mouseEvent this.outsideClickHandler(evt); // 调用外部处理函数 } } ... 有组件B,引用组件a,并传入outsideClic

  • Vue 框架之动态绑定 css 样式实例分析

    今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分 首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ,也可以实现绑定,但都不是动态绑定,动态绑定肯定是根据用户的某个操作实现动态的修改样式 先看下面的第一个小实例: 源代码 html 文件: 请看注释 <!DOCTYPE html>

  • 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/

  • 用JS动态设置CSS样式常见方法小结(推荐)

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100);

  • js获取页面引用的css样式表中的属性值方法(推荐)

    如下所示: function getStyle(node, property){ if (node.style[property]) { return node.style[property]; } else if (node.currentStyle) { return node.currentStyle[property]; } else if (document.defaultView && document.defaultView.getComputedStyle) { var s

  • 解析js如何获取css样式

    一.获取内联样式 <div id ="myDiv" style="width:100px;height:100px;background-color:red; border:1px solid black;"></div> <script> var myDiv = document.getElementById("myDiv"); alert(myDiv.style.width);//100px alert(m

  • 使用CSS样式position:fixed水平滚动的方法

    使用CSS样式"position:fixed"可以使div块固定在一个固定位置,即使有滚动条也不会改变其位置.position:fixed给很多开发者带来了惊艳的效果,然而当出现水平滚动条时,效果就不那么容易接受了.有时候我们希望当出现水平滚动条时,div块可以随滚动条左右移动,实现垂直固定定位(fixed),水平相对定位(absolute).本文提供一个解决方法,附jquery扩展源码. 本文的实现方式是使用js来控制div块随滚动条水平滚动,原理就是当window对象发生scrol

  • Android.mk引入第三方jar包和so库文件的方法

    以SystemUI为例,如果需要在SystemUI中引入第三方jar包以及so库,可作如下处理: 首先,在frameworks\base\packages\SystemUI下新建libs目录: 将需要引入的jar包放置到libs目录下.然后修改Android.mk文件: 也就说引入jar包主要依赖的是LOCAL_PREBUILT_STATIC_JAVA_LIBRARIES和LOCAL_STATIC_JAVA_LIBRARIES.下面吧完整的Android.mk贴出来,方便拷贝. LOCAL_PA

  • css样式标签和js语法属性区别

    盒子标签和属性对照 CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle border-bottom-width borderBottomWidth border-color borderColor border-left borderLeft bor

  • vue中element-ui组件默认css样式修改的四种方式

    vue中element-ui组件默认css样式修改的四种方式

    目录 前言 1.使用全局统一覆盖 2.在.vue文件中修改 3.修改组件的style样式 4. 参考element-ui官方文档的api 疑问 总结 前言 修改element-ui组件的默认样式一直是一个老生长谈的话题,在做完公司的一整个项目后,我总结了以下4种修改element-ui默认样式的方法. 1.使用全局统一覆盖 针对一些通用的.样式固定的组件,可以全局处理,其方法是新建一个css或者scss文件,覆盖element原有的class 你可以在src/styles目录下新建一个eleme

  • JS函数实现动态添加CSS样式表文件

    先给出函数. 复制代码 代码如下: varaddSheet=function(){ vardoc,cssCode; if(arguments.length==1){ doc=document; cssCode=arguments[0] }elseif(arguments.length==2){ doc=arguments[0]; cssCode=arguments[1]; }else{ alert("addSheet函数最多接受两个参数!"); } if(!+"v1"

随机推荐