05-Vue:本地存储、组件

最新推荐文章于 2022-11-07 19:42:30 发布

weixin_51339105

最新推荐文章于 2022-11-07 19:42:30 发布

阅读量347

点赞数

分类专栏：前端学习文章标签： vue.js javascript 前端框架 npm 前端

本文链接：https://blog.csdn.net/weixin_51339105/article/details/125998987

版权

前端学习专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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文件内
在这里插入图片描述

使用组件
在这里插入图片描述

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

<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值]的属性选择器
在这里插入图片描述
组件中的data必须是函数
一个组件是一个vue实例，如果data是一个对象的话，多个实例会共享一份数据，data是一个函数的话，每次return的都是一个新的对象

4.组件通信

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

步骤：
1.子组件内，定义变量，准备接收，然后使用变量
在这里插入图片描述
2.父组件内 data中定义数据，引入子组件，子组件上自定义属性传值

父传子-循环使用
每次循环变量组件都是独立的

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

weixin_51339105

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
05-Vue:本地存储、组件

一个组件是一个vue实例，如果data是一个对象的话，多个实例会共享一份数据，data是一个函数的话，每次return的都是一个新的对象。2.父组件内data中定义数据，引入子组件，子组件上自定义属性传值。//localStorage.setItem('名字','zs')概念组件是可复用的vue实例，封装标签，样式，js代码；一个组件就是一个整体，有自己独立的结构，样式，js。每个组件都是一个独立的个体，就是一个.vue文件。1.子组件内，定义变量，准备接收，然后使用变量。...
复制链接

扫一扫