vue中导入外链css或js

html-css013

vue中导入外链css或js,第1张

在vue中导入自定义的css文件或js文件

css文件

在main.js中导入公共的css

import '../static/css/common.css' //引入公用css

在页面中引入单独css

<style scoped>

@import '../../static/css/header.css'

</style>

Js文件

自定义js 中写:

function title(t){

alert(t)

}

export {

title //多个方法在此处json中export出去

}

页面中使用:

<template>

<div>

<button class="btn" @click="clickme">click me</button>

</div>

</template>

<script>

import {title} from './js/common.js' //可以选择需要的方法引入

export default {

data(){

return{

}

},

methods:{

clickme(){

title('你点我了')

}

}

}

</script>

或者

import Comjs from './js/common.js' //引入公用js

Vue.prototype.$comjs = Comjs//添加到vue属性中

自定义js 中写:

const comjs = {

}

comjs.title = function (title) {

alert(title)

}

export default comjs

页面中使用:

<template>

<div>

<button class="btn" @click="clickme">click me</button>

</div>

</template>

<script>

export default {

data(){

return{

}

},

methods:{

clickme(){

this.$comjs.title('你点我了')

}

}

}

</script>

如图是一个常见的vue文件结构

在app.html 或者*.vue中引入css,如下所示:

在 app.html引入css对阵个页面都生效,在vue文件中引入,只对改vue生成的页面有效

方法一:

使用原生js操作dom的方法,来改变css的样式,比如

document.getElementById(id).style.property =newstyle

这里的new style 里面就可以使用js传入的变量。

此方法固然可以,但是对应改变一些复杂的css,比如动画什么的,操作起来就不怎么方便了。此时,如下的方法二就显得尤为重要了!

方法二:

利用css变量来处理,思路是将js变量赋值给css变量,然后在css样式中使用css变量。如下图所示,我们传入year变量,然后生成了--top、--bottom等变量,然后这些变量就可以在css中使用!