初学Vue

1、插件使用

功能
用于增强Vue
本质
包含install方法的一个对象，isntall的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
定义插件
创建一个js文件，

对象.install = function(Vue,options){
	// 插件中可以实现各种功能：
	// 1. 添加全局过滤器
	Vue.filter(...)
	// 2. 添加全局指令
	Vue.directive(...)
	// 3. 添加全局混入
	Vue.mixin(...)
	// 4.等等操作
	......
}

// 暴露
export default 对象

使用插件
Vue.use(插件名)

2、scoped属性

问题描述：
两个组件设置的样式有重名的情况时则会出现问题，例如先被引入的组件中的样式会被后引入的样式覆盖掉
解决
同时给各个组件中的样式添加一个scoped属性

第一个组件中的样式
在这里插入图片描述
第二个组件中的样式

此时查看控制台

需要注意的是App.vue并不适用这个属性，因为这个组件是所有组件的父组件，其下的组件不受App.vue中的样式影响，但App中的html标签会受影响。

3、WebStorage浏览器存储

内容存在浏览器自带的cookied中，通常以键值对的方式存储数据
存储内容大小一般支持5MB左右
浏览器端通过Window.sessionStorage（会话存储）和Window.localStorage（本地存储）属性来实现存储机制。
相关API：
- xxxStorage.setItem(“key”,“value”);
  - 该方法接收一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
- xxxStorage.getItem(“key”);
  - 该方法接收一个键名作为参数，返回键名对应的值
- xxxStorage.removeItem(“key”);
  - 该方法接收一个键名作为参数，并把该键名对应的键值对从存储中删除
- xxxStorage.clear()
  - 该方法会清空存储中的所有数据。

3.1 本地存储

本地存储中的内容不会随着浏览器关闭而销毁，下一次浏览器打开时数据也会保存在cookie中。需要手动进行数据的销毁由两种方式：（1）打开浏览器cookie，手动清除存储的数据（2）打开浏览器，打开设置，选择清除浏览器数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浏览器本地存储</title>
</head>
<body> 
    <h1>localStorage</h1>
    <button onclick="saveData()">点我保存数据</button>
    <button onclick="getData()">点我获取数据</button>
    <button onclick="removeData()">点我删除一个数据</button>
    <button onclick="clearDatas()">点我清空所有数据</button>

    <script>
        const obj = {
      
      name:"jerry",age:19}

        // 保存数据
        function saveData(){
      
      
            localStorage.setItem("001","jack");
            localStorage.setItem("002","rose");
            // localStorage.setItem("003",obj); // [object,object]
            localStorage.setItem("003",JSON.stringify(obj)); // 保存一个对象，并将对象转换为JSON字符串形式

        }

        // 获取数据
        function getData(){
      
      
            console.log(localStorage.getItem("001"));
            console.log(localStorage.getItem("002"));
            // console.log(localStorage.getItem("003")); // [object,object]
            const result = localStorage.getItem("003"); // result接收到的值是JSON字符串
            console.log(result); // {"name":"jerry","age":19}
            console.log(JSON.parse(result)); // 使用JSON.parse将JSON字符串转为原来的类型。{name: 'jerry', age: 19}
        }

        // 移除一个数据
        function removeData(){
      
      
           localStorage.removeItem("001")
        }

        // 清空所有数据
        function clearDatas(){
      
      
            localStorage.clear();
        }
    </script>
</body>
</html>

在这里插入图片描述

3.2 会话存储

与本地存储不同的是会话存储的内容会随着浏览器窗口的关闭而销毁。

html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浏览器本地存储</title>
</head>
<body> 
    <h1>sessionStorage</h1>
    <button onclick="saveData()">点我保存数据</button>
    <button onclick="getData()">点我获取数据</button>
    <button onclick="removeData()">点我删除一个数据</button>
    <button onclick="clearDatas()">点我清空所有数据</button>

    <script>
        const obj = {
      
      name:"jerry",age:19}

        // 保存数据
        function saveData(){
      
      
            sessionStorage.setItem("001","jack");
            sessionStorage.setItem("002","rose");
            // sessionStorage.setItem("003",obj); // [object,object]
            sessionStorage.setItem("003",JSON.stringify(obj)); // 保存一个对象，并将对象转换为JSON字符串形式

        }

        // 获取数据
        function getData(){
      
      
            console.log(sessionStorage.getItem("001"));
            console.log(sessionStorage.getItem("002"));
            // console.log(sessionStorage.getItem("003")); // [object,object]
            const result = sessionStorage.getItem("003"); // result接收到的值是JSON字符串
            console.log(result); // {"name":"jerry","age":19}
            console.log(JSON.parse(result)); // 使用JSON.parse将JSON字符串转为原来的类型。{name: 'jerry', age: 19}
        }

        // 移除一个数据
        function removeData(){
      
      
           sessionStorage.removeItem("001")
        }

        // 清空所有数据
        function clearDatas(){
      
      
            sessionStorage.clear();
        }
    </script>
</body>
</html>