vue.js学习笔记三十一—— 组件中style中写的样式

要使用style需要安装style-loader与css-loader，在webpack.config.js中配置

module:{
        rules:[
            { test: /\.vue$/, use: 'vue-loader' }, // 处理 .vue 文件的 loader
            { test:/\.css$/,use:['style-loader','css-loader'] },
        ]
    },

1. 给login.vue文件的div添加color属性

<style>
    div {
        color:red;
    }
</style>

运行，发现，所有的div字体都变成红色了，如图：

这明显与我们的预期不相符合，我们希望，该属性只对login组件有效

2. 利用scoped约束作用域

<style scoped>
    div {
        color:red;
    }
</style>

发现只有login组件字体变成了红色的

效果图：

注意：普通的style标签只支持普通的样式，如果想要启用scss或less，需要为style元素设置lang属性

例如：

<style lang="scss" scoped>
    body {
        div {
            font-style:italic;
        }
    }
</style>

注意：在.vue文件中的style中定义的样式，都要用scope修饰

3. scoped属性选择器的实现原理

样式的scoped是通过 css 的属性选择器实现的

注意：

1. 什么是css属性选择器了？

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。但是，只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

例一：下面的例子为带有 title 属性的所有元素设置样式

[title]
{
color:red;
}

例二：下面的例子为 title="W3School" 的所有元素设置样式：

[title=W3School]
{
border:5px solid blue;
}

例三：设置表单的样式

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

2. CSS 选择器参考手册

选择器	描述
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute]	用于选取带有指定属性的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。