企业网站seo 优帮云,石家庄做网站时光,徐州网站开发公司,WordPress魔方格子欢迎大家订阅【Vue2Vue3】入门到实践 专栏#xff0c;开启你的 Vue 学习之旅#xff01; 文章目录 1 scoped样式1.1 全局样式1.2 局部样式1.3 工作原理2 data函数 1 scoped样式
1.1 全局样式
全局样式是指作用于整个应用程序的样式#xff0c;不论在哪个组件中定义#x… 欢迎大家订阅【Vue2Vue3】入门到实践 专栏开启你的 Vue 学习之旅 文章目录 1 scoped样式1.1 全局样式1.2 局部样式1.3 工作原理2 data函数 1 scoped样式
1.1 全局样式
全局样式是指作用于整个应用程序的样式不论在哪个组件中定义都能影响到所有具有相同元素的组件。 在 Vue 中若在组件的 style 标签中没有使用 scoped则该样式会自动成为全局样式影响到所有同样的 HTML 元素。
【示例】 BaseOne.vue
templatedivBaseOne/div
/templatescript
export default {}
/scriptstyle
/*
默认的style样式会作用于全局 - 全局样式
*/
div{border:3px solid blue;margin:30px;
}
/styleBaseTwo.vue
templatedivBaseTwo/div
/templatescript
export default {}
/scriptstyle/styleApp.vue
templatedivBaseOne/BaseOneBaseTwo/BaseTwo/div
/templatescript
// 在 script 标签内
import BaseOne from ./components/BaseOne.vue;
import BaseTwo from ./components/BaseTwo.vue;export default {components: {BaseOne,BaseTwo}
}
/scriptstyle/style运行结果 从上图可知BaseOne.vue 中定义的全局样式不仅影响了 BaseOne 组件中的 div 元素还影响了 BaseTwo 组件中的 div 元素
1.2 局部样式
局部样式仅适用于当前组件避免了全局样式的污染。 在 Vue 中通过在 style 标签上添加 scoped 属性可以限制样式的作用范围仅影响当前组件内的元素而不会影响其他组件中的相同元素。
【示例】 修改 BaseOne.vue 的代码,为其添加 scoped 属性来限制样式的作用范围 运行结果 添加 scoped 后样式将只作用于 BaseOne.vue 中的 div 元素而不再影响 BaseTwo.vue 中的 div 元素。
1.3 工作原理
Vue 实现 scoped 样式的方式是通过给每个元素添加一个唯一的 data-v-xxxx 属性并且在样式选择器中增加这个属性作为条件以确保样式只作用于当前组件的元素。
【示例】 BaseOne.vue
templatedivBaseOnespan111/spana href链接/a/div
/templatescript
export default {}
/scriptstyle
/*
默认的style样式会作用于全局 - 全局样式
*/
div{border:3px solid blue;margin:30px;
}
/styleBaseTwo.vue
templatedivBaseTwo/div
/templatescript
export default {}
/scriptstyle scoped
div{border:3px solid red;margin:30px;
}
/style运行结果 【Scoped 样式的工作机制】 1. 添加 data-v-hash 属性 Vue 会为每个组件的元素添加一个唯一的 data-v-hash 属性例如 data-v-5f6a9d56该属性仅在当前组件中存在。
2. 修改样式选择器 Vue 会自动将样式选择器修改为 div[data-v-5f6a9d56]样式只会作用于带有 data-v-hash 属性的元素。
3. 同一组件的 hash 值相同 Vue 会确保同一组件中的所有元素的 data-v-hash 属性相同从而保证它们共享相同的样式。
2 data函数
在 Vue 中组件的 data 选项必须是一个返回对象的函数确保每个组件实例都有独立的数据对象。
为什么 data 是一个函数 Vue 会创建一个新的组件实例时每个组件实例都需要一份独立的 data 对象。如果 data 是一个对象而不是函数所有组件实例将共享同一个数据对象从而导致数据污染和不可预期的行为。
【示例】 BaseCount.vue
templatediv classbase-countbutton clickcount---/buttonspan{{ count }}/spanbutton clickcount/button/div
/templatescript
export default {data: function () {return {count: 100,}},
}
/scriptstyle
.base-count {margin: 20px;
}
/styleApp.vue
templatediv classappBaseCount/BaseCountBaseCount/BaseCountBaseCount/BaseCount/div
/templatescript
import BaseCount from ./components/BaseCount
export default {components: {BaseCount,},
}
/scriptstyle
/style运行结果 在 App.vue 中创建了三个 BaseCount 组件实例。每次 Vue 创建新的 BaseCount 实例时都会执行 data 函数返回一个新的对象。 每个 BaseCount 组件都有独立的 count 数据初始值为 100。点击某个组件的加减按钮时只有该组件的 count 值会发生变化而其他组件的 count 数据不受影响。
