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标签中, 书写的样式时局部的 -- 只能影响当前组件中书写的标签

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

扫描二维码关注公众号，回复： 16504942 查看本文章

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>