案例：todo

最新推荐文章于 2023-03-08 09:57:06 发布
最新推荐文章于 2023-03-08 09:57:06 发布
阅读量713 收藏 3
点赞数
分类专栏： 案例 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Henry_ID/article/details/118754902
版权

根据已有的文件让vue文件跑起来怎么做？
在这里插入图片描述
在这里插入图片描述

1.根据已有的 package.json 下依赖包 yarn install / yarn(可以省略 install)

完成
在这里插入图片描述

todo案例

完整效果演示

在这里插入图片描述

todo案例-创建工程和组件

目标: 新建工程, 准备好所需的一切

  • 需求1: 创建新工程
  • 需求2: 分组件创建 – 准备标签和样式

分析：

​ ①：初始化todo工程

​ ②：创建３个组件和里面代码

​ ③：把styles的样式文件准备好

​ ④: App.vue引入注册使用, 最外层容器类名todoapp

预先准备: 把styles的样式文件准备好(从预习资料复制), 在App.vue引入使用

// 1.0 样式引入
import "./styles/base.css"
import "./styles/index.css"

根据需求: 我们定义3个组件准备复用

在这里插入图片描述

components/TodoHeader.vue - 复制标签和类名


<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox" >
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
    />
  </header>
</template>

<script>
export default {
 
}
</script>

components/TodoMain.vue - 复制标签和类名

<template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 -->
    <li class="completed" >
      <div class="view">
        <input class="toggle" type="checkbox" />
        <label>任务名</label>
        <button class="destroy"></button>
      </div>
    </li>
  </ul>
  
</template>

<script>
export default {
}
</script>

components/TodoFooter.vue - 复制标签和类名

<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>数量值</strong></span>
    <ul class="filters">
      <li>
        <a class="selected" href="javascript:;" >全部</a>
      </li>
      <li>
        <a href="javascript:;">未完成</a>
      </li>
      <li>
        <a href="javascript:;" >已完成</a>
      </li>
    </ul>
    <button class="clear-completed" >清除已完成</button>
  </footer>
</template>

<script>
export default {

}
</script>

App.vue中引入和使用

<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader></TodoHeader>
    <TodoMain></TodoMain>
    <TodoFooter></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import "./styles/base.css"
import "./styles/index.css"
    
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";


export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
};
</script>

todo案例-铺设待办任务

目的: 把待办任务, 展示到页面TodoMain.vue组件上

  • 需求1: 把待办任务, 展示到页面TodoMain.vue组件上
  • 需求2: 关联选中状态, 设置相关样式

分析：

​ ①: App.vue – 准备数组传入TodoMain.vue内

​ ②: v-for循环展示数据

​ ③: v-model绑定复选框选中状态

​ ④: 根据选中状态, 设置完成划线样式

App.vue

 <TodoMain :arr="showArr"></TodoMain>

export default {
  data() {
    return {
      list: [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
    };
  }
};

TodoMain.vue

<template>
  <ul class="todo-list">
    <!-- 2.2 循环任务-关联选中状态-铺设数据 -->
    <!-- completed: 完成的类名 -->
    <li :class="{completed: obj.isDone}" v-for="(obj, index) in arr" :key='obj.id'>
      <div class="view">
        <input class="toggle" type="checkbox" v-model="obj.isDone"/>
        <label>{{ obj.name }}</label>
        <!-- 4.0 注册点击事件 -->
        <button @click="delFn(index)" class="destroy"></button>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  props: ["list"]
};
</script>

<style>
</style>

todo案例-添加任务

目标: 在顶部输入框输入要完成的任务名, 敲击回车, 完成新增功能

  • 需求: 输入任务敲击回车, 新增待办任务

分析：

​ ①: TodoHeader.vue – 输入框 – 键盘事件 – 回车按键

​ ②: 子传父, 把待办任务 – App.vue中 – 加入数组list里

​ ③: 原数组改变, 所有用到的地方都会更新

​ ④: 输入框为空, 提示用户必须输入内容

子组件：TodoHeader.vue

<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox" />
    <label for="toggle-all"></label>
    <!-- 3.0 v-model       双向绑定获取输入框的值  -->
    <!-- 3.1 @keyup.enter  监听用户按下回车  -->
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      v-model.trim="task"
      @keyup.enter="downFn"
    />
  </header>
</template>

<script>
export default {
  data() {
    return {
      task: "",
    };
  },
  methods: {
    downFn() {
      if (this.task === "") {
        return alert("请输入用户名称");
      }
      // console.log("用户按下了回车键", this.task);
      // 3.2(重要) - 当前任务名字要加到list数组里
      this.$emit("create", this.task);
      // 为了更好地用户体验，清空输入框
      this.task = "";
    },
  },
};
</script>

父组件：综合案例_Todo.vue

<template>
  <!-- 1.3 在根标签添加 todoapp 类名 -->
  <div class="todoapp">
    <!-- 3.2 注册自定义事件 让子组件触发 -->
    <TodoHender @create="createFn"></TodoHender>
    <TodoMain :arr="list"></TodoMain>
    <TodoFooter></TodoFooter>
  </div>
</template>

<script>
// 1.1 使用组件的四个步骤：  新建组件（ vue 文件）  2.引入组件 import  3.注册组件 components  4.使用组件
import TodoFooter from "./components/TodoFooter.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoHender from "./components/TodoHender.vue";
// 1.2 样式引入
import "./styles/base.css";
import "./styles/index.css";
export default {
  // components:定义组件的结构
  components: {
    TodoFooter,
    TodoMain,
    TodoHender,
  },
  // data：定义数据的结构
  data() {
    return {
      list: [
        { id: 100, name: "吃饭", isDone: true },
        { id: 101, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
    };
  },
  //methods:定义函数/方法的结构
  methods: {
    createFn(theTesk) {
      // 3.3 push 到数组里
      this.list.push({
        // id 准备
        id: this.list.length ? this.list[this.list.length - 1].id + 1 : 10,
        // 任务是子组件触发自定义事件的时候传过来的
        name: theTesk,
        // 新建的任务默认都是未完成
        isDone: false,
      });
    },
  },
};
</script>

<style>
</style>

todo案例-删除任务

目标: 实现点x, 删除任务功能

  • 需求: 点击任务后的x, 删除当前这条任务

分析：

​ ①: x标签 – 点击事件 – 传入id区分

​ ②: 子传父, 把id传回– App.vue中 – 删除数组list里某个对应的对象

​ ③: 原数组改变, 所有用到的地方都会更新

App.vue - 传入自定义事件等待接收要被删除的序号

父组件：综合案例_Todo.vue

<template>
  <!-- 1.3 在根标签添加 todoapp 类名 -->
  <div class="todoapp">
    <!-- 3.2 注册自定义事件 让子组件触发 -->
    <TodoHender @create="createFn"></TodoHender>
    <TodoMain @del="deleteFn" :arr="list"></TodoMain>
    <TodoFooter></TodoFooter>
  </div>
</template>

<script>
// 1.1 使用组件的四个步骤：  新建组件（ vue 文件）  2.引入组件 import  3.注册组件 components  4.使用组件
import TodoFooter from "./components/TodoFooter.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoHender from "./components/TodoHender.vue";
// 1.2 样式引入
import "./styles/base.css";
import "./styles/index.css";
export default {
  // components:定义组件的结构
  components: {
    TodoFooter,
    TodoMain,
    TodoHender,
  },
  // data：定义数据的结构
  data() {
    return {
      list: [
        { id: 100, name: "吃饭", isDone: true },
        { id: 101, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
    };
  },
  //methods:定义函数/方法的结构
  methods: {
    //   创建任务
    createFn(theTesk) {
      // 3.3 push 到数组里
      this.list.push({
        // id 准备
        id: this.list.length ? this.list[this.list.length - 1].id + 1 : 10,
        // 任务是子组件触发自定义事件的时候传过来的
        name: theTesk,
        // 新建的任务默认都是未完成
        isDone: false,
      });
    },
    // 删除任务
    deleteFn(theId) {
      // 注意：filter 不改变原数组，需要重新赋值
      this.list = this.list.filter((item) => item.id !== theId);
    },
  },
};
</script>

<style>
</style>

子组件：TodoMain.vue

<template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 -->
    <li v-for="item in arr" :key="item.id" :class="{ completed: item.isDone }">
      <div class="view">
        <input v-model="item.isDone" class="toggle" type="checkbox" />
        <label>{{ item.name }}</label>
        <button class="destroy" @click="destroyBtn(item.id)"></button>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  // 接收父组件的数据
  props: ["arr"],
  methods: {
    destroyBtn(id) {
      // console.log("点击了删除按钮", id);
      this.$emit("del", id);
    },
  },
};
</script>

todo案例-底部统计

目的: 显示现在任务的总数

  • 需求: 统计当前任务的条数

分析：

​ ①: App.vue中 – 数组list – 传给TodoFooter.vue

​ ②: 直接在标签上显示 / 定义计算属性用于显示都可以

​ ③: 原数组只要改变, 所有用到此数组的地方都会更新

TodoFooter.vue - 接收list统计直接显示
子组件：TodoFooter.vue

<template>
  <footer class="footer">
    <span class="todo-count"
      >剩余<strong>{{ count }}</strong></span
    >
    <ul class="filters">
      <li>
        <a class="selected" href="javascript:;">全部</a>
      </li>
      <li>
        <a href="javascript:;">未完成</a>
      </li>
      <li>
        <a href="javascript:;">已完成</a>
      </li>
    </ul>
    <button class="clear-completed">清除已完成</button>
  </footer>
</template>

<script>
export default {
  props: ["farr"],
  // 通过 computed 计算结构
  computed: {
    count() {
      return this.farr.length;
    },
  },
};
</script>

父组件：综合案例_Todo.vue

<template>
  <!-- 1.3 在根标签添加 todoapp 类名 -->
  <div class="todoapp">
    <!-- 3.2 注册自定义事件 让子组件触发 -->
    <TodoHender @create="createFn"></TodoHender>
    <TodoMain @del="deleteFn" :arr="list"></TodoMain>
    <TodoFooter :farr="list"></TodoFooter>
  </div>
</template>

<script>
// 1.1 使用组件的四个步骤：  新建组件（ vue 文件）  2.引入组件 import  3.注册组件 components  4.使用组件
import TodoFooter from "./components/TodoFooter.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoHender from "./components/TodoHender.vue";
// 1.2 样式引入
import "./styles/base.css";
import "./styles/index.css";
export default {
  // components:定义组件的结构
  components: {
    TodoFooter,
    TodoMain,
    TodoHender,
  },
  // data：定义数据的结构
  data() {
    return {
      list: [
        { id: 100, name: "吃饭", isDone: true },
        { id: 101, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
    };
  },
  //methods:定义函数/方法的结构
  methods: {
    //   创建任务
    createFn(theTesk) {
      // 3.3 push 到数组里
      this.list.push({
        // id 准备
        id: this.list.length ? this.list[this.list.length - 1].id + 1 : 10,
        // 任务是子组件触发自定义事件的时候传过来的
        name: theTesk,
        // 新建的任务默认都是未完成
        isDone: false,
      });
    },
    // 删除任务
    deleteFn(theId) {
      // 注意：filter 不改变原数组，需要重新赋值
      this.list = this.list.filter((item) => item.id !== theId);
    },
  },
};
</script>

<style>
</style>

todo案例-数据切换

目的: 点击底部切换数据

  • 需求1: 点击底部切换 – 点谁谁有边框
  • 需求2: 对应切换不同数据显示

分析：

​ ①: TodoFooter.vue – 定义isSel – 值为all, yes, no其中一种

​ ②: 多个class分别判断谁应该有类名selected

​ ③: 点击修改isSel的值

​ ④: 子传父, 把类型isSel传到 综合案例_Todo.vue

​ ⑤: 定义计算属性showArr, 决定从list里显示哪些数据给TodoMain.vue和TodoFooter.vue

父组件：综合案例_Todo.vue

<template>
  <!-- 1.3 在根标签添加 todoapp 类名 -->
  <div class="todoapp">
    <!-- 3.2 注册自定义事件 让子组件触发 -->
    <TodoHender @create="createFn"></TodoHender>
    <TodoMain @del="deleteFn" :arr="showArr"></TodoMain>
    <TodoFooter @changeType="typeFn" :farr="showArr"></TodoFooter>
  </div>
</template>

<script>
// 1.1 使用组件的四个步骤：  新建组件（ vue 文件）  2.引入组件 import  3.注册组件 components  4.使用组件
import TodoFooter from "./components/TodoFooter.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoHender from "./components/TodoHender.vue";
// 1.2 样式引入
import "./styles/base.css";
import "./styles/index.css";
export default {
  // components:定义组件的结构
  components: {
    TodoFooter,
    TodoMain,
    TodoHender,
  },
  // data：定义数据的结构
  data() {
    return {
      list: [
        { id: 100, name: "吃饭", isDone: true },
        { id: 101, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
      getSel:'all',
    };
  },
  //methods:定义函数/方法的结构
  methods: {
    //   创建任务
    createFn(theTesk) {
      // 3.3 push 到数组里
      this.list.push({
        // id 准备
        id: this.list.length ? this.list[this.list.length - 1].id + 1 : 10,
        // 任务是子组件触发自定义事件的时候传过来的
        name: theTesk,
        // 新建的任务默认都是未完成
        isDone: false,
      });
    },
    // 删除任务
    deleteFn(theId) {
      // 注意：filter 不改变原数组，需要重新赋值
      this.list = this.list.filter((item) => item.id !== theId);
    },
    // 切换任务
    typeFn(theSel){
      this.getSel = theSel
    }
  },
  // computed 写计算属性的结构（算出来新的变量）
  computed: {
    showArr(){
      if( this.getSel === 'yes'){
        return this.list.filter(item => item.isDone === true)
      }else if(this.getSel === 'no'){
        return this.list.filter(item => item.isDone === false)
      }else{
        return this.list
      }
    }
  }
};
</script>

<style>
</style>

子组件：TodoFooter.vue

<template>
  <footer class="footer">
    <span class="todo-count"
      >剩余<strong>{{ count }}</strong></span
    >
    <ul class="filters">
      <li>
        <a :class="{selected :  isSel === 'all'}" href="javascript:;" @click="changeSel('all')" >全部</a>
        
      </li>
      <li>
        <a :class="{selected :  isSel === 'no'}" href="javascript:;" @click="changeSel('no')" >未完成</a>
      </li>
      <li>
        <a :class="{selected :  isSel === 'yes'}" href="javascript:;" @click="changeSel('yes')">已完成</a>
      </li>
    </ul>
    <button class="clear-completed">清除已完成</button>
  </footer>
</template>

<script>
export default {
  props: ["farr"],
  data () {
          return {
            // all 全部， no  未完成， yes  已完成
          isSel:"all"  
    }
  },
  methods: {
    changeSel(sel){
      // 点击时按钮添加边框
      this.isSel = sel
      // 触发父子间上的自定义事件，把 选中的类型 传到父组件中
      this.$emit('changeType', sel)
      
    }
  },
  // 通过 computed 计算结构
  computed: {
    count() {
      return this.farr.length;
    },
  },
};
</script>

todo案例-清空已完成

目的: 点击右下角按钮- 把已经完成的任务清空了

  • 需求: 点击右下角链接标签, 清除已完成任务

分析：

​ ①: 清空标签 – 点击事件

​ ②: 子传父 – App.vue – 一个清空方法

​ ③: 过滤未完成的覆盖list数组 (不考虑恢复)

综合案例_Todo.vue - 先传入一个自定义事件-因为得接收TodoFooter.vue里的点击事件

父组件：综合案例_Todo.vue

<template>
  <!-- 1.3 在根标签添加 todoapp 类名 -->
  <div class="todoapp">
    <!-- 3.2 注册自定义事件 让子组件触发 -->
    <TodoHender @create="createFn"></TodoHender>
                            <!--  换成计算出来的 showArr 数组  -->
    <TodoMain @del="deleteFn" :arr="showArr"></TodoMain>
    <TodoFooter @changeType="typeFn" @clear="clearFn" :farr="showArr"></TodoFooter>
  </div>
</template>

<script>
// 1.1 使用组件的四个步骤：  新建组件（ vue 文件）  2.引入组件 import  3.注册组件 components  4.使用组件
import TodoFooter from "./components/TodoFooter.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoHender from "./components/TodoHender.vue";
// 1.2 样式引入
import "./styles/base.css";
import "./styles/index.css";
export default {
  // components:定义组件的结构
  components: {
    TodoFooter,
    TodoMain,
    TodoHender,
  },
  // data：定义数据的结构
  data() {
    return {
      list: [
        { id: 100, name: "吃饭", isDone: true },
        { id: 101, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
      getSel:'all',
    };
  },
  //methods:定义函数/方法的结构
  methods: {
    //   创建任务
    createFn(theTesk) {
      // 3.3 push 到数组里
      this.list.push({
        // id 准备
        id: this.list.length ? this.list[this.list.length - 1].id + 1 : 10,
        // 任务是子组件触发自定义事件的时候传过来的
        name: theTesk,
        // 新建的任务默认都是未完成
        isDone: false,
      });
    },
    // 删除任务
    deleteFn(theId) {
      // 注意：filter 不改变原数组，需要重新赋值
      this.list = this.list.filter((item) => item.id !== theId);
    },
    // 切换任务
    typeFn(theSel){
      this.getSel = theSel
    },
    // 清除已完成
    clearFn(){
      // 真是修改了 list
      this.list = this.list.filter(item => item.isDone !== true)
    }
  },
  // computed 写计算属性的结构（算出来新的变量）
  computed: {
    showArr(){
      if( this.getSel === 'yes'){
        return this.list.filter(item => item.isDone === true)
      }else if(this.getSel === 'no'){
        return this.list.filter(item => item.isDone === false)
      }else{
        return this.list
      }
    }
  }
};
</script>

<style>
</style>

子组件：TodoFooter.vue

<template>
  <footer class="footer">
    <span class="todo-count"
      >剩余<strong>{{ count }}</strong></span
    >
    <ul class="filters">
      <li>
        <a :class="{selected :  isSel === 'all'}" href="javascript:;" @click="changeSel('all')" >全部</a>
        
      </li>
      <li>
        <a :class="{selected :  isSel === 'no'}" href="javascript:;" @click="changeSel('no')" >未完成</a>
      </li>
      <li>
        <a :class="{selected :  isSel === 'yes'}" href="javascript:;" @click="changeSel('yes')">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clearBtn">清除已完成</button>
  </footer>
</template>

<script>
export default {
  props: ["farr"],
  data () {
          return {
            // all 全部， no  未完成， yes  已完成
          isSel:"all"  
    }
  },
  methods: {
    changeSel(sel){
      // 点击时按钮添加边框
      this.isSel = sel
      // 触发父子间上的自定义事件，把 选中的类型 传到父组件中
      this.$emit('changeType', sel)
    },
    clearBtn(){
      this.$emit('clear')
    }
  },
  // 通过 computed 计算结构
  computed: {
    count() {
      return this.farr.length;
    },
  },
};
</script>

todo案例-数据缓存

目的: 新增/修改状态/删除 后, 马上把数据同步到浏览器本地存储

  • 需求: 无论如何变化 – 都保证刷新后数据还在

分析：

​ ①:~Todo.vue – 侦听list数组改变 – 深度

​ ②: 覆盖式存入到本地 – 注意本地只能存入JSON字符串

​ ③: 刷新页面 – list应该默认从本地取值 – 要考虑

父组件：Todo.vue

<template>
  <!-- 1.3 在根标签添加 todoapp 类名 -->
  <div class="todoapp">
    <!-- 3.2 注册自定义事件 让子组件触发 -->
    <TodoHender @create="createFn"></TodoHender>
                            <!--  换成计算出来的 showArr 数组  -->
    <TodoMain @del="deleteFn" :arr="showArr"></TodoMain>
    <TodoFooter @changeType="typeFn" @clear="clearFn" :farr="showArr"></TodoFooter>
  </div>
</template>

<script>
// 1.1 使用组件的四个步骤：  新建组件（ vue 文件）  2.引入组件 import  3.注册组件 components  4.使用组件
import TodoFooter from "./components/TodoFooter.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoHender from "./components/TodoHender.vue";
// 1.2 样式引入
import "./styles/base.css";
import "./styles/index.css";
export default {
  // components:定义组件的结构
  components: {
    TodoFooter,
    TodoMain,
    TodoHender,
  },
  // data：定义数据的结构
  data() {
    return {
      list:JSON.parse(localStorage.getItem('todoList')) || [
        { id: 100, name: "吃饭", isDone: true },
        { id: 101, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
      getSel:'all',
    };
  },
  //methods:定义函数/方法的结构
  methods: {
    //   创建任务
    createFn(theTesk) {
      // 3.3 push 到数组里
      this.list.push({
        // id 准备
        id: this.list.length ? this.list[this.list.length - 1].id + 1 : 10,
        // 任务是子组件触发自定义事件的时候传过来的
        name: theTesk,
        // 新建的任务默认都是未完成
        isDone: false,
      });
    },
    // 删除任务
    deleteFn(theId) {
      // 注意：filter 不改变原数组，需要重新赋值
      this.list = this.list.filter((item) => item.id !== theId);
    },
    // 切换任务
    typeFn(theSel){
      this.getSel = theSel
    },
    // 清除已完成
    clearFn(){
      // 真是修改了 list
      this.list = this.list.filter(item => item.isDone !== true)
    }
  },
  // computed 写计算属性的结构（算出来新的变量）
  computed: {
    showArr(){
      if( this.getSel === 'yes'){
        return this.list.filter(item => item.isDone === true)
      }else if(this.getSel === 'no'){
        return this.list.filter(item => item.isDone === false)
      }else{
        return this.list
      }
    }
  },
  watch: {
    list:{
      deep:true,
      handler(){
        localStorage.setItem('todoList',JSON.stringify(this.list))
      }
      
    }
  }
};
</script>

<style>
</style>

todo案例-全选功能

目标: 点击左上角v号, 可以设置一键完成, 再点一次取消全选

  • 需求1: 点击全选 – 小选框受到影响
  • 需求2: 小选框都选中(手选) – 全选自动选中状态

分析：

​ ①: TodoHeader.vue – 计算属性 - isAll

​ ②: App.vue – 传入数组list – 在isAll的set里影响小选框

​ ③: isAll的get里统计小选框最后状态, 影响isAll – 影响全选状态

​ ④: 考虑无数据情况空数组 – 全选不应该勾选

提示: 就是遍历所有的对象, 修改他们的完成状态属性的值

子组件：TodoHender.vue

<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll" />
    <label for="toggle-all"></label>
    <!-- 3.0 v-model       双向绑定获取输入框的值  -->
    <!-- 3.1 @keyup.enter  监听用户按下回车  -->
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      v-model.trim="task"
      @keyup.enter="downFn"
    />
  </header>
</template>

<script>
export default {
  props:['arr'],
  data() {
    return {
      task: "",
    };
  },
  methods: {
    downFn() {
      if (this.task === "") {
        return alert("请输入用户名称");
      }
      // console.log("用户按下了回车键", this.task);
      // 3.2(重要) - 当前任务名字要加到list数组里
      this.$emit("create", this.task);
      // 为了更好地用户体验，清空输入框
      this.task = "";
    },
  },
  computed: {
    isAll:{
      get(){
        return this.arr.every(item => item.isDone === true)
      },
      set(val){
        this.arr.forEach(item => item.isDone = val)
      }
    }
  }
};
</script>

父组件：综合案例_Todo.vue

<template>
  <!-- 1.3 在根标签添加 todoapp 类名 -->
  <div class="todoapp">
    <!-- 3.2 注册自定义事件 让子组件触发 -->
    <TodoHender :arr="list" @create="createFn"></TodoHender>
                            <!--  换成计算出来的 showArr 数组  -->
    <TodoMain @del="deleteFn" :arr="showArr"></TodoMain>
    <TodoFooter @changeType="typeFn" @clear="clearFn" :farr="showArr"></TodoFooter>
  </div>
</template>

<script>
// 1.1 使用组件的四个步骤：  新建组件（ vue 文件）  2.引入组件 import  3.注册组件 components  4.使用组件
import TodoFooter from "./components/TodoFooter.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoHender from "./components/TodoHender.vue";
// 1.2 样式引入
import "./styles/base.css";
import "./styles/index.css";
export default {
  // components:定义组件的结构
  components: {
    TodoFooter,
    TodoMain,
    TodoHender,
  },
  // data：定义数据的结构
  data() {
    return {
      list:JSON.parse(localStorage.getItem('todoList')) || [
        { id: 100, name: "吃饭", isDone: true },
        { id: 101, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
      getSel:'all',
    };
  },
  //methods:定义函数/方法的结构
  methods: {
    //   创建任务
    createFn(theTesk) {
      // 3.3 push 到数组里
      this.list.push({
        // id 准备
        id: this.list.length ? this.list[this.list.length - 1].id + 1 : 10,
        // 任务是子组件触发自定义事件的时候传过来的
        name: theTesk,
        // 新建的任务默认都是未完成
        isDone: false,
      });
    },
    // 删除任务
    deleteFn(theId) {
      // 注意：filter 不改变原数组，需要重新赋值
      this.list = this.list.filter((item) => item.id !== theId);
    },
    // 切换任务
    typeFn(theSel){
      this.getSel = theSel
    },
    // 清除已完成
    clearFn(){
      // 真是修改了 list
      this.list = this.list.filter(item => item.isDone !== true)
    }
  },
  // computed 写计算属性的结构（算出来新的变量）
  computed: {
    showArr(){
      if( this.getSel === 'yes'){
        return this.list.filter(item => item.isDone === true)
      }else if(this.getSel === 'no'){
        return this.list.filter(item => item.isDone === false)
      }else{
        return this.list
      }
    }
  },
  watch: {
    list:{
      deep:true,
      handler(){
        localStorage.setItem('todoList',JSON.stringify(this.list))
      }
      
    }
  }
};
</script>

<style>
</style>
Henry_ww
关注
专栏目录
Vue TodoList完整案例
09-05
案例根据 http://todomvc.com/examples/vue/ 编写 完成功能：完成了所有的功能，如：添加、双击修改、ESC键取消编辑、清除所有已完成任务、一键全选任务、自动聚焦，本地保存等等。
Vue - Todos 案例
weixin_62897746的博客
10-27 1389
vue 实现 todos 具体代码思路和代码 给 input 框绑定回车事件，回车后把数据请求到 vuex 中 把数据保存至本地存储中 给下拉箭头绑定点击事件，点击则给所有多选框进行反选 判断是否选中，如果选中则禁用 给数组进行过滤，然后渲染至页面中 双击 input 框 则允许改变样式，平时则禁止改变
Todo案例
wangyangzxc123的博客
10-25 148
App.vue <template> <section class="todoapp"> <!-- 除了驼峰, 还可以使用-转换链接 --> <TodoHeader @make='make' :all='list' ></TodoHeader> <TodoMain :arr='monArr' ></TodoMain> <TodoFoot
vue--实现todo案例
小白小白从不日别的博客
12-09 3575
大致步骤如下： 1.创建新工程 2.在 components 里分别创建 TodoList 的头部组件（TodoHeader.vue）、主体组件（TodoMain.vue）以及底部组件（TodoFooter.vue） 3.在三个组件里分别完成其页面结构和样式，并在 App.vue 里分别引入三个组件并注册和使用，再引入需要的样式文件，最后启动项目效果如下： 4.把待办任务, 展示到页面TodoMain.vue组件上并关联选中状态, 设置相关样式： App.vue – 准备数组...
Vue做的ToDo小例子
weixin_34144450的博客
08-09 140
Vue做的ToDo小例子 今天用vue做有个小例子 首先要去vue的官网去看看，https://cn.vuejs.org/ 官网唯一的好处就是中文版的 我们先简单的认识一下vue再来进行安装 命令行安装 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板...
微信小程序学习案例：Todo List 源码解析
资源摘要信息:"微信小程序源码 todo list(学习版)" 微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。小程序同时也体现了“用完即走”的理念，...
现代前端开发框架：构建ToDo列表应用案例及代码分析
最新发布
05-27
本报告通过框架介绍和ToDo列表应用案例，提供了对现代前端开发的全面指导和建议，希望能够帮助开发者在实际项目中更好地应用现代前端框架。现代前端开发框架极大地简化了复杂应用的开发过程。通过实例学习和实践，...
todoApp：todo应用程序的简单API，允许用户创建，编辑，更新和删除任务
02-16
【标题】中的“todoApp”是一个基于API的待办事项应用程序，主要功能是管理用户的任务，包括创建、编辑、更新和删除。...同时，这个项目也可以作为学习PHP Web开发，特别是API设计和实现的一个良好实践案例。
当涉及到前端开发案例时，一个常见的案例是创建一个简单的待办事项（Todo List）应用程序 以下是一个简单的前端开发案例：
04-09
### 前端开发案例分析：待办事项（Todo List）应用程序 #### 功能要求概述 待办事项（Todo List）应用是一个典型的前端项目案例，它不仅能够帮助开发者熟悉前端技术的基本用法，还能深入了解如何构建实用且具有...
小案例——todo-list以及单测
12-10
在这个“小案例——todo-list以及单测”中，我们将探讨如何构建一个简单的待办事项（Todo List）应用程序，并为其编写单元测试。单元测试是软件开发中的一个重要环节，它确保代码的各个部分按照预期工作，提高了代码...
ToDo案例.html
08-09
最近学习了一个JQuery实战案例：todolist。主要是对localStorage本地存储数据的增、删、改、查操作与页面的渲染。综合性很强。 现在把这个案例作为笔记放在网络上，就算忘记了，也可以随时联网打开，把源码复制过来，根据需求更改使用。有需要的朋友也可以参考一下哦。而且增加了一些小功能，对内容的动态修改。
TodoMVC案例
09-14
Web前端学习笔记——AngularJS之TODOMVC案例使用的代码
Vue TodoList案例
Errol's Blog
04-02 1705
Vue TodoList案例
Vue小案例—todo list
极北
03-31 645
<li v-for="item in items" v-bind:class="{finished:item. isFinished}" v-on:click ="toggleFinished(item)"> {{item.label}} export default { data:function () { return {
Vue版todolist案例
码小余の博客
09-25 3011
Vue版todolist案例 todolist – 记录你的待办事项 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue版todolist案例</title> <style type="text/css"> *{ margin: 0;
Vue组件_组件通信_todo案例
xinyue_1208的博客
09-29 649
01-组件-4步曲 案例用less写的样式, 所以下载 yarn add less less-loader@5.0.0 -D 模板标签 <template> <div id="app"> <h3>案例：折叠面板</h3> <div> <div class="title"> <h4>芙蓉楼送辛渐</h4> <span class="b
一个简单todos的例子
m0_45272038的博客
02-13 851
文章目录效果图代码 效果图 代码 主要代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link r
10 Todo案例--创建工程
qq_38210427的博客
03-08 134
vue
vue示例todos
annuobin1120的博客
02-24 291
简单版todos-纯数据展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todoDEMO</title> <style> </style>...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Henry_ww

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值