Vue关于css的使用与图片img的使用

关于外部CSS的使用

在App.vue中 使用了 HelloWorld 组件, 所以会称为 父子关系

App是父, HelloWorld是子   <App><HelloWorld/></App>

scoped在局部中书写的代码, 只能影响到 template 中书写的标签

scoped: 当前作用域内; 仅限在当前组件中生效, 不加 scoped 将会影响全局

<style lang="scss" scoped>

</style>

如果在App.vue中给hello-world组件定义css样式需要用到一个特殊的手段

样式穿透: 强制修改子元素内部的元素样式

非常规手段: 需要主动添加 ::deep 前缀才能穿透表层 修改其内部样式

<style lang="scss" scoped>
.hello-world {
    background-color: #ccc;

    ::v-deep li {
        font-size: 30px;
    }
}
</style>

li属于hello-world内部的子元素, 无法在父元素中进行修改, 只有借助 ::deep 才可以实现样式

总结:

1. 带有scoped属性的style标签中, 书写的样式时局部的 -- 只能影响当前组件中书写的标签

   -- 样式穿透: 可以强制修改子元素内部的元素的样式

2. 不带scoped属性: 则影响全局所有标签

关于引入外部CSS问题

外部css文件: 存放在assets目录下

<script>

// 总: 在JS中引入外部css文件, 将会影响全局
// JS中引入外部css
import './assets/css/my.css'
// JS中引入外部scss
import './assets/css/my.scss'

</script>
<style lang="scss" scoped>
// 引入外部 scss : 在 scss中 带有scoped属性, 为局部引入
@import './assets/css/my.scss'

// 不要用 url() 的写法: 存在问题
@import url('./assets/css/my.scss');
</style>

关于图片的存放

本地图片的存放与使用

 public: 静态托管文件夹, 所有放在这里的文件最终都会打包到项目的根目录中

相当于 localhost:8080/505-smallskin-5.jpg

assets: 智能文件夹 -- 会静态分析代码, 仅把用到的图片资源进行打包

<template>
    <div>
        <!-- public -->
        <img src="/505-smallskin-5.jpg" height="200" alt="">

        <!-- assets -->
        <img src="./assets/img/banner1.png" height="200" alt="">
    </div>
</template>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值