VUE3基础实现TODOS记事本初步框架

在Vue 3中创建自定义指令与在JavaScript中创建对象或函数相比，是十分简便的，因为指令是Vue框架的一部分，它允许你在组件之上添加额外的逻辑，而不需要修改组件内部的实现。更好的代码组织，让指令可以集中在一个地方，而不是分散在多个组件中。这使得代码更容易维护和理解。更好的复用性使用户可以轻松地在多个组件之间共享指令。与Vue的响应式系统集成，指令可以直接利用Vue的响应式系统，使得它们能够响应数据的变化。

为了让读者朋友更好的理解后续的指令，先在前面给大家复习一下vue指令：

v-if：条件性地渲染元素。
v-else：用于 v-if 的 else 块。

v-else-if：用于 v-if 的 else-if 块。

xml 复制代码

<!-- 条件渲染 -->
<div>
    //isLoggedIn为真则进入
<h1 v-if="isLoggedIn">欢迎回来!</h1>
<h1 v-else>请登录。</h1>
</div>

v-show：根据表达式之真假，切换元素的 display CSS属性。

v-for：基于源数据多次渲染元素或模板块。

xml 复制代码

<!-- 循环渲染 -->
<ul>
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

v-bind：绑定属性值，简写为一个冒号 :。

xml 复制代码

<!-- 属性绑定 -->
<img v-bind:src="imageSrc" alt="Vue.js 图标">
<!-- 简写 -->
<img :src="imageSrc" alt="Vue.js 图标">

v-on：绑定事件监听器，简写为 @。

xml 复制代码

<!-- 事件监听 -->
<button v-on:click="doSomething">点击我</button>
<!-- 简写 -->
<button @click="doSomething">点击我</button>

v-model：在表单元素和应用状态之间创建双向绑定。
xml 复制代码
```

<input v-model="message">
```

时间就是金钱，效率就是生命

为什么要用vue来做这个记事本呢？对于vue初学者而言，JS应该是已经掌握的很好了，可能你们也用JS实现过这个备忘录的效果，但是在时间就是金钱，效率就是生命的今天，使用JS写这种有整体框架的项目效率实在是低下，不管是花费的时间还是对于代码的整洁度，vue的优势都是传统JS所无法比拟的。

这是目标项目的初步样式，我们将新增已办事项，未办事项，全部事项 三个新增功能

分模块步骤完成项目

arduino 复制代码

    //明确目标
    //1.搭建一个VUE框架
    //2.实现最开始的新增事项(add)
    //3.完成事件按钮的绑定和数据的更改
    //4.实现 已办事项，未办事项，全部事项 三大功能

1.创建大容器container作为vue框架的架构，全部功能放置在内

javascript 复制代码

      <div class="container">
  <h1>小黑记事本</h1>
      <textarea></textarea>
      <button>添加</button>
  <ul>
    <li>
      <span>{{index+1}}{{item.name}}</span>
      <button>点击完成</button>
    </li>
  </ul>
  <div class="total"><span>全部合计：{{list.length}} 件事项</span>
      //"三大件"
      <button id="Allhave" @click="alldata()">全部事项</button>
      <button id="haved" @click="check_cmp()">已办事项</button>
      <button id="unhaved" @click="check_uncmp()">待办事项</button></div>
 </div>
 //创建框架
 const app=new Vue({
  el:'.container',
  data:{
  //原始数据
    list:[{id:1,name:'跳绳',isConplete:false},{id:2,name:'跑步',isConplete:false}],
    list_copy:[{id:1,name:'跳绳',isConplete:false},{id:2,name:'跑步',isConplete:false}],
  },
  methods:{
    }，
  }

在app的data中的数据list为什么需要两份呢，这是因为在后续我们对与list会进行一系列的操作，如增查操作，在container框架内展示的都是list内的内容，而我们没有通过V-if进行筛选，所以每一次的查找list实际的值都发生了改变，而list_copy中记录的全部的数据，因此我们可以通过这个实现这些操作。

bash 复制代码

 id用来记录事件的序号
 isConplete用来判断事件是否完成，默认为false
 name用来记录时间的名称

刨去CSS样式大体是这样子

接下来进行我们的第二步骤：

arduino 复制代码

    //给textarea后面的按钮加上点击事件按钮，函数设置为add()
     <button @click="add()">添加</button>

在app的methods中加入add（）方法：

kotlin 复制代码

methods:{
  add(){
  if(this.up_data===''||this.up_data===' '){
  // 是空就不提交
  }
  else{
  const timer=+new Date()//使用时间戳来代表ID，也可以记录该创建时间
  this.list.push({id:timer,name:this.up_data,isConplete:false})
  //复制数据,存贮
  this.list_copy=this.list
  //清空输入框
  this.up_data=''
  }
 }
},

第三步完成事件按钮的绑定和数据的更改

在标签的button按钮中，加上@click="cmp(item.id)事件，item.id确保获取到的事件准确

xml 复制代码

    <li v-for="(item,index) in list">
  <span>{{index+1}}{{item.name}}</span>
  <button @click="cmp(item.id)">完成</button>
</li>

在methods中加入cmp()方法：

kotlin 复制代码

cmp(i){
  //创建临时变量index
  let index
  //获得未完成项目
  this.list=this.list.filter(item=>{
    if(item.id===i)
  //记录下被移除的项目
      index=item;
    return item.id !=i })
  //做出标记
  if(!index.isConplete){
  index.isConplete=true
  index.name+='（完成）'
  //将完成的项目放置最后
  }
  this.list.push(index)
  this.list_copy=this.list
},

第四步实现已办事项，未办事项，全部事项三大功能

已办事项

arduino 复制代码

 //给已办事项button按钮加上点击事件按钮，函数设置为check_cmp()    
 <button id="haved" @click="check_cmp()">已办事项</button>

在app的methods中加入check_cmp()方法：

kotlin 复制代码

     check_cmp(){
  //防止list数据不全面，将全部数据再赋值
  this.list=this.list_copy
  this.list=this.list.filter(item=>item.isConplete===true)
},

未办事项

arduino 复制代码

 //给未办事项button按钮加上点击事件按钮，函数设置为check_uncmp()    
 <button id="unhaved" @click="check_uncmp()">待办事项</button>

在app的methods中加入check_uncmp()方法：

kotlin 复制代码

      check_uncmp(){
  //防止list数据不全面，将全部数据再赋值
  this.list=this.list_copy
  this.list=this.list.filter(item=>item.isConplete===false)
},

全部事项

arduino 复制代码

 //给未办事项button按钮加上点击事件按钮，函数设置为"alldata()    
 <button id="Allhave" @click="alldata()">全部事项</button>

在app的methods中加入check_uncmp()方法：

javascript 复制代码

      alldata(){
  //将全部数据送回list
  this.list=this.list_copy
},

全部完成后可以实现以下效果

至于删除操作与这些操作大同小异，大家可以自行编辑操作。

VUE对于JS在框架这方面的优势是十分明显的了，这些代码除CSS外只有90行不到，纯VUE代码只有70行不到，如果使用纯JS书写200行或许都不够

这个只有录入和删除功能的JS都100多行了。原本想再写个纯JS版本的工作量太大了，还是算了吧，等以后补上吧。

最后代码奉上：

xml 复制代码

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./DiaryNote.css">
  <title>Todos</title>
</head>
<body>
 <div class="container">
  <h1>小黑记事本</h1>
      <textarea v-model="up_data"  maxlength="15" placeholder="最大输入15字事件"></textarea>
      <button @click="add()">添加</button>
  <ul>
    <li v-for="(item,index) in list">
      <span>{{index+1}}&nbsp; &nbsp; &nbsp; &nbsp;{{item.name}}</span>
      <button @click="cmp(item.id)">完成</button>
    </li>
  </ul>
  <div class="total"><span>全部合计：{{list.length}} 件事项</span><button id="Allhave" @click="alldata()">全部事项</button> <button id="haved" @click="check_cmp()">已办事项</button><button id="unhaved" @click="check_uncmp()">待办事项</button></div>
 </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
 const app=new Vue({
  el:'.container',
  data:{
    list:[{id:1,name:'跳绳',isConplete:false},{id:2,name:'跑步',isConplete:false}],
    list_copy:[{id:1,name:'跳绳',isConplete:false},{id:2,name:'跑步',isConplete:false}],
    up_data:''
  },
  methods:{
    add(){
      if(this.up_data===''||this.up_data===' '){
      // 是空就不提交
      }
      else{
      const timer=+new Date()
      this.list.push({id:timer,name:this.up_data,isConplete:false})
      //复制数据,存贮
      this.list_copy=this.list
      //清空输入框
      this.up_data=''
      }
    },
    cmp(i){
      // console.log(this.list)
      let index
      this.list=this.list.filter(item=>{
        if(item.id===i)
      //记录下被移除的项目
          index=item;
        return item.id !=i })
      //做出标记
      if(!index.isConplete){
      index.isConplete=true
      index.name+='（完成）'
      //将完成的项目放置最后
      }
      this.list.push(index)
      this.list_copy=this.list
    },
    check_cmp(){
      //防止list数据不全面，将全部数据再赋值
      this.list=this.list_copy
      this.list=this.list.filter(item=>item.isConplete===true)
    },
    check_uncmp(){
      this.list=this.list_copy
      this.list=this.list.filter(item=>item.isConplete===false)
    },
    alldata(){
      this.list=this.list_copy
    },
  }
 })
</script>

ps:写这些代码的时候一直想着数据，其实查找操作可以使用V-if大家可以试试。

感谢阅读指点。

VUE3基础实现TODOS记事本初步框架

时间就是金钱，效率就是生命

分模块步骤完成项目

1.创建大容器container作为vue框架的架构，全部功能放置在内

接下来进行我们的第二步骤：

第三步 完成事件按钮的绑定和数据的更改

第四步 实现 已办事项，未办事项，全部事项 三大功能

已办事项

未办事项

全部事项

第三步完成事件按钮的绑定和数据的更改

第四步实现已办事项，未办事项，全部事项三大功能