VUE3组件化|搭建非路由组件实现待办事项功能

作者: Confucianmen大宇 | 来源:发表于2022-12-19 00:19 被阅读0次

前言

使用vue组件化编码，实现代办事项功能。
在顶部输入框输入功能，按下回车确认后，在下方添加一个事项，事项有一个勾选框，代表该事项是否完成，若完成可以删除，在下方有一个统计事件整体情况，源码放在最后。

待办事项

开发一个前端模块可以概括为以下几个步骤：
写静态页面；
拆分为静态组件（框架，样式，图片）；
发请求（API）获取服务器的动态展示；
完成相应的动态业务逻辑。

实现静态组件

按照功能点抽取组件，使用组件实现静态效果

抽取组件
在src/compornents文件夹下创建四个组件文件，在name属性中定义组件名（避开原生标签名），VUE推荐我们使用多单词组成文件名。

组件name属性的作用：
开发者工具VueDevtools可以看见组件名字；
注册全局组件的时候可以通过组件实例获取组件名字

在父组件中用import语句声明组件，在各个组件中的template标签写出文档结构，如果做渐进增强，剪切走原生HTML时要留下组件标签，以防遗忘
在style标签中写出样式，如果不是全局样式添加scoped属性来保证不会污染全局，父级组件如果有全局共享的样式就不可加scoped属性，比如会在APP组件里面存放全局风格统一的按钮样式

非路由组件使用的四步：定义（编写组件文件）；引入（impact语句）；注册（在components对象中暴露）；使用（在模板标签中插入组件）。

初始化列表展示动态数据

将代办事项全部存储在一个数组中，每一件代办事项存储为一个对象，对象中设置三个属性{id，代办事项名，完成状态}，因为所有组件都要使用该数组，所以把该数组放在APP组件中声明（状态提升），在MyList标签中用属性绑定将该数组传给MyList组件，在MyList组件中用props接收该数组，在MyItem标签中用v-for指令遍历数组展示。
在Myltem标签中用属性绑定每个对象分别传入，在MyItem组件中用props接受对象，用插值语法显示对象的代办事项名。（尽量用复制粘贴来写传输对象，以防写错😀）
在MyLtem组件中的input标签 checked绑定事件完成状态todo.done

我在此处写了一个bug checked的值确实为false但是勾选框是选中状态

在我发现勾选框状态不对时，我打印了todo.done的值发现确实是false,我就去开发者工具中看发现值确实没问题，我犯了一个错误我只考虑了打印出的结果，我没有考虑数据类型

显示todo.done的值
我调整了checked的属性绑定，我写了一个表达式todo.done==true ，发现我在定义对象给done属性赋值时手残加了引号😀
edbug不止要检查属性值还要检查数据类型typefo

实现添加代办事项功能

有多个组件公用的数据，放在他们共同的父组件上

在APP组件的methds实例中定义一个添加事项的方法addTodo(todoObjs)在该方法中用unshift在数组前端添加对象。

父组件给子组件传参，用props传一个值；子组件给父组件传参，用props传一个函数，在子组件调用这个函数并把值传给他

将方法绑定给MyHeader标签，MyHeader组件中props接受addTodo方法。
MyHeader组件中在data实例中定义一个空字符型title变量，在input标签中双向数据绑定。
在methods实例中定义一个todoObj对象作为接受输入的代办事项名，调用addTodo将接受输入代办事项名的对象添加到数组。
id可以用nanoid来动态赋予。
在input标签事件绑定add方法

实现勾选代办事项功能

在MyItem组件methods实例中定义handleCheck方法，接受该id，将其传给APP组件中负责修改done属性的checkTodo方法。
将handleBheck事件绑定到input标签
在APP组件methods实例中定义一个方法CheckTodo(id),用forEach方法遍历数组，用if查找对应id的对象更新

实现删除代办事项

在MyItem组件methods实例中定义handleDelete方法，接受该id，将其传给APP组件中散出选中事项的deleteTodo方法。
将handleBheck事件绑定到input标签。
在APP组件methods实例中定义deleteTodo方法，接受该id；用filter方法筛选数组，用布尔运算选出要删除的对象删除。

实现代办事项的底部统计功能

事件总数统计
在MyFooter组件computed实例中定义total方法，利用todos的length属性输出返回值，在span标签中用插值语法插入total。
已完成事件统计
在MyFooter组件computed实例中定义total方法，用reduce方法累加todo.done，用三目运算符将done转化为1和0。

实现底部交互功能

全选勾选框
在MyFooter组件input标签中双向数据绑定isAll方法，在computed实例中声明isAll方法
用get上传勾选状态，用总数和和已完成来判断。
用set获取勾选状态传给checkAllTodo方法。
在App组件methods实例中定义checkAllTodo方法，通过forEach方法遍历，将todo.done的状态设置为MyFooter组件input标签的状态。
清除已完成代办事件
在MyFooter组件button标签中绑定事件clearAll，在clearAll方法中绑定clearAllTodo方法。
在app组件methods实例定义clearAllTodo方法，用filter方法赛选todos，返回done值为假false放回数组。

全局事件总线优化事项的勾选功能和删除功能

ue3从实例中移除了$on、$off 和$once 方法，所以我们如果希望继续使用全局事件总线，要通过第三方的库：
Vue3官方有推荐一些库，例如 mitt

源码

<template>
  <div>
    <div class="todo-container">
      <div>
        <MyHeader :addTodo="addTodo"></MyHeader>
          <MyList 
            :todos="todos" 
            :checkTodo="checkTodo"
            :deleteTodo="deleteTodo"
          ></MyList>
        <MyFooter
          :todos="todos"
          :checkAllTodo="checkAllTodo"
          :clearAllTodo="clearAllTodo"
        ></MyFooter>
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyFooter from './components/MyFooter.vue'
import MyList from './components/MyList.vue'



export default {
  name: 'App',
  components: {MyHeader , MyFooter,MyList},
  data(){
    return {
      todos : [
        {id:'1',title:'headlock',done:true},
        {id:'2',title:'loglock',done:true},
        {id:'3',title:'butterflysweep',done:true}
      ]
    }
  },
  methods:{
    //添加todo
    addTodo(todoObj){
      this.todos.unshift(todoObj)
    },
    //勾选取消一个todo
    checkTodo(id){

      this.todos.forEach((todo)=>{
        if(todo.id===id)todo.done=!todo.done
      })
    },
    //找出被删除的对象删除
    deleteTodo(id){
      this.todos=this.todos.filter(todo=>todo.id!==id)
    },
    //全选和取消全选
    checkAllTodo(done){
      this.todos.forEach((todo)=>{
        todo.done=done
      })
    },
    //清除已完成的todo
    clearAllTodo(){
      this.todos=this.todos.filter((todo)=>{
        console.log(todo.done)
        return !todo.done
      })
    }
  }
 
}
</script>

<style>
  bodoy{
    background-color: #fff;
  }
  .btn{
    display:inline-block;
    padding:4px 12px;
    font-size:114px;
  }
  .todo-container{
    width:600px;
    margin:0 auto;
  }

</style>

MyHeader

<template>
   <div class="todo-Header">
        <input 
            type="text" 
            placeholder="请输入任务名"
            v-model="title"
            @keyup.enter="add"    
        />
   </div>
</template>

<script>
export default {
    name:'MyHeader',
    //接收APP传递的addTodo
    props:['addTodo'],
    data() {
        return {
            title:''
        };
    },
    methods:{
        add(){

            //打报用户输入
            const todoObj={
                id:'1',//ID还未调整成为每个不同的
                title:this.title,
                done:false 
            }
            //通知APP组件添加一个todo对象
            this.addTodo(todoObj)
        },
    }
}
</script>

<style scoped>
    .todo-Header input {
        width:560px;
        height:28px;
        border-radius:4px;
        border:1px solid #ccc;
        padding:4px 7px;
    }
</style>

Mylist

<template>
   <ul class="todo-main">
        <MyItem
            v-for="todoObj in todos"
            :key="todoObj.id"
            :todo="todoObj"
            :checkTodo="checkTodo"
            :deleteTodo="deleteTodo"
        />
   </ul>
  
</template>

<script>
import MyItem from './MyItem.vue'

export default {
    name:'MyList',
    components:{MyItem},
    props:['todos','checkTodo','deleteTodo'],
    methods:{

    }

};
</script>


<style scoped>
    .todo-main{
        margin-left: 0px;
        border:1px solid #ddd;
        border-radius:2px;
        padding:0px;
    }
 
</style>

MyItem

<template>
  
    <li>
        <label>
            <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
            <span>{{todo.title}}</span>
            <button class="btn-danger" @click="handleDelete(todo.id)">删除</button>
        </label>
    </li>
</template> 

<script>
export default {
    name:'MyItem',
    props:['todo','checkTodo','deleteTodo'],
    methods:{
        handleCheck(id){
   
            this.checkTodo(id)//通知对应的todo.done取反
        },
        handleDelete(id){

            this.deleteTodo(id)
        }
    }
 
};
</script>


<style scoped>
    li {
        list-style: none;
        height:36px;
        padding: 0 5px;
        border-bottom: 1px solid rgb(85, 10, 214);
    }
    li label{
        float:left;
        cursor:pointer;

    }


    li button{
        float:right;
        display:none;
    }
    li:hover{
        background-color: rgb(159, 183, 238);
    }
    li:hover button{
        display:block;
    }
</style>

MyFooter

<template>
   <div class="todo-footer" v-show="total">
        <label>
            <input type="checkbox" v-model="isAll"/>
        </label>
        <span>
            <span>已完成{{doneTotal}}</span>全部{{total}}
        </span>
        <button class="btn-danger" @click="clearAll">清除已完成项目</button>
   </div>
</template>

<script>
export default {
    name:'MyFooter',
    props:['todos','checkAllTodo','clearAllTodo'],
    
    computed: {
        //总数
        total(){
            return this.todos.length
        },
        //已完成
        doneTotal(){
            return this.todos.reduce((pre,todo)=> pre+todo.done ,0)

        },
        // 控制全部选框
        isAll:{
            //对比总数和已完成来勾选全选的状态切换
            get(){
                return this.doneTotal===this.total && this.total>0
            },
            //获取勾选状态来操作todo.done勾选状态
            set(value){
                this.checkAllTodo(value)
            }
        }
    },
    methods:{
        clearAll(){
            this.clearAllTodo()
        }
    },
 
};
</script>


<style scoped>
    .todo-footer{
        height:40px;
        line-height:40px;

    }
    button{
        float:right;
        margin-top:5px;
    }
</style>

VUE3组件化|搭建非路由组件实现待办事项功能

前言

实现静态组件

初始化列表展示动态数据

实现添加代办事项功能

实现勾选代办事项功能

实现删除代办事项

实现代办事项的底部统计功能

实现底部交互功能

全局事件总线优化事项的勾选功能和删除功能

源码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读