记一次 vue中style学习

为了避免全局组件之间的样式污染

1，<style>标签加上一个scoped属性

Vue 对 scoped的渲染规则

• 对于所有的 Vue 组件，只要设置了<style scoped></style>，Vue就会给该组件生成一个唯一data值。
• Vue 会将data值作为一个属性添加到组件内所有HTML的DOM节点
• 如果组件内部包含子组件，这有两种情况
  • 情况一：子组件没有设置<style scoped></style>，则只会给子组件的最外层标签加上当前组件的data属性
  • 情况二：子组件设置了<style scoped></style>，则子组件会自动生成一个自己的唯一data值，然后子组件最外层标签在自己的data属性后面添加父组件的data属性。
• 对于组件内写在<style scoped></style>里的样式，Vue均会自动在每句css选择器的末尾添加一个当前组件的data属性选择器来私有化样式。

所谓的局部css，就是通过vue-loader这个插件，在编译打包的时候将带有scoped属性的css打上一个tag，同时将template内的所有html都打上一个相同的tag，最后通过css的属性选择器定位，造就了所谓的局部css

引入了新的问题—样式不易（可）修改，而很多时候，我们是需要对公共组件的样式做微调的，需要使用深度作用选择器

 

 

根据lang属性设置的值不同，需要配合使用不同的语法，目前知道的lang的属性值有：scss，sass，less，stylus（项目里没有less,stylus,没有根据网上资料进行测试）

sass(scss) less stylus使用区别

scss

<style rel="stylesheet/scss" lang="scss" scoped>

.el-form-item /deep/ .el-form-item__label{

width: 90px !important;

}

或者

.el-form-item{

     /deep/ .el-form-item__label{

           width: 90px !important;

     }

}

css

<style lang="css" scoped>

.el-form-item >>> .el-form-item__label{

width: 90px !important;

}

</style>

sass

<style lang="sass" scoped>

.el-form-item /deep/ .el-form-item__label

width: 90px !important;

</style>

 

2，或者用各种命名规则来规避这个问题

在template的有且只有一个的直接子元素上增加一个class属性，然后在添加样式的时候都加上这个class name

 

 

 

另记录：

如果是没有符号，是具体数字，比如1.0.0，npm install 那就直接下载指定版本