vue快速入门(三十三)scoped解决组件样式冲突

news/2024/11/15 4:47:58/

注释很详细,直接上代码

上一篇

新增内容
scoped解决样式冲突的用法

源码

MyHeader.vue

<!-- 用于测试全局注册组件 -->
<template><div id="myHeader"><h1>又可以愉快的学习啦</h1></div>
</template><script>javascript">export default {}
</script>
<!-- 我们可以发现加上scoped属性,组件的样式是独立出来的而不会影响其他组件具体原因是vue会给组件添加一个唯一的属性,并且在该组件的所有样式中标注,这样就可以避免样式污染 -->
<style lang="less" scoped>
h1{color: blue;
}
</style>

MyMain.vue

<!-- 用于测试局部注册组件 -->
<template><div id="mymain"><h1>啊对对对</h1></div>
</template><script>javascript">export default {}
</script>
<style lang="less" scoped>
h1{color: red;
}
</style>

App.vue

<template><div id="app"><MyHeader></MyHeader><MyMain></MyMain></div>
</template><script>javascript">
// 导入局部注册组件
import MyMain from './components/MyMain.vue';export default {name: 'App',components: {//注册局部注册组件MyMain:MyMain,}
}
</script>
<style>
*{margin: 0;padding: 0;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false//全局导入组件
import MyHeader from './components/MyHeader.vue'//全局注册组件
Vue.component('MyHeader',MyHeader)new Vue({render: h => h(App),
}).$mount('#app')

效果演示

在这里插入图片描述


http://www.ppmy.cn/news/1425415.html

相关文章

【论文笔记 | 异步联邦】Asynchronous Federated Optimization

论文信息 Asynchronous Federated Optimization&#xff0c;OPT2020: 12th Annual Workshop on Optimization for Machine Learning&#xff0c;不属于ccfa introduction 背景&#xff1a;联邦学习有三个关键性质 任务激活不频繁&#xff08;比较难以达成条件&#xff09;&…

Spring Boot 加载本地 JAR 包的技术实践

随着微服务架构的兴起&#xff0c;Spring Boot 因其快速构建、易于部署的特性&#xff0c;成为了众多开发者的首选框架。在开发过程中&#xff0c;我们有时需要引入一些不在公共 Maven 仓库中的 JAR 包作为依赖&#xff0c;这时候就需要加载本地的 JAR 包。本文将详细介绍在 Sp…

[C++][算法基础]欧拉函数(线性筛)

给定一个正整数 n&#xff0c;求 1∼n 中每个数的欧拉函数之和。 输入格式 共一行&#xff0c;包含一个整数 n。 输出格式 共一行&#xff0c;包含一个整数&#xff0c;表示 1∼n 中每个数的欧拉函数之和。 数据范围 1≤n≤ 输入样例&#xff1a; 6输出样例&#xff1a…

FPGA开发之状态机设计

状态机是许多数字系统的核心部件&#xff0c;是一类重要的时序逻辑电路。通常包括三个部分&#xff1a; 一是下一个状态的逻辑电路&#xff0c; 二是存储状态机当前状态的时序逻辑电路&#xff0c; 三是输出组合逻辑电路。 通常&#xff0c;状态机的状态数量有限&#xff0c;称…

Mac使用Idea新手常用快捷键

Mac使用Idea新手常用快捷键 前言常用指令1、选中多个文件&#xff0c;不连续2、点进去查看某个类的代码3、复制某个类的全类名4、鼠标滚轮选中多行&#xff0c;然后选中这些行上同一列光标所在的单词 前言 入职新公司后用的是mac&#xff0c;从windows切换到mac&#xff0c;一…

安卓手机APP开发__媒体开发部分__直播流

安卓手机APP开发__媒体开发部分__直播流 目录 概述 检查和监控直播的播放 在直播流中的定位查找 直播播放的用户界面 配置直播播放的参数 播放速度调整 定制播放速度的调整算法 直播窗口背后的异常和ERROR_CODE_BEHIND_LIVE_WINDOW 概述 ExoPlayer没有任何特殊配置的…

PCB---Editor 输出光绘

选择一个层*&#xff08;正面走线层和过孔&#xff09; 选择一个文件复制命名&#xff08;最后删除初始的那2个文件&#xff0c;下图是删除过后的&#xff09;&#xff1a; 隐藏全部开始重复以上步骤&#xff1a; 大致的层&#xff1a; Art01&#xff08;正面走线层和过孔&…

ceph osd分组

一、前言 使用分组可以更好的管理osd&#xff0c;将不同类型的磁盘&#xff0c;分到不同的组中&#xff0c;例如hhd类型的osd分配到hhd组&#xff0c;ssd类型的osd分配到ssd组&#xff0c;将io要求不高的分配到hhd组做存储&#xff0c;io要求高的分配到ssd组做存储 二、配置 查…