前端之vue的组件化编码流程

一.实现静态组件

按功能划分, 一个小功能一个组件(没有绝对的对错)
组件←→复用的东西
1.划分组件
2.搭建结构和设计样式

二.实现动态组件 – 显示动态数据

将数据都交给所有组件的爸爸 ---- App.vue
数据在哪里操作数据的方法就要在哪里
props只读

// 可以实现勾选改变对象内的done值, 这是违规操作, 因为vue默认不是深层监视
       <input type="checkbox" v-model="todo.done" />

---

• 数据传递( 父 → 子)v-bind还可以向子组件传递数据.方法........., 子组件用props` 数组接收
• 动态的增删一个元素内的属性

<input type="text" checked>

动态↓↓↓

<input type="checkbox" checked>

三.实现交互 – 从绑定事件开始

获取输入框数据的两个方法
1.用函数事件参数

    <input type="text" placeholder="请输入你的任务名称，按回车键确认"
      @keyup.enter="add"/>

  methods: {
    
    
    add(e) {
    
    
      console.log(e.target.value);
    },

2.v-model 双向数据绑定

安装插件 nanoid(生成唯一id, 分别暴露形式)

1. 命令行安装

npm i nanoid

2. 导入,

import { nanoid } from "nanoid";

3. 使用

nanoid()

子组件向父组件传递数据:
父组件将方法传递给子组件, 组件调用方法, 数据就到父组件了

删除对象数组中的一项
1.用filter筛选(不改变元素组的情况下, 用一个新生成的数组存放符合条件的数据)

    todoDel(id) {
      this.todoList = this.todoList.filter((todo) => todo.id !== id);
    },

2.confirm(“对用户说的话”), 用户"确定", 返回true; 否则返回false.

    handleDel(id) {
      if (confirm("确定删除该待办事项吗?")) this.todoDel(id);
    },

条件统计 reduce

v-model 用于 输入元素的 初始化 和修改;

总结:

待办事项的本地存储

1.用watch监听对象数组todoList, 进行深层监听, handler函数用todoList的新值更新本地存储,
2.在data()中返回 JSON.parse(localStorage.getItem('todoList')) || [] , 因为空的todoList 的返回值是null , 不空时要用JSON.parse()解析