关于vue模板的style和style的scoped属性

最新推荐文章于 2023-08-20 10:19:39 发布
最新推荐文章于 2023-08-20 10:19:39 发布
阅读量2.8k 收藏 4
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qdmoment/article/details/98481334
版权

vue模板有三部分组成，template, script, style

1，如果模板中有style部分，vue在编译过程中，会将该部分样式按照特定的样式规范编译后以style标签插入header，如图：

说明：如果style里面并没有样式，是空的，则编译时会忽略

2，style的scoped属性

有scoped属性时，vue编译过程中会生成一个唯一的data-xxx标志，样式后面会跟上该标志，以避免污染全局样式

 

3，对于组件中有子组件的，父组件scoped生成的style唯一标识会添加到子组件的根元素上

 

qdmoment
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈vue中慎用style的scoped属性
08-28
本篇文章主要介绍了浅谈vue中慎用style的scoped属性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中style下scope的使用和坑
热门推荐
潜行IT的博客
10-11 4万+
在vue组件中，为了使样式私有化（模块化），不对全局造成污染，可以在style标签上添加scoped属性以表示它的只属于当下的模块，这是一个非常好的举措，但是为什么要慎用呢？因为在我们需要修改公共组件（三方库或者项目定制的组件）的样式的时候，scoped往往会造成更多的困难，需要增加额外的复杂度。 scoped实现私有化样式的原理 为什么会说，会增加复杂度？那么我们先从的实现模块的原理说起。为...
style和scoped的区别（经常被问）
zhou_ya_nan的博客
05-08 1089
style和scoped的区别 一.lang lang是用来约定当前的语言来写什么样式。 这里区别对待三个 第一，css原生的 <style></style> 第二，less预编译css,先写less，再转换成为css，<style lang="less"></style> 第三，sass预编译css，先写sass，再转换成为css, <style lang="sass"></style> scoped作用域 如果设置了这一项，则当
VUE2 绑定样式
DTCloud
04-22 474
绑定class样式 <div :class="mood"></div> <div :class="[{active:Active===index},`animate__delay-${index + 1}s`]"></div> <div :class="[index === 0 ? '':'active']"></div> data(){ return{ mood: 'normal' } } 绑定st
Vue5——事件修饰符（style）和template
qq_42964711的博客
05-19 731
事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。 Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符 修饰符是由点开头的指令后缀来表示的 <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-o
Vue组件的三大部分－template、script、style
了解➔熟悉➔掌握➔精通
01-08 1万+
分享一个大牛的人工智能教程。零基础！通俗易懂！风趣幽默！希望你也加入到人工智能的队伍中来！请轻击http://www.captainbed.net vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。每个 .vue 组件都由 3 部分构成，分别是： template -> 组件的模板结构 script -> 组件的 JavaScript 行为 style -> 组件的样式 其中，每个组件中
浅谈关于.vue文件中style的scoped属性
08-29
本篇文章主要主要介绍了浅谈关于.vue文件中style的scoped属性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue组件中的样式属性scoped实例详解
10-17
vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 。接下来通过本文给大家分享vue组件中的样式属性scoped实例详解，感兴趣的朋友跟随小编一起看看吧
一文读懂Vue组件三大部分： template、script、style
weixin_39958441的博客
08-20 1516
vue 规定：组件内的 节点是可选的，开发者可以在 < script> 节点中封装组件的 JavaScript 业务逻辑。其中 标签上的lang="css" 属性是可选的，它表示所使用的样式语言。vue 规定：组件内的 节点是可选的，开发者可以在 节点中编写样式美化当前组件的UI 结构。在组件的 节点中，支持使用前面所学的指令语法，来辅助开发者渲染当前组件的 DOM 结构。
vue template当中style背景设置不编译
persist_z的博客
03-03 571
在vue定义的组件当中，直接设置行内style无法显示背景，里面使用config.resolve.alias当中设置的 @等路径符也无法识别 <el-card style="backgroundImage:`url(`图片地址`)" class="box-card" shadow="hover"> 解决方法：在将图片资源在vue 的 data当中解析再绑定到页面 <el-card :style="{backgroundImage:`url(${img})`}" class="box-c
vue 动态style_Vue 模板的功臣 指令
weixin_39726971的博客
12-12 111
Vue 模板中，「指令」犹如一条命令，让 Vue 干啥就干啥，Vue 总是哈腰点头，为模板服务着。1、v-if、v-else-if、v-else ，活要挑着干某个 HTML 元素要在指定的条件下才能渲染，v-if、v-else-if需要指定一个条件，这个条件是一个表达式或者是计算属性，但是不能是过滤器，只有在truthy的时候才会渲染。在 JavaScript 中，truthy(真...
vue基础-动态设置样式class和style
qq_41421033的博客
05-26 615
动态设置样式class和style 一. :class 语法: class="{类名: 布尔值, 类名2: 布尔值}" 作用: 动态设置class 代码示例 <template> <div> <button :class="{ grey: isOn === true, white: isOn === false }" @click="isOn = !isOn" > 开关 &l
vue-cli脚手架 vue和vue-cli-service命令详解
前端361
03-16 9183
create vue create 后面有很多参数： 源码如下： program .command('create <app-name>') .description('create a new project powered by vue-cli-service') .option('-p, --preset <presetName>', 'Skip ...
vue核心技术知识点总结
前端361
08-03 9096
Vue在2019年的受欢迎程度逐步加大，很多创业型公司，中小企业都在使用vue框架。很多场景下，大公司更青睐于React技术栈，而随着Vue2.x的发布更新，很多公司开始选用vue作为主要技术栈。vue上手成本低，且社区多为中文，对于开发者而言要求相对 较低。 但是要想做好vue的开发，就必须对vue的原理有深入的了解，并且对相关社区有所了解。Vue中很多也采用了最新的ES6写法，从技术层面上提...
vue框架的设计思想--渐进、轻量、数据驱动、组件化、自底向上
前端361
10-08 3409
vue是一套用于构建用户界面的渐进式框架 参考：https://blog.csdn.net/tangxiujiang/article/details/79594860 https://blog.csdn.net/weixin_41049850/article/details/79431682 以下是看过很多渐进式框架的概念，把几个相对全面的进行了总结： 渐进式框架：只做自己该做的事情，不去...
vue日历面板组件vue-calendar-board封装实现（npm包已发布）
前端361
08-14 3302
完整代码参见github：vue-calendar-board 讲解组件封装之前，介绍时间对象Date相关的api：参见：MDN new Date()入参字符串和多个参数不同 实例：2019-03-03返回值是默认是日期的8:00:00,传入时间后按时间返回 2019，02，03返回日期是零点00:00:00,传入小时后按时间返回 //Sun Mar 03 2019 08:00:00 ...
vscode中 vue ESlint自动修复环境配置详解
前端361
03-13 2697
很久没有写vue的项目，近期加入了教育疫情项目的开发，重新启用vue，这里就vue代码自动修复环境的安装，以及可能遇到的 vscode安装的插件：ESlint, Vetur,eslint-plugin-html (全局安装) { "window.zoomLevel": 0, "terminal.integrated.rendererType": "dom", "ed...
MVC和MVVM的定义和区别，MVVM框架VUE实现原理
前端361
12-15 1579
mvvm现在已经是很流行的框架设计模式，之所以流行，是因为好用，那么从之前的mvc框架到现在的mvvm框架到底发生了什么变革呢。mvvm和mvc有什么本质区别呢。接下来解决这两个问题。 1，什么是mvc model-view-controller 特点：controller  的业务逻辑部分写在后端，写在前端后使得js控制层变得越来月难以维护 model，view和contr...
vue scoped属性作用?实现原理
最新发布
08-31
vue的scoped属性是用来限定样式作用范围的，仅在当前组件中生效，不影响其他组件和全局样式。 scoped属性的实现原理是通过给每个样式规则自动生成一个唯一的属性选择器来实现的。在编译阶段，vue会解析组件的模板，将所有带有scoped属性的样式规则进行处理，在每个选择器后面添加一个具有唯一性的属性选择器。例如： 原始样式规则： ``` <style scoped> .test { color: red; } </style> ``` 处理后的样式规则： ``` <style> .test[data-v-xxxxxx] { color: red; } </style> ``` 其中data-v-xxxxxx就是自动生成的唯一标识符，用来匹配当前组件对应的DOM元素。 样式生成完毕后，vue会在组件渲染的过程中，将这个唯一标识符添加到当前组件对应的DOM元素的class属性中，例如： ``` <div data-v-xxxxxx class="test">Hello Vue!</div> ``` 这样，vue会通过这个唯一标识符来匹配具体的样式规则，保证了样式仅在当前组件中生效，不会影响其他组件和全局样式。这样做的好处是，使得组件的样式具有封装性，防止样式冲突，提高了代码的可维护性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值