VUE温习:style层次分析

一、vue样式style层次分析

1、样式可以在main.js、模块js文件、组件style、组件script标签内,index.html文件内引入,不同位置引入的样式有什么关系。

2、总结:

  (1)样式从main.js的入口处开始顺序加载(注意顺序的意思),

  (2)遇到组件则加载组件script标签内引入的样式,

  (3)先处理完所有script中引入的样式,

  (4)再处理style,style按包含关系从外到内加载(注意这个从外到内的意思)

3、这些页面都是固定的,如果是异步加载页面,当路由切换到另一个页面时,此页面原来的样式是否会删除,当前页面的样式会添加到哪里?

先只会加载到app.vue的style,再点击那个页面就先加载页面的js文件,然后再执行script加载script里引入的css,再加载style里的css

4、如果都是异步加载组件,会怎么样?

  如果ComA和ComB都是异步组件,则先打开哪一页就加载哪一页的script和style

  总结:

  (5)异步组件先显示的先加载,

  (6)没有显示的页面或组件不加载style

5、一个组件内可以定义不止一个style,并且有scoped的style和没有scoped的style可以并存,它们会按照所定义的顺序加载(注意顺序加载的意思),并跟普通CSS拥有一样的权重优先机制。

6、通过main.js进入的样式是在head中显示,所以如果我们再body中定义样式是可以把head标签内的同名样式覆盖掉的,但是要注意的是在body内引入的样式,因为已经不在main.js控制范围内,也就是不参与打包,所以必须定义在static静态资源目录内。

上一篇:【iOS知识学习】_int、NSInteger、NSUInteger、NSNumber的区别和联系


下一篇:JavaScript之八皇后问题(递归)