1.本地存储

在本地浏览器上存储大量的数据，HTML5提供了localStorage
1.数据存储在用户浏览器中；
2.设置，读取方便，页面刷新不丢失数据；
3.容量较大， 在5M左右
localStorage
1.生命周期永久生效，除非手动删除，否则关闭页面也会存在
2.可以多窗口(页面)共享（同一浏览器可以共享）
3.以键值对的形式存储使用

<!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>Document</title>
</head>
<body>
    
    <script>
        // 存储数据
        // localStorage.setItem('名字','zs')
        localStorage.setItem('uname','zs')

        // 读取数据
        // localStorage.getItem('名字')
        console.log(localStorage.getItem('uname'));

        // 删除数据
        // localStorage.removeItem('名字')
        localStorage.removeItem('uname');

        // 存储复杂数据类型
        var obj={
            name:"ls",
            age:23,
        }
        // localStorage只能存储字符串
        localStorage.setItem('o',JSON.stringify(obj));

        // 转换为json格式的对象
        console.log(JSON.parse(localStorage.getItem('o')))
    </script>
</body>
</html>

2.组件

概念：组件是可复用的vue实例，封装标签，样式，js代码；
组件化:封装的思想， 把页面上可复用的部分 封装为 组件
一个组件就是一个整体，有自己独立的结构，样式，js
好处：复用性强

使用

每个组件都是一个独立的个体，就是一个.vue文件

1.创建组件 新建一个.vue文件

2.注册组件

全局注册 --main.js

vue 数量存仓库 vue存储本地数据_vue.js

局部组件 某个vue文件内

vue 数量存仓库 vue存储本地数据_前端框架_02

使用组件

vue 数量存仓库 vue存储本地数据_前端框架_03

组件名字注意事项
组件名是驼峰命名法，使用时要用连接符

<template>
  <div>
    <!-- 3.使用组件 -->
    <home-view></home-view>
  </div>
</template>
<script>
// 1.引入
import homeView from "./views/HomeView.vue";
export default {
  // 2.局部注册
  components: {
    // homeview: homeview,
    homeView,
  },
};
</script>

<style>
</style>

3.组件–scoped作用

样式只对当前组件起作用；

当前组件内标签都被添加 data-v-hash值的属性；

css选择器都被添加 [data-v-hash值]的属性选择器

vue 数量存仓库 vue存储本地数据_前端框架_04


组件中的data必须是函数

一个组件是一个vue实例，如果data是一个对象的话，多个实例会共享一份数据，data是一个函数的话，每次return的都是一个新的对象

4.组件通信

父传子
从父组件向子组件传值
明确父和子是谁：
父： APP.vue
子：HomeView.vue

步骤：

1.子组件内，定义变量，准备接收，然后使用变量

vue 数量存仓库 vue存储本地数据_npm_05


2.父组件内 data中定义数据，引入子组件，子组件上自定义属性 传值

vue 数量存仓库 vue存储本地数据_npm_06


父传子-循环使用

每次循环 变量 组件都是独立的

<template>
  <div>
    <!-- 3.使用组件 -->
    <!-- <home-view :title="tit"></home-view> -->
    <home-view v-for="item in arr" :title="item"></home-view>
  </div>
</template>
<script>
// 1.引入
import homeView from "./views/HomeView.vue";
export default {
  data() {
    return {
      tit: "标题",
      arr: ["标题1", "标题2", "标题3"],
    };
  },
  // 2.局部注册
  components: {
    // homeview: homeview,
    homeView,
  },
};
</script>

<style>
</style>