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属性

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

vue.js学习笔记三十一—— 组件中style中写的样式_第1张图片

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

2. 利用scoped约束作用域

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

效果图:

vue.js学习笔记三十一—— 组件中style中写的样式_第2张图片

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

例如:

注意:在.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] 匹配属性值中包含指定值的每个元素。

你可能感兴趣的:(#,vue,vue)