Vue相关的scoped样式、less-loader安装、使用nanoid生成UUID、浏览器localStorage和sessionStorage

1. scoped样式

• 作用：默认冲突谁后import进行加载谁生效。让样式在局部生效，防止冲突
• 写法：<style scoped>
• App.vue使用scoped不对子组件的使用标签起作用。可以使用深度选择器来解决: ::v-deep(.class) {}、/deep/ .class {}、>>> .class {}

使用示例：

School.vue组件：style demo能生效，且style demo只在School.vue有效。style title不生效

<template>
	<div class="demo">
		<h2 class="title">学校名称：{{name}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'第一中学'
			}
		}
	}
</script>

<style lang="less" scoped>
	.demo{
		background-color: skyblue;
	}
</style>

App.vue组件：style title能生效

<template>
	<div>
		<h1 class="title">hello</h1>
    <School/>
	</div>
</template>

<script>
	import School from './components/School'

	export default {
		name:'App',
		components:{School}
	}
</script>

<style scoped>
  /*在School组件中使用不了title样式*/
	.title{
		color: red;
	}
</style>

效果如下：

基本原理就是给每个HTML标签随机生成一个属性，然后通过属性进行样式的绑定。如下所示：

2. less-loader安装

如果在.vue文件的style中使用less语法。需要安装less-loader

<style lang="less">
</style>

安装步骤：

1. 使用命令cnpm view less-loader versions查看所有版本，可以看到最新的版本是11.1.3
2. 使用命令cnpm view less-loader@11 peerDependencies，查看依赖的软件版本如下。而我们的webpack使用的是5.88.2

less-loader@11.1.3 { less: '^3.5.0 || ^4.0.0', webpack: '^5.0.0' }

3. 使用命令cnpm install less@4安装指定版本less到项目的node_modules。因为安装全局的项目中使用不了
4. 使用命令cnpm install less-loader@11安装指定版本less-loader到项目的node_modules。因为安装全局的项目中使用不了

1. 使用nanoid生成UUID

现在项目中使用命令cnpm install nanoid@3进行包的安装

使用示例：

<template>
	<div>
    <button @click="showUuid">点我显示nanoid生成的UUID</button>
  </div>
</template>

<script>
  import {nanoid} from  'nanoid'

	export default {
		name:'App',
    methods:{
      showUuid(){
        alert("UUID: " + nanoid())
      }
    }
	}
</script>

点击按钮，弹窗显示UUID

2. 浏览器localStorage和sessionStorage

1. 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
2. 浏览器端通过Window.localStorage(存储的内容会随着浏览器窗口关闭而消失)和Window.sessionStorage(存储的内容，需要手动清除缓存才会消失)属性来实现本地存储机制
3. 相关API：
   1. xxxxxStorage.setItem('key', 'value')：该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。注意点如下：
      1. 如果value是数字，则保存的也是字符串
      2. 对象保存需要通过JSON.stringify(person)转换成字符串保存
   2. xxxxxStorage.getItem('person')：该方法接受一个键名作为参数，返回键名对应的值。注意点如下：
      1. 如果值不存在返回null
      2. json字符串需要通过JSON.parse(personStr)进行转换成Object类型。JSON.parse(null)的结果依然是null
   3. xxxxxStorage.removeItem('key')：该方法接受一个键名作为参数，并把该键名从存储中删除
   4. xxxxxStorage.clear()：该方法会清空存储中的所有数据

浏览器中Storage保存的效果如下：