css代码的,首先我们是有3种方式来书写css的,可以写在外部的css文件中,或者是写在head的<style></style>中,还有就是写在元素的行中,通过代码来理解:
<html><head>
<style> //通过style实现
#nav{
width:900px
height:30px
}
#nav ul li{
float:left
padding:5px 30px
}
#nav ul li{
float:left
width:60px
}
</style>
<link rel='stylesheet' type='text/css' href='./css/index1.css'> //通过外部文件实现
</head>
<body>
<div class="nav" style="width:400px"> //通过行内实现
<ul>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">兴趣爱好</a>
</li>
<li>
<a href="index.php">好友印象</a>
</li>
<li>
<a href="register.php">会员注册</a>
</li>
<li>
<a href="dengtu.php">会员登录</a>
</li>
</ul>
</div>
</body>
</html>
你的 .h1是一个类了,此时你需要在上边h1标签里面加上 calss=“h1”,这样你的.h1就能生效了;但是看你的写法是想直接控制标签,那么你只需要把 .h1的 . 去掉就行了,标签直接写就可以了,不用带“.”。
在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>