C++ 全栈知识体系C++ 全栈知识体系
✿导航
  • 基础
  • 函数
  • 知识点
  • IO框架
  • 新版本特性
  • 数据库原理
  • SQL语言
  • SQL - MySQL
  • NoSQL - Redis
  • NoSQL - ElasticSearch
  • 算法基础
  • 常见算法
  • 领域算法
  • 分布式算法
  • 数据结构与算法
  • 计算机网络
  • 操作系统
  • 计算机组成
  • 开发
  • 测试
  • 架构基础
  • 分布式系统
  • 微服务
  • 中间件
  • 概念
  • 理论
  • 架构设计原则
  • 设计模式
  • 协议
  • 技术选型
  • 编码规范
  • 流水线构建 - CI/CD
  • 知识点 - Linux
  • 网站 - Nginx
  • 容器化 - Docker
  • 容器编排 - Kubernetes
  • 服务网格 - Service Mesh Istio
  • 常用快捷键 - Shortcut
  • 工具使用 - Tools
  • 开源项目
  • 学习项目
  • 个人项目
  • 项目开发
  • 项目Idea
  • 并发
  • 部署
  • 分布式
  • 知识
  • 问题
  • 编程语言与技术
  • 系统与架构
  • 软件开发实践
  • 数据处理与应用设计
  • 个人
  • 产品
  • 团队
  • 知识体系
  • Vue
关于
✿导航
  • 基础
  • 函数
  • 知识点
  • IO框架
  • 新版本特性
  • 数据库原理
  • SQL语言
  • SQL - MySQL
  • NoSQL - Redis
  • NoSQL - ElasticSearch
  • 算法基础
  • 常见算法
  • 领域算法
  • 分布式算法
  • 数据结构与算法
  • 计算机网络
  • 操作系统
  • 计算机组成
  • 开发
  • 测试
  • 架构基础
  • 分布式系统
  • 微服务
  • 中间件
  • 概念
  • 理论
  • 架构设计原则
  • 设计模式
  • 协议
  • 技术选型
  • 编码规范
  • 流水线构建 - CI/CD
  • 知识点 - Linux
  • 网站 - Nginx
  • 容器化 - Docker
  • 容器编排 - Kubernetes
  • 服务网格 - Service Mesh Istio
  • 常用快捷键 - Shortcut
  • 工具使用 - Tools
  • 开源项目
  • 学习项目
  • 个人项目
  • 项目开发
  • 项目Idea
  • 并发
  • 部署
  • 分布式
  • 知识
  • 问题
  • 编程语言与技术
  • 系统与架构
  • 软件开发实践
  • 数据处理与应用设计
  • 个人
  • 产品
  • 团队
  • 知识体系
  • Vue
关于
  • 知识体系

    • 知识体系 - 入门
    • 知识体系 - CSS
    • 知识体系 - JavaScript
    • 知识体系 - 工程化
    • 知识体系 - 优化
    • 知识体系 - 测试
    • 知识体系 - 构建部署
    • 知识体系 - 资源
  • Vue2

    • Vue基础

      • Vue基础 - 简介
      • Vue基础 - 入门
      • Vue基础 - 模板语法
      • Vue基础 - 数据绑定
      • Vue基础 - MVVM模型
      • Vue基础 - 事件处理
      • Vue基础 - 计算属性
      • Vue基础 - 监视属性
      • Vue基础 - 绑定样式
      • Vue基础 - 条件渲染
      • Vue基础 - 列表渲染
      • Vue基础 - 过滤器
      • Vue基础 - 内置指令
      • Vue基础 - 自定义指令
      • Vue基础 - 生命周期
    • Vue组件

      • Vue组件 - 基础
      • Vue组件 - 非单文件组件
      • Vue组件 - 单文件组件
    • Vue脚手架

      • Vue脚手架 - 基础使用
      • Vue脚手架 - ref和props
      • Vue脚手架 - 混入
      • Vue脚手架 - 插件
      • Vue脚手架 - todoList案例
      • Vue脚手架 - 自定义事件
      • Vue脚手架 - 全局事件总线
      • Vue脚手架 - 消息订阅与发布(pubsub)
      • Vue脚手架 - Vue封装的过渡和动画
    • Vue中的Ajax

      • Vue中的Ajax - 基础
      • Vue中的Ajax - slot插槽
      • Vue中的Ajax - github案例学习
    • Vuex

      • Vuex - 基础
      • Vuex - 使用
    • Vue Router

      • Vue Router - 基础
      • Vue Router - 使用
      • Vue Router - 多级路由(嵌套路由)
      • Vue Router - 路由传参
      • Vue Router - 编程式路由导航
      • Vue Router - 缓存组件
      • Vue Router - 生命周期钩子
      • Vue Router - 导航守卫
      • Vue Router - 工作模式
  • Vue3

    • Vue3 - 快速上手
    • Vue3 - 创建Vue3.0工程
    • Vue3 - 常用 Composition API
    • Vue3 - 响应式原理对比
    • Vue3 - 生命周期对比
    • Vue3 - 其它 Composition API
    • Vue3 - 新的组件
    • Vue3 - 导航守卫
    • Vue3 - 其他

Vue脚手架 - todoList案例

组件化开发过程

  1. 组件化编码流程:

  2. 拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。

  3. 实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:

  4. 一个组件在用:放在组件自身即可

  5. 一些组件在用:放在他们共同的父组件上(状态提升)

  6. 实现交互:从绑定事件开始

  7. props适用于:

    1. 父组件 ==> 子组件 通信
    2. 子组件 ==> 父组件 通信(要求父先给子一个函数)
  8. 使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的!

  9. props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做。

webStorage

  1. 存储内容大小一般支持5MB左右(依照浏览器)
  2. 浏览器端通过Window.localStorage和window.sessionStorage属性来实现本地存储机制
  3. 相关API
    1. xxxStorage.setItem('key','value') => 该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值
    2. xxxStorage.getItem('key') => 该方法接受一个键名作为参数,返回键名对应的值
    3. xxxStorage.removeItem('key') => 该方法接受一个键名作为参数,并把该键名从存储中删除
    4. xxxStorage.clear() => 该方法会清空存储中的所有数据
  4. 备注
    1. LocalStorage的存储的内容需要手动清除才会消失
    2. SessionStorage存储的内容会随着浏览器窗口关闭而消失
    3. xxxStorage.getItem('key')如果key对应的Value获取不到,则此方法的返回值为null
    4. Json.parse(null)的结果依然是null

localStorage和sessionStorage对比:

localStoragesessionStorage
生命周期永久的,关闭页面或浏览器之后数据也不会消失。(除非主动删除数据)仅在当前会话下有效(关闭了浏览器窗口后就会被销毁。)。引入了“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。(只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的。 )
作用域相同浏览器的不同标签在同源情况下可以共享只在当前标签可用,当前标签的iframe中且同源可以共享
存储大小一般都是:5MB同样
存储位置保存在客户端,不与服务器进行交互通信。同样
存储内容类型只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理同样
获取方式window.localStoragewindow.sessionStorage
应用场景常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据。敏感账号一次性登录

原文链接:https://blog.csdn.net/XiaoSen207/article/details/123385073

Last Updated:
Contributors: klc407073648
Prev
Vue脚手架 - 插件
Next
Vue脚手架 - 自定义事件