07.VUE详细整理（七）--练习demo1-todolist-尚硅谷最新课程

最新推荐文章于 2022-09-23 22:48:50 发布
最新推荐文章于 2022-09-23 22:48:50 发布
阅读量384 收藏 4
点赞数
分类专栏： 06.Vue相关 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a2274001782/article/details/121959805
版权

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>

.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>xxxxxspan>
      label>
      <button class="btn btn-danger" style="display:none">删除button>
    li>
    <li>
      <label>
        <input type="checkbox"/>
        <span>yyyyyspan>
      label>
      <button class="btn btn-danger" style="display:none">删除button>
    li>
  ul>
template>

<script>
export default {

}
script>

<style>

.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;
}

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>已完成0span> / 全部2
        span>
        <button class="btn btn-danger">清除已完成任务button>
      div>
template>

<script>
export default {

}
script>

<style>

.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

数据的形式使用数组封装，数组中每一个元素就是一个对象
对象中需包含 id, title，done

  1. 收数据并使用v-for遍历数组 渲染todoItem子组件
  2. 数据最好由父组件传递得来
<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 动态交互——首部添加操作

问题：

image-20211215141614781

问题1：app和List组件之间----数据需要交由app组件使用props控制传递

问题2：实现子组件todoObj向父组件App传值

采用回调函数的写法

父组件通过props向子组件传递一个回调函数

子组件调用回调函数，并将参数传递回来

（虽然能MyHeader使用App的方法，但是方法最终是在App身上，所以MyHeader将值给了方法，App可以通过方法拿到值）

简而言之： 父定义函数，子用他的数据来调用

image-20211215143437125

image-20211215143233425

App.vue

定义添加addTodo函数

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

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

TodoHeader.vue

如果需要创建不重复id 可以使用nanoid

image-20211215112912158

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不会报错，但不推荐这样做。

https://github.com/yk2012/vue_demo/tree/main/demo3_TodoList)

6.介绍webStorage

包含两种

  1. localStorage（浏览器关闭也不清空）
    image-20211215191718969
  2. sessionStorage(浏览器关闭清空)
    image-20211215191850683

引入 ：唯品会等网站对于历史记录的查询

image-20211215165400202

  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。

7. 将todolist改为本地存储版本

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](
图文详解Vue slot和slot-scope的用法和区别
weixin_43178406的博客
08-16 5万+
本文通过图文的形式详细介绍了Vue slot和slot-scope的用法和区别，希望能对学习Vue的同学们有所帮助。 文章目录 1. 背景描述 2. 什么是slot 3. slot分类 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 4. 2.6之后版本的变化
vue3+dhtmlx-gantt的简单demo
zb1280025118的博客
05-06 2827
vue3+dhtmlx-gantt的简单demo
【Vue】高级系列（五）Vue模块化实战-demo2-任务清单todoList
YK菌的博客
02-21 2999
Vue实战todolist
Vue项目实战——实现一个任务清单【基于 Vue3.x 全家桶（简易版）】
HuoZhiyan 的博客
09-23 5032
Vue项目实战——实现一个任务清单【基于 Vue3.x 全家桶（简易版）】
Vue 任务清单
weixin_30241919的博客
07-10 337
<style> li{ list-style: none; } #root{ width: 400px; min-height: 400px; box-shadow: 0 0 10px #666; margin: 20px auto; padding: 20px; } .task-input{ width: 100%; heigh...
vue指令练习demo
qq_34822482的博客
11-01 304
vue练习demo
vue 练手demo todolist
小羽向前跑
06-20 1206
最终效果： 组件代码： <template> <div class="todolist"> <!-- header --> <div class="header"> 任务计划列表 </div> <!-- 添加任务 -->...
vue-demo-todolist fishenalvue-demo-todolist一个简单的vue2.0演示，使用vue 2.0 vue-cli构建。 通过鱼-Vue.js开发
05-27
simply-todolist-vuejs 使用vuejs2.0 搭建的极简的todolist vuex version ...使用vue-localstorage插件 https://github.com/pinguinjkeke/vue-local-storage 安装
尚硅谷vue课程笔记整理
最新发布
05-30
尚硅谷vue课程笔记整理
【Vue2】Vue功能实例——基于尚硅谷教程ToDoList案例（一）
02-09
【Vue2】Vue功能实例——基于尚硅谷教程ToDoList案例（一）
任务列表taskList.vue
04-21
任务列表taskList.vue
vue小项目-任务列表
06-20
利用js技术、vue.js、bootstrap编写的任务清单 分为未完成清单和已完成清单。可以添加任务清单也可以删除。任务存储在localStorage中
el-vueDemo:vue个人练习项目
03-30
el-vueDemo:vue个人练习项目
Vue----任务列表案例
05-01
用到的知识点 ① vite 创建项目 ② 组件的封装与注册 ③ props ④ 样式绑定 ⑤ 计算属性 ⑥ 自定义事件 ⑦ 组件上的 v-model 整体实现步骤 ① 使用 vite 初始化项目 ② 梳理项目结构 ③ 封装 todo-list 组件 ④ 封装 todo-input 组件 ⑤ 封装 todo-button 组件
Vue-toDoList.github.io:参考todomvc用Vue实现的一个任务清单小功能
04-30
Vue-toDoList.github.io 参考todomvc用Vue实现的一个任务清单小功能 实现思路 1.分析数据结构 页面中todo列表的保存的数据 [{name:'待办事项',complete:false}] 2.根据数据渲染页面li 判断是否选中 checkbox进行双向绑定 3.点击新增 点击回车 获取输入的内容 增加到列表中 清空输入框 输入框为空 点击回车没效果 4.点击删除对应的待办事项 点击button 删除对应的那个事项 绑定时 传入下表 5.编辑待办事项 获取到当前修改
基于Vue的任务清单（To Do List）
沉默是今晚的朝天门长
12-16 1292
本代码的部分功能借鉴了https://blog.csdn.net/lhjuejiang/article/details/81040236 界面展示： 实现的功能： 1.增：输入框中编辑后点击“添加任务”按钮或者回车将新任务添加到任务展示区顶部。当输入为空不添加（空格认为有字符），输入已有任务会在右上角提示任务重复不可添加（有空格认为是两个任务）。 2.删：点击下方任务展示区域右侧的“x”按钮进行删除当前任务操作。 3.改：双击任务区域某条任务可进行修改，重复则右上角进行提示且继续修改（有空格
vue--练习（登录demo）
hahahahahahahaha__1的博客
06-28 1057
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;vue&lt;/title&gt; &lt;script src='jquery.min.js'&gt;&lt;/script&gt;
Vue.js 小demo练习
youguang_的博客
03-01 2164
（1）跑马灯效果 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; [v-cloak]{
vue练习demo（1）——使用vue基本指令实现切换菜单栏效果
qq_44860114的博客
11-22 955
这篇文章最后的小demo大家解决了吗？ 我来更新代码了哦！ 实现效果的方式有很多种，我这只是其中一种方法， 如果大家有什么不同的意见可以相互讨论。 需要实现的效果： 菜单栏+与菜单相对应的内容区域 点击菜单栏的时候添加样式 点击不同的菜单，显示对应的内容区域 核心代码如下： <style> li{ list-style: none; display: inline-block; padding: 10px 30px; margin: 0
Vue.js中的el-table实现无限滚动与列自定义控制
在Vue.js中，可以利用第三方库，如vue-virtual-scroller，来实现el-table的无限滚动。具体实现时，需要将el-table包裹在一个具有滚动区域的容器中，然后通过监听滚动事件动态加载数据。 4. 控制列是否显示 在不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值