Vue3.x Composition API - ToDoList 案例

已于 2022-08-30 17:14:29 修改
阅读量206 收藏
点赞数
分类专栏： 大前端学习笔记 Vue3 前端开发 文章标签： vue.js javascript 前端
于 2022-08-22 15:52:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32090185/article/details/126467621
版权

Vue3.x Composition API - ToDoList 案例

ToDoList 功能列表

  • 添加代办事项
  • 删除待办事项
  • 编辑待办事项
  • 切换待办事项
  • 存储待办事项

创建项目

npm

npm init vite-app to-do-list

yarn

yarn create vite-app to-do-list

添加待办事项

<template>
  <section id="app" class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input
        class="new-todo"
        placeholder="What needs to be done?"
        autocomplete="off"
        autofocus
        v-model="input"
        @keyup.enter="addTodo"
      />
    </header>
    <section class="main">
      <ul class="todo-list">
        <li v-for="todo in todos" :key="todo.text">
          <div class="view">
            <input class="toggle" type="checkbox" />
            <label>{{ todo.text }}</label>
            <button class="destroy"></button>
          </div>
          <input class="edit" type="text" />
        </li>
      </ul>
    </section>
  </section>
</template>

<script>
import './assets/index.css';

// 1. 添加待办事项
import { ref } from 'vue';

const useAdd = (todos) => {
  const input = ref('');
  const addTodo = () => {
    const text = input.value && input.value.trim();
    if (text.length === 0) return;
    todos.value.unshift({
      text,
      completed: false,
    });
    input.value = '';
  };
  return {
    input,
    addTodo,
  };
};

export default {
  name: 'App',
  setup() {
    const todos = ref([]);

    return {
      todos,
      ...useAdd(todos),
    };
  },
};
</script>

删除待办事项

HTML 添加删除事件

<button class="destroy" @click="remove(todo)"></button>

添加删除方法

import { ref } from 'vue';

const useRemove = (todos) => {
  const remove = (todo) => {
    const index = todos.value.indexOf(todo);
    todos.value.splice(index, 1);
  };
  return {
    remove,
  };
};

export default {
  name: 'App',
  setup() {
    const todos = ref([]);

    return {
      todos,
      ...useAdd(todos),
      ...useRemove(todos),
    };
  },
};

编辑待办事项

  • 双击待办事项,展示编辑文本框
  • 按回车或者编辑文本框失去焦点修改数据
  • 按 ESC 取消编辑
  • 把编辑文本框清空按回车,删除这一项
  • 显示编辑文本框的时候获取焦点

HTML

<section class="main">
  <ul class="todo-list">
    <li
      v-for="todo in todos"
      :key="todo"
      :class="{ editing: todo === editingTodo}"
    >
      <div class="view">
        <input class="toggle" type="checkbox" />
        <label @dblclick="editTodo(todo)">{{ todo.text }}</label>
        <button class="destroy" @click="remove(todo)"></button>
      </div>
      <input
        class="edit"
        type="text"
        v-model="todo.text"
        @keyup.enter="doneEdit(todo)"
        @blur="doneEdit(todo)"
        @keyup.esc="cancelEdit(todo)"
      />
    </li>
  </ul>
</section>

js

const useEdit = (remove) => {
  let beforeEditingText = '';
  const editingTodo = ref(null);
  const editTodo = (todo) => {
    beforeEditingText = todo.text;
    editingTodo.value = todo;
  };

  const doneEdit = (todo) => {
    if (!editingTodo.value) return;
    todo.text = todo.text.trim();
    todo.text || remove(todo);
    editingTodo.value = null;
  };

  const cancelEdit = (todo) => {
    editingTodo.value = null;
    todo.text = beforeEditingText;
  };
  return {
    editingTodo,
    editTodo,
    doneEdit,
    cancelEdit,
  };
};

export default {
  name: 'App',
  setup() {
    const todos = ref([]);
    const { remove } = useRemove(todos);

    return {
      todos,
      remove,
      ...useAdd(todos),
      ...useEdit(remove),
    };
  },
};

编辑文本框获取焦点

当你双击文本时，并未自动获取焦点，这时我们需要特殊处理，比如添加自定义指令

<input
  class="edit"
  type="text"
  v-model="todo.text"
  v-editing-focus="todo === editingTodo"
  @keyup.enter="doneEdit(todo)"
  @blur="doneEdit(todo)"
  @keyup.esc="cancelEdit(todo)"
/>

export default {
  name: 'App',
  setup() {
    const todos = ref([]);
    const { remove } = useRemove(todos);

    return {
      todos,
      remove,
      ...useAdd(todos),
      ...useEdit(remove),
    };
  },
  directives: {
    editingFocus: (el, binding) => {
      binding.value && el.focus();
    },
  },
};

切换待办事项的状态

  • 点击 checkbox,改变所有待办项状态
  • All/Active/Completed
    • 显示未完成待办项个数
    • 如果没有待办项，隐藏 main 和 footer
  • 移除所有完成的项目

点击 checkbox,改变所有待办项状态

<section class="main" v-show="count">
  <input id="toggle-all" class="toggle-all" v-model="allDone" type="checkbox" />
  <label for="toggle-all">Mark all as complete</label>
  <ul class="todo-list">
    <li
      v-for="todo in filteredTodos"
      :key="todo"
      :class="{ editing: todo === editingTodo, completed: todo.completed }"
    >
      <div class="view">
        <input class="toggle" type="checkbox" v-model="todo.completed" />
        <label @dblclick="editTodo(todo)">{{ todo.text }}</label>
        <button class="destroy" @click="remove(todo)"></button>
      </div>
      <input
        class="edit"
        type="text"
        v-model="todo.text"
        v-editing-focus="todo === editingTodo"
        @keyup.enter="doneEdit(todo)"
        @blur="doneEdit(todo)"
        @keyup.esc="cancelEdit(todo)"
      />
    </li>
  </ul>
</section>

import { computed, ref } from 'vue';
const useFilter = (todos) => {
  const allDone = computed({
    get() {
      return !todos.value.filter((todo) => !todo.completed).length;
    },
    set(value) {
      todos.value.forEach((todo) => {
        todo.completed = value;
      });
    },
  });
  return {
    allDone,
  };
};
export default {
  name: 'App',
  setup() {
    const todos = ref([]);
    const { remove } = useRemove(todos);

    return {
      todos,
      remove,
      ...useAdd(todos),
      ...useEdit(remove),
      ...useFilter(todos),
    };
  },
  directives: {
    editingFocus: (el, binding) => {
      binding.value && el.focus();
    },
  },
};

All/Active/Completed

  • 查看所有、选中、未选中
  • 显示未完成待办项个数
  • 如果没有待办项，隐藏 main 和 footer
<section class="main" v-show="count">
  <input id="toggle-all" class="toggle-all" v-model="allDone" type="checkbox" />
  <label for="toggle-all">Mark all as complete</label>
  <ul class="todo-list">
    <li
      v-for="todo in filteredTodos"
      :key="todo"
      :class="{ editing: todo === editingTodo, completed: todo.completed }"
    >
      <div class="view">
        <input class="toggle" type="checkbox" v-model="todo.completed" />
        <label @dblclick="editTodo(todo)">{{ todo.text }}</label>
        <button class="destroy" @click="remove(todo)"></button>
      </div>
      <input
        class="edit"
        type="text"
        v-model="todo.text"
        v-editing-focus="todo === editingTodo"
        @keyup.enter="doneEdit(todo)"
        @blur="doneEdit(todo)"
        @keyup.esc="cancelEdit(todo)"
      />
    </li>
  </ul>
</section>
<footer class="footer" v-show="count">
  <span class="todo-count">
    <strong>{{ remainingCount }}</strong> {{ remainingCount > 1 ? 'items' :
    'item' }} left
  </span>
  <ul class="filters">
    <li><a href="#/all">All</a></li>
    <li><a href="#/active">Active</a></li>
    <li><a href="#/completed">Completed</a></li>
  </ul>
</footer>

import { computed, onMounted, onUnmounted, ref } from 'vue';

const useFilter = (todos) => {
  const allDone = computed({
    get() {
      return !todos.value.filter((todo) => !todo.completed).length;
    },
    set(value) {
      todos.value.forEach((todo) => {
        todo.completed = value;
      });
    },
  });

  // 通过计算属性，过滤数据
  const filteredTodos = computed(() => filter[type.value](todos.value));
  // 通过计算属性，获取选中事项的数量
  const remainingCount = computed(() => filter.active(todos.value).length);
  // 通过计算属性，获取所有事项的数量
  const count = computed(() => todos.value.length);

  const onHashChange = () => {
    const hash = window.location.hash.replace('#/', '');
    if (filter[hash]) {
      type.value = hash;
    } else {
      type.value = 'all';
      window.location.hash = '';
    }
    console.log(type.value);
  };

  // 添加监听hash改变的事件
  onMounted(() => {
    window.addEventListener('hashchange', onHashChange);
    onHashChange();
  });

  // 移除监听hash改变的事件
  onUnmounted(() => {
    window.removeEventListener('hashchange', onHashChange);
  });

  return {
    allDone,
    count,
    filteredTodos,
    remainingCount,
  };
};

export default {
  name: 'App',
  setup() {
    const todos = ref([]);
    const { remove } = useRemove(todos);

    return {
      todos,
      remove,
      ...useAdd(todos),
      ...useEdit(remove),
      ...useFilter(todos),
    };
  },
  directives: {
    editingFocus: (el, binding) => {
      binding.value && el.focus();
    },
  },
};

移除所有完成的项目

<footer class="footer" v-show="count">
  <span class="todo-count">
    <strong>{{ remainingCount }}</strong> {{ remainingCount > 1 ? 'items' :
    'item' }} left
  </span>
  <ul class="filters">
    <li><a href="#/all">All</a></li>
    <li><a href="#/active">Active</a></li>
    <li><a href="#/completed">Completed</a></li>
  </ul>
  <button
    class="clear-completed"
    @click="removeCompleted"
    v-show="count > remainingCount"
  >
    Clear completed
  </button>
</footer>

const useRemove = (todos) => {
  const remove = (todo) => {
    const index = todos.value.indexOf(todo);
    todos.value.splice(index, 1);
  };
  const removeCompleted = () => {
    todos.value = todos.value.filter((todo) => !todo.completed);
  };
  return {
    remove,
    removeCompleted,
  };
};
export default {
  name: 'App',
  setup() {
    const todos = ref([]);
    const { remove, removeCompleted } = useRemove(todos);

    return {
      todos,
      remove,
      removeCompleted,
      ...useAdd(todos),
      ...useEdit(remove),
      ...useFilter(todos),
    };
  },
  directives: {
    editingFocus: (el, binding) => {
      binding.value && el.focus();
    },
  },
};

存储待办事项

src/utils/useLocalStorage.js

function parse(str) {
  let value;
  try {
    value = JSON.parse(str);
  } catch {
    value = null;
  }
  return value;
}

function stringify(obj) {
  let value;
  try {
    value = JSON.stringify(obj);
  } catch {
    value = null;
  }
  return value;
}

export default function useLocalStorage() {
  function setItem(key, value) {
    value = stringify(value);
    window.localStorage.setItem(key, value);
  }

  function getItem(key) {
    let value = window.localStorage.getItem(key);
    if (value) {
      value = parse(value);
    }
    return value;
  }

  return {
    setItem,
    getItem,
  };
}

import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue';
import useLocalStorage from './utils/useLocalStorage';
const storage = useLocalStorage();

// 5. 存储待办事项
const useStorage = () => {
  const KEY = 'TODOKEYS';
  const todos = ref(storage.getItem(KEY) || []);
  watchEffect(() => {
    storage.setItem(KEY, todos.value);
  });
  return todos;
};
export default {
  name: 'App',
  setup() {
    const todos = useStorage();
    const { remove, removeCompleted } = useRemove(todos);

    return {
      todos,
      remove,
      removeCompleted,
      ...useAdd(todos),
      ...useEdit(remove),
      ...useFilter(todos),
    };
  },
  directives: {
    editingFocus: (el, binding) => {
      binding.value && el.focus();
    },
  },
};

源码

白驹过隙时光荏苒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于Vue3.X的Vue-Cropper封面上传裁剪实例
10-29
由于官方Vue-Cropper提供的实例都是第V2.x的，自己整理了一份以备忘！ 注意，提交有两个按钮，选base64按钮获取的不上传到服务器，直接返回客户端base64图片，选bobo则需要自己写服务端接口，并返回图片地址。
Vue 2.x中vue-i18n的成分API-Vue.js开发
05-27
Vue 2.x中vue-i18n的合成API vue-i18n-composable Vue 2.x中vue-i18n的合成API安装npm i vue-i18n vue-i18n-composable @ vue / composition-api用法// main.js从'vue'导入Vue从'@ vue / composition-api'导入Vue...
大前端学习-Vue3.0 Composition API -TodoList 案例
大白菜的博客
09-26 715
文章内容输出来源 拉勾教育大前端高薪训练营 本篇内容将使用 Vue3.0 Composition API 去实现一个 ToDoList 案例，通过学习，可以让我们更好的学习Vue3.0 的内容, 体会到 Vue3.0 和 2.0 的区别 1、TodoList 项目结构 main.js 导入了 vue 的模块，从 Vue 模块又导入了createApp 函数，导入 app组件,将app 组件挂在到div 上 2、添加待办事项 模版代码 <header class="header"> .
2. Vue3 Composition API
5coder的大前端进阶之路-个人博客网站：blog.5coder.cn
11-27 913
接下来我们来介绍一下Vue3中新增的如何使用。注意仅仅是Vue3中新增的，我们依然可以使用。先来实现一下之前演示的获取鼠标位置的案例。做这个案例之前，需要先介绍一下这个函数，这里不借助任何的构建工具，直接使用浏览器中原生的的方式来加载Vue模块。注意，这里我们会使用完整版的Vue。首先，安装Vue3.0，创建文件。 打开浏览器，可以看到打印出来的对象。这里可以看到和都可以正常响应式，然后打开开发人员工具来看一下刚刚打印的对象，把这个对象展开，这里的成员要比Vue2中的对象的成员要少很多，而且这些成员都没有使
大前端 -vue - vue3.0 - Composition API
weixin_38245947的博客
01-05 171
Composition API createApp:创建一个vue对象。 setup: composition api的入口。 reactive: 把一个对象变成响应式对象，并且把该对象的嵌套属性也变成响应式对象。 vue3.0 响应式对象不能解构 案例：获取鼠标位置 import { createApp, reactive } from 'vue' // setup：第一个参数：props // 第二个参数：context，attrs，emit，slots createApp({
@vue/composition-api功能介绍
brizer的博客
08-01 1601
@vue/composition-api 是通过一个插件的方式,为 Vue2（2.7自带，2.6及以下可用） 提供类似 Vue3 composition API 的函数式编程能力。它的实现思路主要有:1、提供组合式函数,在函数内部追踪响应性依赖。2、将组合产生的响应式状态保存到组件实例上,并在渲染期间还原。3、重写组件的生命周期钩子,在钩子函数中恢复组合函数的上下文环境。通过 setup() 函数作为入口,在其执行期间运行各响应式 API 追踪依赖,形成响应式状态,然后保存到实例上;在生命周期钩子中变更执行
基于 vite3.x + vue3.x + antd-design-vue3.x 基础的后台管理系统模板.zip
最新发布
01-03
基于 vite3.x + vue3.x + antd-design-vue3.x + typescript4.x 基础的后台管理系统模板
vue-fullpage.js-Vue.js的官方fullPage.js组件。-Vue.js开发
05-27
Vue-fullpage.js fullpage.js库的官方Vue.js包装器。 在线演示| Codepen fullpage.js扩展名@ imac2。 感谢VasiliyGryaznoy Vue-fullpage.js fullpage.js库的官方Vue.js包装器。 在线演示| Codepen fullpage.js扩展名...
vue2-tsx-composition-api:Vue2，tsx，composition-api，vant整合
04-12
vue2-tsx-composition-api项目设置yarn install编译和热重装以进行开发yarn serve编译并最小化生产yarn build整理和修复文件yarn lint自定义配置请参阅。执照
Android上传单文件和多文件（后台使用MultipartFile）
热门推荐
qq_32090185的博客
01-21 1万+
android代码： package heath.com.microchat.utils; import android.util.Log; import org.apache.http.HttpEntity; import org.apache.http.HttpResponse; import org.apache.http.HttpStatus; import org.apach...
Android聊天软件开发（基于网易云IM即时通讯）——环境搭建（一）
qq_32090185的博客
04-15 1万+
去网易云注册账号并登陆 https://app.yunxin.163.com/index?clueFrom=nim&from=nim#/create 添加依赖 ndk { //设置支持的SO库架构 abiFilters "armeabi-v7a", "x86","arm64-v8a","x86_64" } implementation fileTree(d...
Android聊天软件开发（基于网易云IM即时通讯）——发送视频消息（六）
qq_32090185的博客
06-14 1万+
这次我们需要接入视频播放器的jar包 //视频播放 api('com.shuyu:GSYVideoPlayer:6.0.1') { exclude group: 'com.android.support:appcompat-v7:27.0.0' } api('com.shuyu:gsyVideoPlayer-java:6.0.1') { ...
Android聊天软件开发（基于网易云IM即时通讯）——发送图片消息（五）
qq_32090185的博客
06-11 9695
最近工作太忙，都没有时间写博客了。废话不多说，直接上代码。 在activity_send_message.xml添加发送图片的按钮 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" andr.........
Nuxt.js
qq_32090185的博客
01-27 9492
Study Notes Nuxt.js 介绍 Nuxt.js 是什么？ Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。 我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。 Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。 除此之外，我们还提供了一种命令叫：nuxt generate ，为基于 V
Android聊天软件开发（基于网易云IM即时通讯）——添加好友（三）
qq_32090185的博客
04-16 8588
这里先搭建viewpage+BottomNavigationView+Fragment的底部导航栏 activity_tabhost.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
Android仿微信拍摄、录制视频，以及视频播放（基于JCameraView和GSYVideoPlayer）
qq_32090185的博客
04-12 7964
本项目使用Androidstudio开发工具 引入权限 <uses-permission android:name="android.permission.FLASHLIGHT" /> <uses-feature android:name="android.hardware.camera" /> <uses-feature android:name="andro...
如何上传自己的npm包和安装上传的npm包并使用
qq_32090185的博客
09-18 7711
第一步： 首先我们去npm官网注册一个账号。 如果你的username一直不能注册成功，可以在你的username前面加一个~，就可以注册成功了。 第二步： 1.新建一个项目 2.生成package.json文件 npm init package name: (testpublish) //包名，可更改，也可以使用默认（直接回车） version: (1.0.0) 0..........
Android聊天软件开发（基于网易云IM即时通讯）——注册账号（二）
qq_32090185的博客
04-15 7314
OKhttp封装 IRequest package heath.com.chat.OKhttp; import java.util.Map; public interface IRequest { public static final String POST = "POST"; public static final String GET = "GET"; pu...
VUE2.x可以使用vue-video-player吗
12-09
可以使用vue-video-player来在VUE2.x中播放视频。vue-video-player是一个基于video.js的Vue 2.x视频播放器组件，可以轻松地在Vue项目中使用。以下是一个简单的示例： 首先，安装vue-video-player： ```shell npm ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

白驹过隙时光荏苒

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

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

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

打赏作者

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

抵扣说明：

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

余额充值