手把手教你用vue.js实现一个TODO-list

第一步

• 创建一个项目目录，进入在命令行工具中进入项目安装vue.js官方叫脚手架vue-cli.

npm install -g vue-cli

• 安装官方提供的脚手架魔板

vue init webpack todo_list

• 开启静态服务器,就可以在localhost:8080端口实时查看我们的项目页面

num run dev 

image.png

也可以用vue-cli3搭建脚手架 ，使用vue ui 图形界面创建项目 更加方便，

npm install -g @vue/cli

vue ui 

image.png
image.png

开始逻辑编写 该项目 地址为 ：https://github.com/wyx318/TODO_list

<header class="header">
    <h1>{{title}}</h1>
    <!-- 在data里面绑定初始数据 keyup键盘事件  -->
    <input class="new-todo" placeholder="What needs to be done?" autofocus
    v-model='newTodo'
    @keyup.enter='addTodo'
    >
  </header>

new Vue({
    el: '.todoapp',
  data: {
    title: 'todomvc',
    newTodo: 'vue公开',
    //页面上所有的内容 
    todos:[]
  },
  methods: {
      addTodo(e){
        this.todos.push(this.newTodo)
        //推进去之后还原
        this.newTodo=''
      }
  },

})

image.png
下一步：
开始渲染数据 使用的是 v-for 循环

<li v-for='todo in todos'>
        <div class="view">
          <input class="toggle" type="checkbox">
          <label>{{todo}}</label>
          <button class="destroy"></button>
        </div>
        <input class="edit" value="Rule the web">
      </li>

下一步：
对footer进行v-show判断 如果数组大于0就显示 否则就进行隐藏，这里需要注意的是v-if和v-show的区别在于，v-if就是不存在就会删除DOM节点，v-show就是隐藏相当于display:node;

image.png

下一步：
更改数据结构 ，增加数据属性，对应的渲染也要进行更正

image.png
下一步 动态绑定类名

 <section class="main">
    <input id="toggle-all" class="toggle-all" type="checkbox">
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
    <!-- 渲染数据 用 for-in循环   再动态的绑定选中状态的类 中间 划线  -->
      <li v-for='(todo,index) in todos'  :class='{completed:todo.completed}'>
        <div class="view">
            <!-- 选中状态进行实时渲染 checkbox 翻译为复选框 选中的时候 状态为completed:true  -->
          <input class="toggle" type="checkbox" v-model='todo.completed'>
          <label>{{todo.content}}</label>
          <!-- 删除按钮事件 删除的是当下的东西index-->
          <button class="destroy" @click='removeTodo(index)'></button>
        </div>
        <input class="edit" value="Rule the web">
      </li>
    </ul>
  </section>

image.png

下一步： ：对item进行设置 用到了过滤器 属性

// 定义过滤器 对 完成状态进行过滤 all Active Completed
var  filters={
    // 所有的
    all(todos){
        return todos
    },
    // 已经完成
    Active (todos){
        return todos.filter((todo)=>{
            return !todo.completed
        })
    },
    completed (todos) {
        return todos.filter((todo) => {
            return !todo.completed
        })
    }
}

image.png

下一步： 全选

<input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">
    <label for="toggle-all">Mark all as complete</label>
 //定义一个计算属性 对原有的数据动态的改变
  computed: {
      remain(){
          return filters.active(this.todos).length
      },
      isAll:{
          get(){
              //逻辑 是 当等于0的时候 判定全选
              return this.remain === 0
          },
          set(value){
              //逻辑是 全部选中才会电量 
              this.todos.forEach((todo) => {
                 todo.completed=value 
              });
          }
      }
  },

下一步： 双击编辑 并且获取焦点

image.png