YK菌

嗨！~ 大家好，我是YK菌 🐷 ，一个微系前端 ✨，爱思考，爱总结，爱记录，爱分享 🏹，欢迎关注我呀 😘 ~ [微信号: yk2012yk2012，微信公众号：ykyk2012]

「这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战 (opens new window)」

今天我们来使用Vue再做一个小demo，待办事项小demo，之前用React也做过一样功能的demo，可以对比学习~

项目代码 https://github.com/yk2012/vue_demo/tree/main/demo3_TodoList (opens new window)

# 1. 目标功能界面

在这里插入图片描述

# 2. 界面模块拆分

在这里插入图片描述 在这里插入图片描述

# 3. 主页 index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue_demo</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

# 4. 静态页面搭建

# 4.1 main.js

  • 引入基础css样式
import Vue from 'vue';
import App from './App.vue';
import './base.css';

new Vue({
    el: '#app',
    components: { App },
    template: '<App/>'
})

# 4.2 App.vue

<template>
  <div class="todo-container">
    <div class="todo-wrap">

      <TodoHeader />
      <TodoList />
      <TodoFooter />

    </div>
  </div>
</template>

<script>
  import TodoHeader from './components/TodoHeader';
  import TodoList from './components/TodoList';
  import TodoFooter from './components/TodoFooter';

  export default {
    components:{
      TodoHeader,
      TodoList,
      TodoFooter
    }
  }
</script>

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

# 4.3 TodoHeader.vue

<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认"/>
  </div>
</template>

<script>
export default {

}
</script>

<style>
/*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>

# 4.4 TodoList.vue

<template>
  <ul class="todo-main">
    <li>
      <label>
        <input type="checkbox"/>
        <span>xxxxx</span>
      </label>
      <button class="btn btn-danger" style="display:none">删除</button>
    </li>
    <li>
      <label>
        <input type="checkbox"/>
        <span>yyyyy</span>
      </label>
      <button class="btn btn-danger" style="display:none">删除</button>
    </li>
  </ul>
</template>

<script>
export default {

}
</script>


<style>
/*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;
}

/*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;
}
</style>

# 4.5 TodoFooter.vue

<template>
        <div class="todo-footer">
        <label>
          <input type="checkbox"/>
        </label>
        <span>
          <span>已完成0</span> / 全部2
        </span>
        <button class="btn btn-danger">清除已完成任务</button>
      </div>
</template>

<script>
export default {

}
</script>

<style>
/*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;
}

</style>

# 4.6 展示

在这里插入图片描述

# 5. 动态组件

# 5.1 动态显示初始化数据

# App.vue

定义数据：数组 todos {title, complete}

<template>
  <div class="todo-container">
    <div class="todo-wrap">

      <TodoHeader />
      <TodoList :todos="todos" />
      <TodoFooter />

    </div>
  </div>
</template>

<script>
  import TodoHeader from './components/TodoHeader';
  import TodoList from './components/TodoList';
  import TodoFooter from './components/TodoFooter';

  export default {
    data(){
      return{
        todos: [
          { title: '吃饭', complete: true },
          { title: '睡觉', complete: false },
          { title: '敲代码', complete: true }
        ]
      }
    },
    components:{
      TodoHeader,
      TodoList,
      TodoFooter
    }
  }
</script>

# TodoList.vue

接收数据，v-for遍历数组

<template>
  <ul class="todo-main">
    <TodoItem v-for="(todo, index) in todos" :key="index" :todo="todo"/>
  </ul>
</template>

<script>
import TodoItem from './TodoItem';
export default {
  props: {
    todos: Array
  },
  components:{
    TodoItem
  }
}
</script>

# TodoItem.vue

得到数据，双向绑定

<template>
  <li>
    <label>
      <input type="checkbox" v-model="todo.complete" />
      <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" style="display:none">删除</button>
  </li>
</template>

<script>
export default {
  props:{
    todo: Object,
  }
}
</script>

# 展示

在这里插入图片描述

# 5.2 动态交互——首部添加操作

# App.vue

定义添加addTodo函数

<template>
  <TodoHeader :addTodo="addTodo" />
</template>

<script>
  export default {
    methods:{
      addTodo(todo){
        this.todos.unshift(todo);
      }
    },
  }
</script>

# TodoHeader.vue

v-model双向绑定数据 定义add鼠标点击事件函数

  1. 检查输入合法性
  2. 根据输入生成一个todo对象
  3. 添加到todos
  4. 清除输入
<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/>
  </div>
</template>

<script>
export default {
  props:{
    addTodo: Function
  },
  data(){
    return {
      title: '',
    }

  },
  methods:{
    add(){
      // 1. 检查输入合法性
      const title = this.title.trim();
      if(!title){
        alert("请输入内容");
        return;
      }
      // 2. 根据输入生成一个todo对象
      const todo = {title, complete:false};
      // 3. 添加到todos
      this.addTodo(todo);
      // 4. 清除输入
      this.title = '';
    }
  }
}
</script>

# 5.3 动态交互——中间删除操作+选中变色

选中变色 鼠标移动事件处理 改变背景颜色，图标显示隐藏 删除元素操作

# App.vue

deleteTodo 删除数组中指定元素

<template>
	<TodoList :todos="todos" :deleteTodo="deleteTodo" />
</template>

<script>
  export default {
    methods:{
      deleteTodo(index){
        this.todos.splice(index, 1);
      }
    },
  }
</script>

# TodoList.vue

传递标签，删除函数

<template>
  <ul class="todo-main">
    <TodoItem v-for="(todo, index) in todos" :key="index" :todo="todo" :index="index" :deleteTodo="deleteTodo" />
  </ul>
</template>

<script>
import TodoItem from './TodoItem';
export default {
  props: {
    todos: Array,
    deleteTodo: Function
  },
  components:{
    TodoItem
  }
}
</script>

# TodoItem.vue

鼠标移动事件 函数操作背景颜色改变、图标显示隐藏 删除按钮点击事件 函数

<template>
  <li @mouseenter="handleEnter(true)" @mouseleave="handleEnter(false)" :style="{background: bgColor}">
    <label>
      <input type="checkbox" v-model="todo.complete" />
      <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" v-show="isShow" @click="deleteItem">删除</button>
  </li>
</template>

<script>
  export default {
    props:{
      todo: Object,
      index: Number,
      deleteTodo: Function
    },
    data(){
      return {
        bgColor: 'white',
        isShow: false
      }
    },
    methods: {
      handleEnter(isEnter){
        if(isEnter){
          this.bgColor='#aaa';
          this.isShow = true;
        }else{
          this.bgColor='white';
          this.isShow = false; 
        }
      },
      deleteItem(){
        const {todo, index, deleteTodo} = this;
        if(window.confirm(`确定删除"${todo.title}"吗`)){
          deleteTodo(index);
        }
      },
    }
  }
</script>

# 5.4 动态交互——底部全选 + 删除操作（重难点）

# App.vue

<template>
	<TodoFooter :todos="todos" :deleteCompleteTodos="deleteCompleteTodos" :selectAllTodos="selectAllTodos"/>
</template>

<script>
  export default {
    methods:{
      addTodo(todo){
        this.todos.unshift(todo);
      },
      deleteTodo(index){
        this.todos.splice(index, 1);
      },
      deleteCompleteTodos(){
        this.todos = this.todos.filter(todo => !todo.complete);
      },
      selectAllTodos(check){
        this.todos.forEach(todo => todo.complete = check);
      }
    },
  }
</script>

# TodoFooter.vue

熟练使用计算属性

<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox" v-model="isAllCheck" />
    </label>
    <span> 
      <span>已完成{{ completeSize }}</span> / 全部{{ todos.length }} 
    </span>
    <button class="btn btn-danger" v-show="completeSize" @click="deleteCompleteTodos">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  props: {
    todos: Array,
    deleteCompleteTodos: Function,
    selectAllTodos: Function,
  },
  computed: {
    completeSize() {
      return this.todos.reduce((preTotal, todo) => preTotal + (todo.complete?1:0), 0); 
    },
    isAllCheck: {
      get(){
        return this.completeSize===this.todos.length && this.completeSize>0
      },
      set(value){
        this.selectAllTodos(value);
      }
    }
  },
  methods: {
    deleteAll() {},
  },
};
</script>

# 总结TodoList案例

  1. 组件化编码流程：

    1. 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

    2. 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

      1).一个组件在用：放在组件自身即可。

      2). 一些组件在用：放在他们共同的父组件上（状态提升）。

    3. 实现交互：从绑定事件开始。

  2. props适用于：

    1. 父组件 ==> 子组件 通信

    2. 子组件 ==> 父组件 通信（要求父先给子一个函数）

  3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！

  4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

# webStorage

  1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

  2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

  3. 相关API：

    1. xxxxxStorage.setItem('key', 'value'); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

    2. xxxxxStorage.getItem('person'); 该方法接受一个键名作为参数，返回键名对应的值。

    3. xxxxxStorage.removeItem('key'); 该方法接受一个键名作为参数，并把该键名从存储中删除。

    4. xxxxxStorage.clear() 该方法会清空存储中的所有数据。

  4. 备注：

    1. SessionStorage 存储的内容会随着浏览器窗口关闭而消失。
    2. LocalStorage 存储的内容，需要手动清除才会消失。
    3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
    4. JSON.parse(null)的结果依然是null。

# 6. 本地存储版本

# App.vue

<script>
  export default {
    data(){
      return {
        // 从localStorage读取todos
        todos: JSON.parse(window.localStorage.getItem('todos_key') || '[]')

        // todos: [
        //   {title: '吃饭', complete: false},
        //   {title: '睡觉', complete: true},
        //   {title: '敲代码', complete: false}
        // ]
      }
    },
    watch: { //监视
      todos:{
        deep: true, // 深度监视
        handler: function(value){
          // 将todos最新的值的json数据，保存到localStorage
          window.localStorage.setItem('todos_key', JSON.stringify(value))
        }
      }
    },   
  }
</script>

项目代码 https://github.com/yk2012/vue_demo/tree/main/demo3_TodoList (opens new window)

最后，欢迎关注我的专栏，和YK菌做好朋友

上次更新: 2022/4/13 12:52:30

组件间通信