网站建设宀金手指花总十四,行业论坛网站,wordpress如何制作主题,国外优秀的网站目录 一、引言
二、案例演示
2.1. 工程结构图
2.2. 核心代码
2.2.1. main.js
2.2.2. App.vue
2.2.3. BaseOne.vue
2.2.4. BaseTwo.vue
2.3. 运行效果
2.4. 调整代码
2.4.1. BaseTwo.vue
2.4.2. 运行效果
三、scoped原理 一、引言
前面的几个章节在介绍组件的时…目录 一、引言
二、案例演示
2.1. 工程结构图
2.2. 核心代码
2.2.1. main.js
2.2.2. App.vue
2.2.3. BaseOne.vue
2.2.4. BaseTwo.vue
2.3. 运行效果
2.4. 调整代码
2.4.1. BaseTwo.vue
2.4.2. 运行效果
三、scoped原理 一、引言
前面的几个章节在介绍组件的时候我们提到过Vue组件是由template、style和script三大部分组成那么本章节我们将对组件中的样式做一个再深入讲解。
日常开发过程中我们经常会碰到一些HTML元素样式冲突的情况且排查和管理比较耗费精力那么Vue在组件的样式方面是怎样处理冲突的呢这就要提到Vue组件样式中的scoped属性
默认情况写在Vue组件中的样式会全局生效 → 因此很容易造成多个组件之间的样式冲突问题。
1. 全局样式: 默认组件中的样式会作用到全局
2. 局部样式: 可以给组件加上 scoped 属性, 可以让样式只作用于当前组件 二、案例演示
2.1. 工程结构图 2.2. 核心代码
2.2.1. main.js
import Vue from vue
import App from ./App.vueVue.config.productionTip falsenew Vue({render: h h(App),
}).$mount(#app)2.2.2. App.vue
templatediv classAppBaseOne/BaseOneBaseTwo/BaseTwo/div
/templatescript
import BaseOne from ./components/BaseOne.vue
import BaseTwo from ./components/BaseTwo.vue
export default {components: {BaseOne,BaseTwo}
}
/scriptstyle/style
2.2.3. BaseOne.vue
templatedivBaseOne/div
/templatescript
export default {}
/scriptstyle
/style
2.2.4. BaseTwo.vue
templatedivBaseOne/div
/templatescript
export default {}
/scriptstyle
/style
2.3. 运行效果
我们会发现组件BaseTwo中的样式对App.vue和BaseOne.vue生效了即全局生效 2.4. 调整代码
2.4.1. BaseTwo.vue
templatedivBaseTwo/div
/templatescript
export default {}
/scriptstyle scoped
/** 默认样式会作用于全局*/
div {border: 3px solid blue;margin: 30px;
}
/style
2.4.2. 运行效果
我们将BaseTwo中的样式增加scoped属性我们能看到这个样式只对当前组件生效 三、scoped原理
我们在日常项目开发的过程中要注意的是组件应该有着自己独立的样式因此推荐加上scoped属性scoped的原理如下
1. 当前组件内标签都被添加 data-v-hash值的属性
2. css选择器都被添加 [data-v-hash值] 的属性选择器
最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到
