开发者学堂课程【前端自动化构建工具 Webpack：组件中 style 标签 lang 属性和 scoped 属性的介绍】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/587/detail/8234
组件中 style 标签 lang 属性和 scoped 属性的介绍
基本内容
一、login.vue
二、Account.vue
一、login.vue
如果在登陆子组件写样式，写出来的样式只是写程序人员自己使用，副组件并不会使用到该样式；
<template>
<div>
<h3>这是Account的登陆子组件,使用vue.文件定义出来的-{ {msg}</h3>
问：这个组件能不能有自己的数据？
答：在网页中，每个组件都有对应的 method。
</div>
</ template>
< script>
</ script>
<style >
div {
color: red
</style>
}
当一点击登陆，所以有组件都变红，这样显示的是全局样式；
首先检查根路由，程序上没有问题；“GoodList”没有问题；“Account”没有问题；点击“注册”没有问题；
提问：组件为什会变为红色？
解答：因为只有在登录的组件中写了红色，把所有 div 里面的颜色写成了红色；现在考虑只把登陆内部的颜色变为红色，但是外部 Account 也被变为了红色，也被套写，这是因为组件中的根容器，根元素决定的。App也被套写，
那么，上述程序中的div是组件中私有的样式还是全局样式？根据上图可知，它是全局样式。
l 当加入scoped之后：
<template>
<div>
<h3>这是Account的登陆子组件,使用vue.文件定义出来的-{ {msg}</h3>
问：这个组件能不能有自己的数据？
答：在网页中，每个组件都有对应的 method。
</div>
</ template>
< script>
</ script>
<style scoped >
div {
color: red
</style>
}
没有修改符元素；只有点击“登录”时，它才会变为红。
scoped 是将内部属性改变，而不改变外部属性；
二、Account.vue
<template>
<div>
<h3>这是Account 组件</h3>
<router-link to="/account/login">登陆</router-link>
<router-link to="/account/register">注册/router-link >
<router-view></router-view >
</div>
</ template>
<script>
</ script>
<style>
body { //属于scss语法，但是不可以这样写，此时会发生报错。//
div {
font-style : italics;
}
}
</style> 错误写法！请注意！
// 普通的style标签只支持普通的样式，如果想要启用scss或less，需要为style元素设置lang 属性。//
<style lang=“scss”scoped>
body {
div {
font-style : italics;
}
}
</style>
l 其他种类的 lang 属性
1、普通的：<style with css>
2、含有 scoped 的：<style with css scoped>
3、全局的：<style with less>
4、私有的：<style with less scoped>
只要写关于样式的程序，要是是关于全局的，一般都要加上“scoped”。
// 只要 style 标签，是在.vue 组件中定义的，那么推荐的都为 style 开启 scoped 属性。//
因为 style 是专门属于 Account 当前的组件，不应该让某个样式设置为全局的，只要让样式在组件内生效就可以了，这是推荐开启 scoped 属性的原因之一。
