Vue 中组件的局部css样式配置：scoped样式
1：说明：
<!-- ## scoped样式 1. 作用：让样式在局部生效，防止冲突。 2. 写法：```<style scoped>``` -->
2：代码结构
3：代码内容
index.html
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <!-- 针对ie浏览器的一个特殊配置，含义是让ie浏览器以最高的渲染级别进行渲染界面 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 开启移动端理想视口 --> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <!-- 配置页签的图标 --> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <!-- 配置网页的标题：找 package.json文件里的 "name": "vue_test" 值 --> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <!-- 如果浏览器不支持js，则该标签的元素里的内容将会被渲染 --> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <!-- 容器 --> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
vue.config.js
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, lintOnSave:false /*关闭语法检查*/ })
main.js
//引入Vue import Vue from 'vue' //引入App import App from './App.vue' //关闭Vue生产提示 Vue.config.productionTip=false; // 创建Vm const vm = new Vue( { el:'#app', render: (h) => h(App) });
App.vue
<!-- --> <template> <div> <hr/> <div class="divCss"> <h1 class="h1Css">Vue中的scoped控制组件的Css样式为局部样式</h1> <span style="color:white;font-size: 14px;padding: 20px;margin-left: 20px;"> App组件的css样式不允许进行 scoped进行局部样式控制。</span> <hr/> <!-- 调用组件，传递数据 --> <School/> <hr/> <Student /> <hr/> </div> </div> </template><script> import School from './components/School.vue'; import Student from './components/Student.vue'; export default { name:'App', components:{ Student, School }, } </script><!-- 1：指定Css 样式的编写方式 less 最大特点：内容可以嵌套着写 --> <style lang="less"> .divCss{ background-color: chocolate; margin: auto; padding: 20px; .h1Css{ font-size: 36px; color: white; } } </style>
Student.vue
<!-- ## scoped样式 1. 作用：让样式在局部生效，防止冲突。 2. 写法：```<style scoped>``` --> <template> <div class="ClassStyle"> <h1 style="color:red">{{msg}}</h1> <h2>学生名称：{{name}}</h2> <h2>学生性别：{{sex}}</h2> <br/> </div> </template><script> export default { name:'Student', data () { return { msg:'学生信息', name:'向北', sex:'男' } }, } </script><!--scoped 控制组件的Css样式为局部样式，不会为同名的cs样式名的冲突导致样式覆盖 --> <style scoped> .ClassStyle{ background-color:lightskyblue; } </style>
School.vue
<!-- ## scoped样式 1. 作用：让样式在局部生效，防止冲突。 2. 写法：```<style scoped>``` --> <template> <div class="ClassStyle"> <h1 style="color:red">{{msg}}</h1> <h2>学校名称：{{name }}</h2> <h2>学校地址：{{address}}</h2> </div> </template><script> export default { name:'School', data () { return { msg:'学校信息', name:'华南师范大学', address:'广州市天河区中山大道西55号' } }, } </script><!--scoped 控制组件的Css样式为局部样式，不会为同名的cs样式名的冲突导致样式覆盖 --> <style scoped> .ClassStyle{ background-color: aquamarine; } </style>
4:页面效果图
标签：School,Vue,name,样式,App,vue,scoped From： https://www.cnblogs.com/ios9/p/16951001.html