vue2 todolist案例

编程语言 2023-07-01 18:21:46 阅读次数: 0

1，首先利用vue脚手架@vue/[email protected]，创建vue2 项目 （安装过程有发布，可去查看）

2，配置ESLint:

解决ESLint和pretties之间冲突：关于方法后面是否需要空格问题（避免麻烦）

    'space-before-function-paren':'off'

3，下载dayjs库

npm i dayjs -S

4，在src目录下创建自定义插件（plugins.js）:

（1）实现全局过滤器：用于时间格式化

（2）实现自定义指令：输入框自动获取焦点

import dayjs from 'dayjs'
export default{
  install(Vue){
        Vue.filter('format',function(val,time){
          return dayjs(val).format(time)
        })
        Vue.directive('fbind',{
          bind(ele,binding){
            ele.value=binding.value
          },
          inserted(ele,binding){
            ele.focus()
          },
          update(ele,binding){
            ele.value=binding.value
          }
        })
  }
}

如图

5，在main.js文件中引入这个文件(plugins.js)

import plugins from '@/plugins.js'
Vue.use(plugins)

 6，利用element-UI库实现静态页面，拆分成四个组件：

（1）实现列表数据渲染 （实现时间格式化）效果图如下：

src文件夹的App.vue文件

<template>
  <div id="app">
    <div class="todo-container">
      <div class="todo-wrap">
        <MyHeader />
        <MyList :todos="todos" />
        <MyFooter />
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from '@/components/MyHeader.vue'
import MyList from '@/components/MyList.vue'
import MyFooter from '@/components/MyFooter.vue'
export default {
  name: 'App',
  data() {
    return {
      todos: [
        { id: '001', title: '抽烟', time: Date.now(), done: false },
        { id: '002', title: '喝酒', time: Date.now(), done: true },
        { id: '003', title: '烫头', time: Date.now(), done: false },
        { id: '004', title: '学习', time: Date.now(), done: true }
      ]
    }
  },
  components: { MyHeader, MyList, MyFooter },
  methods: {}
}
</script>

<style lang="less">
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>

 在src文件夹的components文件夹的Myheader.vue文件

<template>
  <div class="todo-header">
    <el-input placeholder="请输入你的任务名称，按回车键确认"></el-input>
  </div>
</template>
<script>
export default {
  name: 'MyHeader',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      title: ''
    }
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {}
}
</script>
<style lang="less" scoped>
/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>

 在src文件夹的components文件夹的MyItem.vue文件

<template>
  <li>
    <label>
      <el-checkbox></el-checkbox>
      <span>{
   
   { todo.title }}</span>
      <span>{
   
   { todo.time | format('YYYY/MM/DD') }}</span>
    </label>
    <el-button type="danger" plain class="btn btn-danger" style="display: none">删除</el-button>
  </li>
</template>
<script>
export default {
  name: 'MyItem',
  components: {},
  mixins: [],
  props: ['todo'],
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {}
}
</script>
<style lang="less" scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
li span:nth-child(2) {
  padding-right: 30px;
  padding-left: 5px;
}
.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}
</style>

 在src文件夹的components文件夹的MyList.vue文件

<template>
  <ul class="todo-main">
    <MyItem v-for="todo in todos" :key="todo.id" :todo="todo" />
  </ul>
</template>
<script>
import MyItem from '@/components/MyItem.vue'
export default {
  name: 'MyList',
  components: { MyItem },
  mixins: [],
  props: ['todos'],
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {}
}
</script>
<style lang="less" scoped>
/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
</style>

 在src文件夹的components文件夹的MyFooter.vue文件

<template>
  <div class="todo-footer">
    <label>
      <el-checkbox type="checkbox"></el-checkbox>
    </label>
    <span> <span>已完成0</span> / 全部2 </span>
    <el-button class="btn btn-danger">清除已完成任务</el-button>
  </div>
</template>
<script>
export default {
  name: 'MyFooter',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {}
}
</script>
<style lang="less" scoped>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}
</style>

7，实现的所有功能：

（1）将对数据的所有操作都保存到本地存储中

（2）新增todo

            i，实现输入框自动获取焦点

           ii，通过自定义事件$emit方法实现子传父，实现新增

（3）单删

         i，实现单删按钮隐藏显示切换功能

        ii，通过消息订阅与发布，实现单删功能

（4）修改内容

        i，实现编辑按钮隐藏显示切换功能

       ii，实现内容修改功能

（5）底部交互

       i，实现底部已完成和全部统计功能

       ii，实现反选功能

      iii，实现全选/取消全选功能

       iv，通过eventBus，实现清除所有完成事项

src文件夹的App.vue 文件

<template>
  <div id="app">
    <div class="todo-container">
      <div class="todo-wrap">
        <MyHeader @onAddList="addlist" />
        <MyList :todos="todos" />
        <MyFooter :totalTodoNums="totalTodoNums" :doneTodoNums="doneTodoNums" ref="refFooter" />
      </div>
    </div>
  </div>
</template>

<script>
import pubsub from 'pubsub-js'
import MyHeader from '@/components/MyHeader.vue'
import MyList from '@/components/MyList.vue'
import MyFooter from '@/components/MyFooter.vue'
export default {
  name: 'App',
  data() {
    return {
      todos: JSON.parse(localStorage.getItem('todos')) || []
    }
  },
  components: { MyHeader, MyList, MyFooter },
  computed: {
    // 计数
    totalTodoNums() {
      return this.todos.length
    },
    doneTodoNums() {
      return this.todos.reduce((sum, todo) => sum + (todo.done ? 1 : 0), 0)
    }
  },
  // 监听todo
  watch: {
    todos: {
      deep: true,
      handler(newVal) {
        localStorage.setItem('todos', JSON.stringify(newVal))
      }
    }
  },
  mounted() {
    pubsub.subscribe('removeTodo', this.removeTodo)
    this.$refs.refFooter.$on('onChangeDone', this.appChangeDone)
    this.$bus.$on('rmAllDoneTodo', this.rmAllDoneTodo)
  },
  beforeDestroy() {
    this.$refs.refFooter.$off('onChangeDone')
  },
  methods: {
    // 新增
    addlist(newTodo) {
      this.todos.unshift(newTodo)
    },
    // 单删
    removeTodo(_, id) {
      this.todos = this.todos.filter((item) => item.id !== id)
    },
    appChangeDone(bool) {
      this.todos.forEach((item) => (item.done = bool))
    },
    // 全删
    rmAllDoneTodo() {
      this.todos = this.todos.filter((item) => !item.done)
    }
  }
}
</script>

<style lang="less">
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>

 在src文件夹的components文件夹的MyHeader.vue文件

<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-fbind="title" v-model.trim="title" @keyup.enter="addtodo" />
    <!-- <el-input placeholder="请输入你的任务名称，按回车键确认" v-fbind="title" v-model.trim="title" @keyup.enter="addtodo"></el-input> -->
  </div>
</template>
<script>
import { nanoid } from 'nanoid'
export default {
  name: 'MyHeader',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      title: ''
    }
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    addtodo() {
      if (!this.title) return alert('输入内容不能为空！')
      const todo = { id: nanoid(5), title: this.title, time: Date.now(), done: false }
      this.$emit('onAddList', todo)
      this.title = ''
    }
  }
}
</script>
<style lang="less" scoped>
/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>

 在src文件夹的components文件夹的MyItem.vue文件

<template>
  <li @mouseenter="showBtn" @mouseleave="hideBtn" id="item">
    <label>
      <el-checkbox v-model="todo.done"></el-checkbox>
      <span v-show="!todo.isEdit">{
   
   { todo.title }}</span>
      <input type="text" v-model="todo.title" v-show="todo.isEdit" class="edit" @blur="doneEdit(todo)" ref="refEdit" />
      <span>{
   
   { todo.time | format('YYYY/MM/DD') }}</span>
    </label>
    <el-button type="danger" plain class="btn btn-danger" :style="styleObj" @click="delTodo(todo.id)">删除</el-button>
    <el-button type="danger" plain class="btn btn-edit mr-5" :style="styleObj" @click="doEdit(todo)">编辑</el-button>
  </li>
</template>
<script>
import pubsub from 'pubsub-js'
export default {
  name: 'MyItem',
  components: {},
  mixins: [],
  props: ['todo'],
  data() {
    return {
      styleObj: {
        display: 'none'
      }
    }
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    doneEdit(todo) {
      todo.isEdit = false
    },
    // 编辑
    doEdit(todo) {
      if (todo.hasOwnProperty.call('isEdit')) {
        todo.isEdit = true
      } else {
        this.$set(todo, 'isEdit', true)
      }
      this.$nextTick(() => {
        this.$refs.refEdit.focus()
      })
    },
    // 单删
    delTodo(id) {
      pubsub.publish('removeTodo', id)
    },
    showBtn() {
      this.$set(this.styleObj, 'display', 'block')
    },
    hideBtn() {
      this.$set(this.styleObj, 'display', 'none')
    }
  }
}
</script>
<style lang="less" scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
li span:nth-child(2) {
  padding-right: 30px;
  padding-left: 5px;
}
#item .btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
#item .btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}
#item .btn-edit {
  color: #fff;
  background-color: skyblue;
  border: 1px solid rgb(113, 201, 236);
}

#item .mr-5 {
  margin-right: 5px;
}
.edit {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 0 5px;
}
.edit:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>

 在src文件夹的components文件夹的MyList.vue文件

<template>
  <ul class="todo-main">
    <MyItem v-for="todo in todos" :key="todo.id" :todo="todo" />
  </ul>
</template>
<script>
import MyItem from '@/components/MyItem.vue'
export default {
  name: 'MyList',
  components: { MyItem },
  mixins: [],
  props: ['todos'],
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {}
}
</script>
<style lang="less" scoped>
/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
</style>

 在src文件夹的components文件夹的MyFooter.vue文件

<template>
  <div class="todo-footer" v-show="totalTodoNums">
    <label>
      <!-- <input type="checkbox" /> -->
      <el-checkbox type="checkbox" v-model="changeDone"></el-checkbox>
    </label>
    <span>
      <span>已完成{
   
   { doneTodoNums }}</span> / 全部{
   
   { totalTodoNums }}
    </span>
    <el-button class="btn btn-danger" @click="delAllDoneTodo">清除已完成任务</el-button>
  </div>
</template>
<script>
export default {
  name: 'MyFooter',
  components: {},
  mixins: [],
  props: ['totalTodoNums', 'doneTodoNums'],
  data() {
    return {}
  },
  computed: {
    changeDone: {
      get() {
        return this.totalTodoNums === this.doneTodoNums
      },
      set(bool) {
        this.$emit('onChangeDone', bool)
      }
    }
  },
  watch: {},
  mounted() {},
  methods: {
    delAllDoneTodo() {
      this.$bus.$emit('rmAllDoneTodo')
    }
  }
}
</script>
<style lang="less" scoped>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}
</style>

在src文件夹的main.js文件

import Vue from 'vue'
import App from './App.vue'
import plugins from '@/plugins.js'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(plugins)
Vue.use(ElementUI)
new Vue({
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this
  }
}).$mount('#app')

猜你喜欢

转载自blog.csdn.net/weixin_67268153/article/details/127803234
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022