scoped样式
<!-- 组件的默认样式 css写法 --> <!-- <style scoped> .demo { background-color: cadetblue; } </style> --> <style lang="less" scoped> .demo { background-color: cadetblue; .myfontsize { font-size: 40px; } } </style>
scoped样式总结:
- 作用:让样式在局部生效,防止冲突
- 写法:<style scoped>
查看webpack版本信息: npm view webpack versions
略
查看less-loader版本信息:npm view less-loader versions
安装less-loader:npm i less-loader@7
如遇到问题:Error: Cannot find module ‘less’
执行:npm i less
示例一:
School.vue
<!-- 组件的结构 --> <template> <div class="demo"> <h3>学校姓名:{{name}}</h3> <h3>学校地址:{{ address }}</h3> </div> </template> <!-- 组件交互相关的代码(数据、方法等) --> <script> export default ({ // eslint-disable-next-line vue/multi-word-component-names name: 'Student', data () { return { name: '高新一小', address: '西安/高新一小' } }, }) </script> <!-- 组件的样式 scoped局部样式,否则多个vue组件中同名会导致样式覆盖(将使用最后一个引入的组件样式)--> <style scoped> .demo { background-color: burlywood; } </style>
Student.vue
<!-- 组件的结构 --> <template> <div class="demo"> <h3 click="showName">学生姓名:{{name}}</h3> <h3 class="myfontsize">学生性别:{{ age }}</h3> </div> </template> <!-- 组件交互相关的代码(数据、方法等) --> <script> export default ({ // eslint-disable-next-line vue/multi-word-component-names name: 'Student', data () { return { msg: '我正在学习 Vue', name: '心仪', age: 6 } }, }) </script> <!-- 组件的默认样式 css写法 --> <!-- <style scoped> .demo { background-color: cadetblue; } </style> --> <style lang="less" scoped> .demo { background-color: cadetblue; .myfontsize { font-size: 40px; } } </style>
App.vue
<template> <div> <!-- <img src="./assets/logo.png"> --> <h2 class="title">Vue你好</h2> <Student></Student> <hr> <School></School> </div> </template> <script> // 引入组件 import Student from './components/Student.vue'; import School from './components/School.vue'; export default { name: 'App', components: { Student, School }, } </script> <style scoped> .title { background-color: brown; } </style>
main.js
// 引入Vue import Vue from 'vue' // 引入App import App from './App.vue' // 配置提示 Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')
博客内容主要用于日常学习记录,内容比较随意,如有问题,还需谅解!!!