关于vue文件样式生效问题

最新推荐文章于 2023-03-15 15:47:50 发布
最新推荐文章于 2023-03-15 15:47:50 发布
阅读量511 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45114231/article/details/117781532
版权

关于vue的样式生效问题

  • 如果vue文件中样式的style标签加上scoped

    • 组件生成的时候，其根标签和里面的子标签会被加上类似data-v-xxx的属性值

    • 子组件的根标签中被加的属性值会带上其所在父组件中生成的属性值，然后还有自己生成的属性值

    • 最后生成的样式会带有[data-v-xxx]的属性选择器进行样式添加

    • 根据这个可以知道，我们在不同的vue文件中是可以用同样的类名和id名的,但是同一vue文件里还是和之前一样的。。。
      在这里插入图片描述

我真菜呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue文件修改后如何生效_前端如何实时监听本地代码文件的修改变动？——chokidar模块详解...
weixin_40004081的博客
12-08 3065
前言我们平时在开发代码时，很多构建工具在我们保存本地代码时都可以做到实时上传或者实时刷新页面，那么大家有没有想过构建工具是如何做到的？想做到这一点，就需要实时监听本地文件的增删改，掌握这些时机就可以做到在文件改变时热更新或者实时上传。下面我们就来聊一聊如何监听本地文件的变动！原理其实这些构建工具都是在用一个包chokidar，下面我们来看看如何使用它！图1如图1，我们引入chokidar这个包，并...
vue修改config后怎么生效_vue.config.js 配置无效？
weixin_30271235的博客
01-12 1324
料青山看我应如是...写错了正确写法：constpath=require("path");functionresolve(dir){returnpath.join(__dirname,dir);}module.exports={lintOnSave:true,//生产环境是否生成sourceMap文件productionSourceMap:...
vue修改config后怎么生效_Vue项目创建build后可修改的配置文件
weixin_36324426的博客
12-30 2081
需要一个配置文件，能在项目打包(build)时不被打包，方便修改，同时项目刷新时读取改配置。实现方法如下：1.在项目的static目录下创建project.config.json文件(名称随意，建议带上config关键字，易于辨识)内容为json格式：1 {2 "serviceUrl": "http://localhost:30001/service/api/",3 "baseUrl": ...
vue设置html样式无效,vue-cli设置css不生效的解决方法
weixin_36245032的博客
06-05 814
我们有的项目使用的是老的vue-cli脚手架生成的，今天想写点东西，发现.vue文件里面 style 里面写的样式都不生效了，很自然就想到是不是loader的问题。在这种项目的webpack.base.config.js一般设置loader的rules: [...(config.dev.useEslint ? [createLintingRule()] : []),{test: /\.vue$/,...
Visual Studio Code前端vue项目修改后不生效问题
A5d4gpjvbbkv的博客
08-31 2608
VScode需要ctrl+s!!!
vue在index.html中引入静态文件不生效问题及解决方法
11-28
本文针对的是Vue小白，不喜勿喷，谢谢 出现该问题的标志如下 控制台warning（Resource interpreted as Stylesheet but transferred with MIME type text/html） 出现的原因及解决办法 第一种可能出现原因就是引入...
Vue单页应用引用单独的样式文件的两种方式
08-27
给大家介绍Vue单页应用如何引用单独的样式文件，本文以css文件为例，通过两种方式给大家介绍的非常详细，需要的朋友参考下吧
Vue的单文件组件
01-08
文章目录单文件组件vue 中后缀名是 .vue 的文件，我们称它为 单文件组件单文件组件的优点一个单文件组件的组成使用sass单文件组件的一些特点 单文件组件 vue 中后缀名是 .vue 的文件，我们称它为 单文件组件 单文件...
.vue文件 加scoped 样式不起作用的解决方法
08-27
本篇文章主要介绍了.vue文件 加scoped 样式不起作用的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-cli设置css不生效的解决方法
01-19
我们有的项目使用的是老的vue-cli脚手架生成的，今天想写点东西，发现.vue文件里面 style 里面写的样式都不生效了，很自然就想到是不是loader的问题。 在这种项目的webpack.base.config.js一般设置loader的 rules: ...
vue中更改数组中属性,在页面中不生效的解决方法
10-16
今天小编就为大家分享一篇vue中更改数组中属性,在页面中不生效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在Vue写样式，一直出现[data]，改不了
weixin_43814775的博客
03-08 239
前一段时间，在vue写样式，我是用ant-design-vue框架吗 但是我们不能直接拿过来copy，起码改变颜色，还有字体吧，还有没必要的东西也得删掉 但是呢？，我都指定了具体class，一直不生效 所以我就用了:deep的方法，这样生效. 但是，项目经理说，不要用这样的写法！ 因为，在一个同样的class里套多层：deep在Chrome浏览器是可以的，但是其他浏览器就不行！ 所以我建议，想用的话，不要多套娃(:deep) 要么也可以这样使用 <style lang="scss" scoped&
vue3配置打包后的项目改配置文件后直接生效，解决每次修改配置需要重新打包的问题
weixin_46951831的博客
02-16 1905
前后端分离项目打包记录
更改.vue文件名不生效
wang_xiao_ye的博客
09-01 1123
更改.vue文件名不生效 在编辑器上或在本地文件夹里修改.vue文件名的大小写不生效，导致本地及测试环境没问题，上线时报错，原因是 git对文件名大小写不敏感。 解决办法： 执行命令 git config core.ignorecase false ...
vue项目中node_modules内容修改并且永久生效（Popup弹出层组件）
weixin_59717072的博客
03-15 1736
vue中node_modules内容修改保存生效，Popup弹出层组件
vue项目发布后文件未生效
Roriring的博客
05-22 5319
修改的项目源代码没有生效（vue，js，css） 解决方案：在build文件夹下webpack.prod.conf.js文件中生成一个时间戳，在输出文件后面加上时间戳，使每次生成最新的文件 如果还存在有文件（非源代码）没有更新 解决方案：使用clean-webpack-plugin (注意使用稳定版本) 作用：将指定的出口文件夹下的文件全部删除 1.npm install -D clean-webpack-plugin@3.0.0 2.在build文件夹下webpack.prod.conf.j.
Vue - 最新 H5 自定义配置文件不参与打包，让外部有个配置文件能修改并且直接生效的办法（已经打包完毕的项目改配置文件后直接生效，解决每次修改配置都需要重新打包的问题）超级详细的解决示例代码
王佳斌
03-20 4096
vue.js网站项目打包H5后 希望可以修改固定的配置，vue.js h5 PC网页项目打包后修改不方便有没有一个配置文件能不被打包，vue.js网站每次打包后都会把配置文件给弄消失怎么办，vue.js H5配置打包文件抽离出config.js进行线上可修改接口，vue.js 每次改点东西都需要重新打包，怎么让 vue.js 的h5项目打包后仍可修改配置文件呢，vue.js - 最新 H5 自定义配置文件不参与打包，让外部有个配置文件能修改并且直接生效的办法（已经打包完毕的项目改配置文件后直接生效，解决每次
解决vue中v-html元素中标签样式
突维
11-14 1194
这篇文章主要介绍了三种方式解决vue中v-html元素中标签样式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 Vue为v-html中标签添加CSS样式 <template> <div class="hello"> <section> <h2 class="title">{{news.title}}...
vue前端 页面样式强制覆盖
画个圆圆的地球
08-30 1750
前端页面样式强制覆盖
vue修改样式文件不生效
最新发布
05-18
1. 缓存问题：浏览器可能会缓存 CSS 文件，造成修改后样式没有及时更新。可以尝试清除浏览器缓存或者在 link 标签中添加一个随机数来强制刷新缓存。 2. 样式优先级问题：如果有多个样式规则作用于同一个元素，那么...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值