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

关于外部CSS的使用

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

App是父, HelloWorld是子  

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

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

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

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

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

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

总结:

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

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

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

关于引入外部CSS问题

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

关于图片的存放

本地图片的存放与使用

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

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

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

你可能感兴趣的:(vue.js,css,前端)