学习scoped样式
问题
School.vue
<template>
<div class="demo">
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
</template>
<script>
export default{
name: 'School',
components:{},
data(){
return{
name: 'bilibili',
address: '魔都'
}
}
}
</script>
<style>
.demo{
background-color: skyblue;
}
</style>
Student.vue
<template>
<div class="test">
<h2>学生姓名:{{name}}</h2>
<h2>学生性别:{{sex}}</h2>
</div>
</template>
<script>
export default{
name: 'Student',
components:{},
data(){
return{
name: '张三',
sex: '男'
}
}
}
</script>
<style>
.test{
background-color: orange;
}
</style>
在我们编码的时候,你这个School.vue写的样式和你在Student.vue里面写的样式，最终都汇总到一起了(无论你写了多少的样式)；既然都汇总到一起了，就容易出现一个问题:类名冲突
如果School.vue和Student.vue的类名重复，class = "demo"
最终听的是Student,为什么?
App.vue
<template>
<div>
<School/>
<hr />
<Student/>
</div>
</template>
<script>
import School from './components/School.vue'
import Student from './components/Student.vue'
export default{
name: 'App',
components:{School , Student}
}
</script>
<style>
</style>
因为你在App.vue里面先引入的是School.vue再是Student.vue
如果是这样
import Student from './components/Student.vue'
import School from './components/School.vue'
那么就以School.vue为主。看你引入的顺序;脚手架的.vue先做的是(1)引入(2)读取配置项(3)解析模板
怎么处理这个问题?
-
最笨的办法:不要重名,但是这不太现实，这么多样式拿捏不准
-
只要用到一个属性:
<style scoped> .demo{...} </style>- scope: 本身就有
范围/作用域的意思 - scoped: 局部的
- scope: 本身就有
怎么办到的?
就意味着这个<style></style>里面所写的全部样式只是负责自己.vue里面模板里的样式,别人可不管
打开浏览器的控制台 元素你就知道了
其实就是<div></div>里面给你加了个特殊的属性(data-v-3375b0b8)，而且这个值是给你随机生成的,每次去运行的时候都不一样；然后通过这个demo再配合你的这个标签属性选择器
.demo[data-v-3375b0b8] {
background-color: skyblue;
}
就完成了控制指定的div
但是有一个组件不太适合用它
这个组件就是App.vue
App.vue是所有组件的头
App.vue > css
<style>
.title{
color: red;
}
</style>
Student.vue
<template>
<div class="demo">
<h2 class="title">学生姓名:{{name}}</h2>
<h2>学生性别:{{sex}}</h2>
</div>
</template>
School.vue
<template>
<div class="demo">
<h2 class="title">学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
</template>
如果App里面写样式就意味着，这个东西可能是很多组件都在用的
style lang="…"
这个lang是language的简称 Less.js 中文文档
css除了css写法还有less
<style lang="less">
</style>
告诉别人你写的样式都是用less写的
要是写css
<style lang="css">
</style>
如果切换成less，发现脚手架处理不了less
可以写less但是由于Vue脚手架它处理不了less：
ERROR Failed to compile with 1 error
Failed to resolve loader: less-loader
You may need to install it.
提示:请你安装less-loader
(1)停止编译(Ctrl + c)
(2)安装less-loader:
npm i less-loader
如果报错(或是只是警告,一运行vue还是报错)，不是你的锅，是兼容性的问题:
脚手架依托于webpack,我这里vue脚手架用的是"version": "4.46.0",(node_module > webpack > package.json > Ctrl + F > version)目前版本webpack的最新版本是5版本；相对来说现在4.46版本比较稳,5版本还要有一定时间沉淀;所以你直接安装less-loader是不可以的
查看最新版本
npm view
比如查看webpack一共有多少个版本:
npm view webpack versions
[
'0.1.0', '0.1.1', '0.1.2', '0.1.3',
'0.1.4', '0.1.5', '0.1.6', '0.2.0',
'0.2.1', '0.2.2', '0.2.3', '0.2.4',
'0.2.6', '0.2.7', '0.2.8', '0.3.0',
'0.3.1', '0.3.2', '0.3.3', '0.3.4',
'0.3.6', '0.3.7', '0.3.8', '0.3.9',
'0.3.10', '0.3.11', '0.3.12', '0.3.13',
'0.3.14', '0.3.15', '0.3.16', '0.3.17',
'0.3.18', '0.3.19', '0.3.20', '0.4.0',
'0.4.1', '0.4.2', '0.4.3', '0.4.4',
'0.4.5', '0.4.6', '0.4.7', '0.4.8',
'0.4.9', '0.4.10', '0.4.11', '0.4.12',
'0.4.13', '0.4.14', '0.4.15', '0.4.16',
'0.4.17', '0.4.18', '0.4.19', '0.4.20',
'0.4.21', '0.4.23', '0.4.24', '0.4.25',
'0.5.0', '0.5.1', '0.5.2', '0.5.3',
'0.5.4', '0.5.5', '0.5.6', '0.5.7',
'0.5.8', '0.5.10', '0.6.0', '0.6.1',
'0.6.2', '0.7.0-beta', '0.7.0-beta2', '0.7.0-beta3',
'0.7.0-beta4', '0.7.0-beta5', '0.7.0-beta6', '0.7.0-beta7',
'0.7.0-beta8', '0.7.0', '0.7.1', '0.7.2',
'0.7.3', '0.7.4', '0.7.5', '0.7.6',
'0.7.7', '0.7.8', '0.7.9', '0.7.11',
'0.7.12', '0.7.13', '0.7.14', '0.7.15',
'0.7.16', '0.7.17', '0.8.0-beta1', '0.8.0-beta2',
'0.8.0-beta3', '0.8.0-beta4', '0.8.0', '0.8.2',
'0.8.3', '0.9.0-beta1', '0.9.0-beta10', '0.9.0-beta11',
'0.9.0-beta12', '0.9.0-beta13', '0.9.0-beta14', '0.9.0-beta15',
'0.9.0-beta16', '0.9.0-beta17', '0.9.0-beta18', '0.9.0-beta19',
'0.9.0-beta2', '0.9.0-beta20', '0.9.0-beta21', '0.9.0-beta22',
'0.9.0-beta23', '0.9.0-beta24', '0.9.0-beta25', '0.9.0-beta26',
'0.9.0-beta27', '0.9.0-beta28', '0.9.0-beta29', '0.9.0-beta30',
'0.9.0-beta31', '0.9.0-beta32', '0.9.0-beta33', '0.9.0-beta34',
'0.9.0-beta35', '0.9.0-beta36', '0.9.0-beta37', '0.9.0-beta38',
'0.9.0-beta4', '0.9.0-beta5', '0.9.0-beta6', '0.9.0-beta7',
'0.9.0-beta8', '0.9.0-beta9', '0.9.0', '0.9.1',
'0.9.2', '0.9.3', '0.10.0-beta10', '0.10.0-beta11',
'0.10.0-beta12', '0.10.0-beta13', '0.10.0-beta14', '0.10.0-beta15',
'0.10.0-beta16', '0.10.0-beta17', '0.10.0-beta18', '0.10.0-beta19',
'0.10.0-beta2', '0.10.0-beta20', '0.10.0-beta21', '0.10.0-beta22',
'0.10.0-beta23', '0.10.0-beta24', '0.10.0-beta25', '0.10.0-beta3',
'0.10.0-beta5', '0.10.0-beta6', '0.10.0-beta7', '0.10.0-beta8',
'0.10.0-beta9', '0.10.0', '0.11.0-beta1', '0.11.0-beta10',
'0.11.0-beta11', '0.11.0-beta12', '0.11.0-beta13', '0.11.0-beta14',
'0.11.0-beta15', '0.11.0-beta16', '0.11.0-beta17', '0.11.0-beta18',
'0.11.0-beta19', '0.11.0-beta2', '0.11.0-beta20', '0.11.0-beta21',
'0.11.0-beta22', '0.11.0-beta23', '0.11.0-beta24', '0.11.0-beta25',
'0.11.0-beta26', '0.11.0-beta27', '0.11.0-beta28', '0.11.0-beta29',
'0.11.0-beta3', '0.11.0-beta4', '0.11.0-beta5', '0.11.0-beta6',
'0.11.0-beta7', '0.11.0-beta8', '0.11.0-beta9', '0.11.0',
'0.11.1', '0.11.2', '0.11.3', '0.11.4',
'0.11.5', '0.11.6', '0.11.7', '0.11.8',
'0.11.9', '0.11.10', '0.11.11', '0.11.12',
'0.11.13', '0.11.14', '0.11.15', '0.11.16',
'0.11.17', '0.11.18', '1.0.0-beta1', '1.0.0-beta2',
'1.0.0-beta3', '1.0.0-beta4', '1.0.0-beta5', '1.0.0-beta6',
'1.0.0-beta7', '1.0.0-beta8', '1.0.0-beta9', '1.0.0-rc1',
'1.0.0-rc11', '1.0.0-rc12', '1.0.0-rc2', '1.0.0-rc3',
'1.0.0-rc4', '1.0.0-rc5', '1.0.0-rc7', '1.0.0-rc8',
'1.0.0-rc9', '1.0.0', '1.0.1', '1.0.3',
'1.0.4', '1.0.5', '1.1.0-beta1', '1.1.0-beta10',
'1.1.0-beta12', '1.1.0-beta2', '1.1.0-beta3', '1.1.0-beta4',
'1.1.0-beta5', '1.1.0-beta6', '1.1.0-beta7', '1.1.0-beta8',
'1.1.0-beta9', '1.1.0', '1.1.1', '1.1.2',
'1.1.3', '1.1.4', '1.1.5', '1.1.6',
'1.1.7', '1.1.8', '1.1.9', '1.1.10',
'1.1.11', '1.2.0-beta1', '1.2.0-beta2', '1.2.0-beta4',
'1.2.0-beta5', '1.2.0-beta6', '1.3.0-beta1', '1.3.0-beta2',
'1.3.0-beta3', '1.3.0-beta4', '1.3.0-beta5', '1.3.0-beta6',
'1.3.0-beta7', '1.3.0-beta8', '1.3.0-beta9', '1.3.1-beta1',
'1.3.1-beta2', '1.3.1-beta3', '1.3.1-beta4', '1.3.1-beta5',
'1.3.1-beta6', '1.3.1-beta7', '1.3.1-beta8', '1.3.1-beta9',
'1.3.2-beta1', '1.3.2-beta2', '1.3.2-beta3', '1.3.2-beta4',
'1.3.2-beta5', '1.3.2-beta6', '1.3.2-beta7', '1.3.2-beta8',
'1.3.2-beta9', '1.3.3-beta1', '1.3.3-beta2', '1.3.4',
'1.3.5', '1.3.6', '1.3.7', '1.4.0-beta1',
'1.4.0-beta10', '1.4.0-beta2', '1.4.0-beta3', '1.4.0-beta4',
'1.4.0-beta5', '1.4.0-beta6', '1.4.0-beta7', '1.4.0-beta8',
'1.4.0-beta9', '1.4.1-beta1', '1.4.2', '1.4.3',
'1.4.4', '1.4.5', '1.4.6', '1.4.7',
'1.4.8', '1.4.9', '1.4.10', '1.4.11',
'1.4.12', '1.4.13', '1.4.14', '1.4.15',
'1.5.0', '1.5.1', '1.5.2', '1.5.3',
'1.6.0', '1.7.0', '1.7.1', '1.7.2',
'1.7.3', '1.8.0', '1.8.1', '1.8.2',
'1.8.3', '1.8.4', '1.8.5', '1.8.6',
'1.8.7', '1.8.8', '1.8.9', '1.8.10',
'1.8.11', '1.9.0', '1.9.1', '1.9.2',
'1.9.3', '1.9.4', '1.9.5', '1.9.6',
'1.9.7', '1.9.8', '1.9.9', '1.9.10',
'1.9.11', '1.9.12', '1.9.13', '1.10.0',
'1.10.1', '1.10.2', '1.10.3', '1.10.4',
'1.10.5', '1.11.0', '1.12.0', '1.12.1',
'1.12.2', '1.12.3', '1.12.4', '1.12.5',
'1.12.6', '1.12.7', '1.12.8', '1.12.9',
'1.12.10', '1.12.11', '1.12.12', '1.12.13',
'1.12.14', '1.12.15', '1.13.0', '1.13.1',
'1.13.2', '1.13.3', '1.14.0', '1.15.0',
'2.0.0-beta', '2.0.1-beta', '2.0.2-beta', '2.0.4-beta',
'2.0.5-beta', '2.0.6-beta', '2.0.7-beta', '2.1.0-beta.0',
'2.1.0-beta.1', '2.1.0-beta.2', '2.1.0-beta.3', '2.1.0-beta.4',
'2.1.0-beta.5', '2.1.0-beta.6', '2.1.0-beta.7', '2.1.0-beta.8',
'2.1.0-beta.9', '2.1.0-beta.10', '2.1.0-beta.11', '2.1.0-beta.12',
'2.1.0-beta.13', '2.1.0-beta.14', '2.1.0-beta.15', '2.1.0-beta.16',
'2.1.0-beta.17', '2.1.0-beta.18', '2.1.0-beta.19', '2.1.0-beta.20',
'2.1.0-beta.21', '2.1.0-beta.22', '2.1.0-beta.23', '2.1.0-beta.24',
'2.1.0-beta.25', '2.1.0-beta.26', '2.1.0-beta.27', '2.1.0-beta.28',
'2.2.0-rc.0', '2.2.0-rc.1', '2.2.0-rc.2', '2.2.0-rc.3',
'2.2.0-rc.4', '2.2.0-rc.5', '2.2.0-rc.6', '2.2.0-rc.7',
'2.2.0-rc.8', '2.2.0', '2.2.1', '2.3.0',
'2.3.1', '2.3.2', '2.3.3', '2.4.0',
'2.4.1', '2.5.0', '2.5.1', '2.6.0',
'2.6.1', '2.7.0', '3.0.0-rc.0', '3.0.0-rc.1',
'3.0.0-rc.2', '3.0.0', '3.1.0', '3.2.0',
'3.3.0', '3.4.0', '3.4.1', '3.5.0',
'3.5.1', '3.5.2', '3.5.3', '3.5.4',
'3.5.5', '3.5.6', '3.6.0', '3.7.0',
'3.7.1', '3.8.0', '3.8.1', '3.9.0',
'3.9.1', '3.10.0', '3.11.0', '3.12.0',
'4.0.0-alpha.0', '4.0.0-alpha.1', '4.0.0-alpha.2', '4.0.0-alpha.3',
'4.0.0-alpha.4', '4.0.0-alpha.5', '4.0.0-beta.0', '4.0.0-beta.1',
'4.0.0-beta.2', '4.0.0-beta.3', '4.0.0', '4.0.1',
'4.1.0', '4.1.1', '4.2.0', '4.3.0',
'4.4.0', '4.4.1', '4.5.0', '4.6.0',
'4.7.0', '4.8.0', '4.8.1', '4.8.2',
'4.8.3', '4.9.0', '4.9.1', '4.9.2',
'4.10.0', '4.10.1', '4.10.2', '4.11.0',
'4.11.1', '4.12.0', '4.12.1', '4.12.2',
'4.13.0', '4.14.0', '4.15.0', '4.15.1',
'4.16.0', '4.16.1', '4.16.2', '4.16.3',
'4.16.4', '4.16.5', '4.17.0', '4.17.1',
'4.17.2', '4.17.3', '4.18.0', '4.18.1',
'4.19.0', '4.19.1', '4.20.0', '4.20.1',
'4.20.2', '4.21.0', '4.22.0', '4.23.0',
'4.23.1', '4.24.0', '4.25.0', '4.25.1',
'4.26.0', '4.26.1', '4.27.0', '4.27.1',
'4.28.0', '4.28.1', '4.28.2', '4.28.3',
'4.28.4', '4.29.0', '4.29.1', '4.29.2',
'4.29.3', '4.29.4', '4.29.5', '4.29.6',
'4.30.0', '4.31.0', '4.32.0', '4.32.1',
'4.32.2', '4.33.0', '4.34.0', '4.35.0',
'4.35.1', '4.35.2', '4.35.3', '4.36.0',
'4.36.1', '4.37.0', '4.38.0', '4.39.0',
'4.39.1', '4.39.2', '4.39.3', '4.40.0',
'4.40.1', '4.40.2', '4.40.3', '4.41.0',
'4.41.1', '4.41.2', '4.41.3', '4.41.4',
'4.41.5', '4.41.6', '4.42.0', '4.42.1',
'4.43.0', '4.44.0', '4.44.1', '4.44.2',
'4.45.0', '4.46.0', '5.0.0-alpha.0', '5.0.0-alpha.1',
'5.0.0-alpha.2', '5.0.0-alpha.3', '5.0.0-alpha.4', '5.0.0-alpha.5',
'5.0.0-alpha.6', '5.0.0-alpha.7', '5.0.0-alpha.8', '5.0.0-alpha.9',
'5.0.0-alpha.10', '5.0.0-alpha.11', '5.0.0-alpha.12', '5.0.0-alpha.13',
'5.0.0-alpha.14', '5.0.0-alpha.15', '5.0.0-alpha.16', '5.0.0-alpha.17',
'5.0.0-alpha.18', '5.0.0-alpha.19', '5.0.0-alpha.20', '5.0.0-alpha.21',
'5.0.0-alpha.22', '5.0.0-alpha.23', '5.0.0-alpha.24', '5.0.0-alpha.25',
'5.0.0-alpha.26', '5.0.0-alpha.27', '5.0.0-alpha.28', '5.0.0-alpha.29',
'5.0.0-alpha.30', '5.0.0-alpha.31', '5.0.0-alpha.32', '5.0.0-beta.0',
'5.0.0-beta.1', '5.0.0-beta.2', '5.0.0-beta.3', '5.0.0-beta.4',
'5.0.0-beta.5', '5.0.0-beta.6', '5.0.0-beta.7', '5.0.0-beta.8',
'5.0.0-beta.9', '5.0.0-beta.10', '5.0.0-beta.11', '5.0.0-beta.12',
'5.0.0-beta.13', '5.0.0-beta.14', '5.0.0-beta.15', '5.0.0-beta.16',
'5.0.0-beta.17', '5.0.0-beta.18', '5.0.0-beta.19', '5.0.0-beta.20',
'5.0.0-beta.21', '5.0.0-beta.22', '5.0.0-beta.23', '5.0.0-beta.24',
'5.0.0-beta.25', '5.0.0-beta.26', '5.0.0-beta.27', '5.0.0-beta.28',
'5.0.0-beta.29', '5.0.0-beta.30', '5.0.0-beta.31', '5.0.0-beta.32',
'5.0.0-beta.33', '5.0.0-rc.0', '5.0.0-rc.1', '5.0.0-rc.2',
'5.0.0-rc.3', '5.0.0-rc.4', '5.0.0-rc.5', '5.0.0-rc.6',
'5.0.0', '5.1.0', '5.1.1', '5.1.2',
'5.1.3', '5.2.0', '5.2.1', '5.3.0',
'5.3.1', '5.3.2', '5.4.0', '5.5.0',
'5.5.1', '5.6.0', '5.7.0', '5.8.0',
'5.9.0', '5.10.0', '5.10.1', '5.10.2',
'5.10.3', '5.11.0', '5.11.1', '5.12.0',
'5.12.1', '5.12.2', '5.12.3', '5.13.0',
'5.14.0', '5.15.0', '5.16.0', '5.17.0',
'5.18.0', '5.19.0', '5.20.0', '5.20.1',
'5.20.2', '5.21.0', '5.21.1', '5.21.2',
'5.22.0', '5.23.0', '5.24.0', '5.24.1',
'5.24.2', '5.24.3', '5.24.4', '5.25.0',
'5.25.1', '5.26.0', '5.26.1', '5.26.2',
'5.26.3', '5.27.0', '5.27.1', '5.27.2',
'5.28.0', '5.29.0', '5.30.0', '5.31.0',
'5.31.1', '5.31.2', '5.32.0', '5.33.0',
'5.33.1', '5.33.2', '5.34.0', '5.35.0',
'5.35.1', '5.36.0', '5.36.1', '5.36.2',
'5.37.0', '5.37.1', '5.38.0', '5.38.1',
'5.39.0', '5.39.1', '5.40.0', '5.41.0',
'5.41.1', '5.42.0', '5.42.1', '5.43.0',
'5.44.0', '5.45.0', '5.45.1', '5.46.0',
'5.47.0', '5.47.1', '5.48.0', '5.49.0',
'5.50.0', '5.51.0', '5.51.1', '5.51.2',
'5.52.0', '5.52.1', '5.53.0', '5.54.0',
'5.55.0', '5.55.1', '5.56.0', '5.56.1',
'5.57.0', '5.57.1', '5.58.0', '5.58.1',
'5.58.2', '5.59.0', '5.59.1', '5.60.0',
'5.61.0', '5.62.0', '5.62.1', '5.62.2',
'5.63.0', '5.64.0', '5.64.1', '5.64.2',
'5.64.3', '5.64.4', '5.65.0'
]
那我们查看一下less-loader:
npm view less-loader versions
[
'0.1.0', '0.1.1', '0.1.2', '0.1.3', '0.2.0',
'0.2.1', '0.2.2', '0.5.0', '0.5.1', '0.6.0',
'0.6.1', '0.6.2', '0.7.0', '0.7.1', '0.7.2',
'0.7.3', '0.7.4', '0.7.5', '0.7.6', '0.7.7',
'0.7.8', '2.0.0', '2.1.0', '2.2.0', '2.2.1',
'2.2.2', '2.2.3', '3.0.0', '4.0.0', '4.0.1',
'4.0.2', '4.0.3', '4.0.4', '4.0.5', '4.0.6',
'4.1.0', '5.0.0', '6.0.0', '6.1.0', '6.1.1',
'6.1.2', '6.1.3', '6.2.0', '7.0.0', '7.0.1',
'7.0.2', '7.1.0', '7.2.0', '7.2.1', '7.3.0',
'8.0.0', '8.1.0', '8.1.1', '9.0.0', '9.1.0',
'10.0.0', '10.0.1', '10.1.0', '10.2.0'
]
8/9/10都是为webpack5服务的，你安装7,但是你也别安装的太前版本(比如4版本之类的)
安装前面的版本
npm i less-loader@7
默认安装7里面的最新版本,就可以写less了
less最大的特点就是东西可以嵌套着写
在网友测试阶段，得装6版本
不写lang默认就是css
但不允许
<style lang="">
</style>
什么都不写
总结
scoped样式
作用: 让样式在局部生效，防止冲突。
写法:<style scoped>
扫一扫
1238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
