Vue实现todoList完整功能

今日小结：

使用vue脚手架进行项目的搭建，对于真个页面使用组件来进行页面的拆分，练习使用父子组件的之间的传值；

vue脚手架

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统

• @vue/cli 3.x

  安装新版本的Vue CLI
  npm install -g @vue/cli
  # OR
  yarn global add @vue/cli
  
  //和之前的版本有所不同的
  npm install -g vue-cli
  
  //查看本机当前的vue版本
  vue --version
  

• 创建项目工程

  //3.x之前的命令
  vue init webpack my-project
  //3.x之后的命令 和之前一样，使用命令进行安装
  vue create hello-world
  //也可使用vue-ui 进行项目工程的安装
  vue ui
  //可对项目初始化进行可视化的选择，对插件的管理以及项目的依赖更加形象
  

• 项目目录
  

  //和之前不同的是vue-cli3生成的项目没有webpack.config.js的配置文件；
  //如果要对项目进行webpack的配置，可以在与package.json的同级目录下创建一个 vue.config.js的配置文件。
  
  

• vue.config.js

  //vue.config.js的配置在vue-cli官网中的可以配置中有详细说明；
  //与webpack.config.js相比，vue.config.js的配置更加的简便，
  

  vue.config.js的配置

父子组件之间传值

父组件给子组件传值

• 通过属性绑定的方式将数据传给子组件

  <Content
        :type="type"
        :list="selectList"
        :CountUnComputed="getCountUnComputed"
      />
  

子组件给父组件传值

• 通过$emit() 为父组件绑定监听的方法

  <Content
        @delete="handleDelete"
        @complete="handleComplete"
        @delcomplete="handleDeleteAllComplete"
        @checked="handleCheckedAll"
        @all="handleSelectAll"
        @has="handleSelectComplete"
        @un="handleSelectUnComplete"  
        @edit="handleClickEdit"
        @bledit="handleEditBlur"
        @cancel="handleEditCancel"
        @save="handleInputEdit"
      />
  

window.localStorage

• 通过设置缓存，从缓存中读取值，从而使得下一次刷新的时候，出现的list值是上一次的；记录数值

• 通过watch进行深度监听

  //这里 watch 的一个特点是，最初绑定的时候是不会执行的，要等到监听值改变时才执行监听计算
  //deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何一个属性都会触发这个监听器里的 handler。
  //给 其 绑定了一个handler方法，我们写的 watch 方法其实默认写的就是这个handler
  watch:{
      list:{
        handler(){
            store.saveList("storeData",this.list);
        },
        deep:true
      }
    },
  

• 不深度监听

   watch:{
      // list:function(){
      //   store.saveList("storeData",this.list);
      // }
    },
  

实现ToDoList功能

• 添加删除
• 空值判断
• 点击复选框改变状态
• 多选删除，全删除
• 显示未完成任务和完成任务数
• 挑选所有完成和未完成
• 可对每行内容重新编辑，回车保存，esc取消值会返回编辑前的值；双击也可编辑
• 使用localStorage缓存值，再次刷新呈现上一次的值

代码地址

https://github.com/ZQD1224/TodoList