Vue基础12之TodoList案例第二篇

最新推荐文章于 2024-10-09 21:20:29 发布
最新推荐文章于 2024-10-09 21:20:29 发布
阅读量713 收藏
点赞数
分类专栏： 前端 Vue基础 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/128903677
版权

Vue基础12

删除

跟勾选框那个类似

App.vue

<template>
  <div class="bg">
    <div class="todoList">
      <h2 class="title">待办事项</h2>
      <Header :addTodo="addTodo"/>
      <div class="listItem">
        <List :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
        <Footer />
      </div>
    </div>
  </div>
</template>

<script>

import Header from "@/components/Header";
import List from "@/components/List";
import Footer from "@/components/Footer";
export default {
  name: "App",
  components:{Footer, Header, List},
  data(){
    return{
      todos:[
        {id:'001',title:'吃饭',done:false},
        {id:'002',title:'唱歌',done:false},
        {id:'003',title:'看电影',done:false},
      ]
    }
  },
  methods:{
    //添加一个todo
    addTodo(addObj){
      this.todos.unshift(addObj)
    },
    //勾选or取消勾选一个todo
    checkTodo(id){
      this.todos.forEach((todo)=>{
        if(todo.id==id) {
          todo.done=!todo.done
        }
      })
    },
    //删除一个todo
    deleteTodo(id){
      //第一种方法删除
      // this.todos.splice(this.todos.forEach(todo=>todo.id===id),1)
      //第二种方法删除
      this.todos=this.todos.filter(todo=>todo.id!==id)

    }
  }
}
</script>

<style lang="less">
*{
  padding: 0;
  margin: 0;
}
.bg{
  background-color: #333;
  height: 937px;
  padding-top: 100px;
  box-sizing: border-box;
  .todoList{
    background-color: #fff;
    width: 50%;
    height: 90%;
    margin: 0 auto;
    //box-shadow: 5px 5px 10px 3px rgba(147, 221, 255, 0.5),-5px -5px 10px 3px rgba(147, 221, 255, 0.5);  蓝色阴影
    box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.5),-5px -5px 10px 3px rgba(0, 0, 0, 0.5);
    padding-top: 20px;
    box-sizing: border-box;
    .title{
      text-align: center;
      font-size: 30px;
      font-weight: 300;
      color: #00a4ff;
    }
    .listItem{
      width: 90%;
      //height: 200px;
      margin: auto;
      /*background-color: pink;*/
      list-style: none;
      border-radius: 0 0 5px 5px;
      box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.1),-1px -1px 5px 1px rgba(0,0,0,0.1);
      padding: 20px 0;
      box-sizing: border-box;
    }
  }
}
</style>

List.vue

<template>
  <div>
    <ul>
      <div class="con">
        <Item v-for="todoObj in todos" :key="todoObj.id" :todo="todoObj" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
      </div>
    </ul>
  </div>
</template>

<script>
import Item from "@/components/Item";
export default {
  name:'List',
  components:{Item},
  props:['todos','checkTodo','deleteTodo']
}
</script>

<style scoped lang="less">
ul{
  .con{
    //width: 95%;
    //margin: auto;
    border-bottom: 1px solid rgba(87, 87, 87, 0.3);
    border-left: 1px solid rgba(87, 87, 87, 0.3);
    border-right: 1px solid rgba(87, 87, 87, 0.3);
    margin: 0px 8px;
    //background-color: pink;
  }
}
</style>

Item.vue

<template>
  <div>
    <li>
      <input type="checkbox" name="matter" id="" :checked="todo.done" @change="handleCheck(todo.id)">
      &nbsp;{{todo.title}}
      <button class="delete" @click="handleDelete(todo.id)">删除</button>
    </li>
  </div>
</template>

<script>
  export default {
      name: "Item",
      //声明接收todo对象
      props:['todo','checkTodo','deleteTodo'],
      methods:{
        //勾选or取消勾选
        handleCheck(id){
          //通知App组件将对应的todo对象的done值取反
          this.checkTodo(id)
        },
        //删除
        handleDelete(id){
          if(confirm('确定删除吗？')){
            console.log(id)
            this.deleteTodo(id)
          }
        }
      }
  }
</script>

<style scoped lang="less">
li{
  //height: 35%;
  //width: 96%;
  display: block;
  //background-color: pink;
  margin: auto;
  padding: 12px;
  border-top: 1px solid rgba(87, 87, 87, 0.3);
  //border-left: 1px solid rgba(87, 87, 87, 0.3);
  //border-right: 1px solid rgba(87, 87, 87, 0.3);
  //box-sizing: border-box;
  border-collapse: collapse;
  button{
    background-color: #d9534f;
    float: right;
    padding: 3px 10px;
    color: white;
    border: 1px solid #d43f3a;
    border-radius: 5px;
    cursor: pointer;
    &:hover{
      background-color: #c9302c;
      border: 1px solid #ac2925;
    }
  }
  &:hover{
    background-color: rgba(0,0,0,0.1);
  }
}
</style>

请添加图片描述

底部统计

reduce的用法

reduce专门做条件统计的
可以筛选出数组中想要的，例如，学生中年龄大于18的，订单中金额大于1000的，一堆人中男士有几个人等等

基本使用—计数

局部代码：

doneTotal(){
        const x = this.todos.reduce((pre,current)=>{
          console.log("@pre："+pre+"   @current：",current)
          return pre+1
        },0)
        console.log("###",x)
      }

整体代码：

<template>
<div>
  <input type="checkbox" name="matter" id="" @change="handleCbx">
  &nbsp;已完成 <span>{{doneTotal}}</span> / 全部 <span>{{todos.length}}</span>
  <button>清除已完成任务</button>
</div>
</template>

<script>
  export default {
    name: "Footer",
    props:['todos','handleCbx','handleDTodo'],
    methods:{
    },
    computed:{
      doneTotal(){
        const x = this.todos.reduce((pre,current)=>{
          console.log("@pre："+pre+"   @current：",current)
          return pre+1
        },0)
        console.log("###",x)
      }
    }

  }
</script>

<style scoped lang="less">
div{
  width: 95%;
  margin: auto;
  margin-top: 10px;
  //border: 1px solid rgba(87, 87, 87, 0.3);
  button{
    background-color: #d9534f;
    float: right;
    padding: 3px 10px;
    color: white;
    border: 1px solid #d43f3a;
    border-radius: 5px;
    cursor: pointer;
    &:hover{
     background-color: #c9302c;
     border: 1px solid #ac2925;
   }
}
}
</style>

结果展示：
在这里插入图片描述
操作分析：
在这里插入图片描述

条件统计使用

比如有两项的todo都已完成，则todo.done有两项是true，使用reduce并对每次的todo.done进行判断，则最后的x值为2

doneTotal(){
        const x = this.todos.reduce((pre,current)=>{
          console.log("@pre："+pre+"   @current：",current)
          return pre+(current.done?1:0)
        },0)
        console.log("###",x)
      }

在这里插入图片描述

项目中使用

App.vue

<template>
  <div class="bg">

    <div class="todoList">
      <h2 class="title">待办事项</h2>
      <Header :addTodo="addTodo"/>
      <div class="listItem">
        <List :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
        <Footer :todos="todos"/>
      </div>
    </div>
  </div>
</template>

<script>

import Header from "@/components/Header";
import List from "@/components/List";
import Footer from "@/components/Footer";
export default {
  name: "App",
  components:{Footer, Header, List},
  data(){
    return{
      todos:[
        {id:'001',title:'吃饭',done:false},
        {id:'002',title:'唱歌',done:false},
        {id:'003',title:'看电影',done:false},
      ]
    }
  },
  methods:{
    //添加一个todo
    addTodo(addObj){
      this.todos.unshift(addObj)
    },
    //勾选or取消勾选一个todo
    checkTodo(id){
      this.todos.forEach((todo)=>{
        if(todo.id==id) {
          todo.done=!todo.done
          if(todo.done){
            this.todoed++
          }else{
            this.todoed--
          }
        }
      })
    },
    //删除一个todo
    deleteTodo(id){
      //第一种方法删除
      // this.todos.splice(this.todos.forEach(todo=>todo.id===id),1)
      //第二种方法删除
      this.todos=this.todos.filter(todo=>todo.id!==id)
    },
  }
}
</script>

<style lang="less">
*{
  padding: 0;
  margin: 0;
}
.bg{
  background-color: #333;
  height: 937px;
  padding-top: 100px;
  box-sizing: border-box;
  .todoList{
    background-color: #fff;
    width: 50%;
    height: 90%;
    margin: 0 auto;
    //box-shadow: 5px 5px 10px 3px rgba(147, 221, 255, 0.5),-5px -5px 10px 3px rgba(147, 221, 255, 0.5);  蓝色阴影
    box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.5),-5px -5px 10px 3px rgba(0, 0, 0, 0.5);
    padding-top: 20px;
    box-sizing: border-box;
    .title{
      text-align: center;
      font-size: 30px;
      font-weight: 300;
      color: #00a4ff;
    }
    .listItem{
      width: 90%;
      //height: 200px;
      margin: auto;
      /*background-color: pink;*/
      list-style: none;
      border-radius: 0 0 5px 5px;
      box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.1),-1px -1px 5px 1px rgba(0,0,0,0.1);
      padding: 20px 0;
      box-sizing: border-box;
    }
  }
}
</style>

Footer.vue

<template>
<div>
  <input type="checkbox" name="matter" id="">
  &nbsp;已完成 <span>{{doneTotal}}</span> / 全部 <span>{{total}}</span>
  <button>清除已完成任务</button>
</div>
</template>

<script>
  export default {
    name: "Footer",
    props:['todos'],
    methods:{
    },
    computed:{
      total(){
        return this.todos.length
      },
      doneTotal(){
       /* const x = this.todos.reduce((pre,current)=>{
          console.log("@pre："+pre+"   @current：",current)
          return pre+(current.done?1:0)
        },0)
        console.log("###",x)*/
        return this.todos.reduce((pre,todo)=>pre+(todo.done?1:0),0)
      }
    }

  }
</script>

<style scoped lang="less">
div{
  width: 95%;
  margin: auto;
  margin-top: 10px;
  //border: 1px solid rgba(87, 87, 87, 0.3);
  button{
    background-color: #d9534f;
    float: right;
    padding: 3px 10px;
    color: white;
    border: 1px solid #d43f3a;
    border-radius: 5px;
    cursor: pointer;
    &:hover{
     background-color: #c9302c;
     border: 1px solid #ac2925;
   }
}
}
</style>

在这里插入图片描述

底部交互

全选or取消全选

第一种方法

App.vue
<template>
  <div class="bg">

    <div class="todoList">
      <h2 class="title">待办事项</h2>
      <Header :addTodo="addTodo"/>
      <div class="listItem">
        <List :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
        <Footer :todos="todos" :checkAllTodo="checkAllTodo"/>
      </div>
    </div>
  </div>
</template>

<script>

import Header from "@/components/Header";
import List from "@/components/List";
import Footer from "@/components/Footer";
export default {
  name: "App",
  components:{Footer, Header, List},
  data(){
    return{
      todos:[
        {id:'001',title:'吃饭',done:false},
        {id:'002',title:'唱歌',done:false},
        {id:'003',title:'看电影',done:false},
      ]
    }
  },
  methods:{
    //添加一个todo
    addTodo(addObj){
      this.todos.unshift(addObj)
    },
    //勾选or取消勾选一个todo
    checkTodo(id){
      this.todos.forEach((todo)=>{
        if(todo.id==id) {
          todo.done=!todo.done
          if(todo.done){
            this.todoed++
          }else{
            this.todoed--
          }
        }
      })
    },
    //删除一个todo
    deleteTodo(id){
      //第一种方法删除
      // this.todos.splice(this.todos.forEach(todo=>todo.id===id),1)
      //第二种方法删除
      this.todos=this.todos.filter(todo=>todo.id!==id)
    },
    //全选or取消全选
    checkAllTodo(done){
      this.todos.forEach(todo=>todo.done=done)
    }
  }
}
</script>

<style lang="less">
*{
  padding: 0;
  margin: 0;
}
.bg{
  background-color: #333;
  height: 937px;
  padding-top: 100px;
  box-sizing: border-box;
  .todoList{
    background-color: #fff;
    width: 50%;
    height: 90%;
    margin: 0 auto;
    //box-shadow: 5px 5px 10px 3px rgba(147, 221, 255, 0.5),-5px -5px 10px 3px rgba(147, 221, 255, 0.5);  蓝色阴影
    box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.5),-5px -5px 10px 3px rgba(0, 0, 0, 0.5);
    padding-top: 20px;
    box-sizing: border-box;
    .title{
      text-align: center;
      font-size: 30px;
      font-weight: 300;
      color: #00a4ff;
    }
    .listItem{
      width: 90%;
      //height: 200px;
      margin: auto;
      /*background-color: pink;*/
      list-style: none;
      border-radius: 0 0 5px 5px;
      box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.1),-1px -1px 5px 1px rgba(0,0,0,0.1);
      padding: 20px 0;
      box-sizing: border-box;
    }
  }
}
</style>
Footer.vue
<template>
<div v-show="total">
  <input type="checkbox" name="matter" id="" :checked="isAll" @change="checkAll">
  &nbsp;已完成 <span>{{doneTotal}}</span> / 全部 <span>{{total}}</span>
  <button>清除已完成任务</button>
</div>
</template>

<script>
  export default {
    name: "Footer",
    props:['todos','checkAllTodo'],
    methods:{
      checkAll(e){
        console.log(e.target.checked)
        this.checkAllTodo(e.target.checked)
      }
    },
    computed:{
      total(){
        return this.todos.length
      },
      doneTotal(){
       /* const x = this.todos.reduce((pre,current)=>{
          console.log("@pre："+pre+"   @current：",current)
          return pre+(current.done?1:0)
        },0)
        console.log("###",x)*/
        return this.todos.reduce((pre,todo)=>pre+(todo.done?1:0),0)
      },
      isAll(){
        return this.total === this.doneTotal && this.total>0
      }
    }
  }
</script>

<style scoped lang="less">
div{
  width: 95%;
  margin: auto;
  margin-top: 10px;
  //border: 1px solid rgba(87, 87, 87, 0.3);
  button{
    background-color: #d9534f;
    float: right;
    padding: 3px 10px;
    color: white;
    border: 1px solid #d43f3a;
    border-radius: 5px;
    cursor: pointer;
    &:hover{
     background-color: #c9302c;
     border: 1px solid #ac2925;
   }
}
}
</style>

请添加图片描述

第二种方法

使用v-model与计算属性的get和set方法
Footer.vue
<template>
<div v-show="total">
<!--  <input type="checkbox" name="matter" id="" :checked="isAll" @change="checkAll">-->
  <input type="checkbox" name="matter" id="" v-model="isAll">
  &nbsp;已完成 <span>{{doneTotal}}</span> / 全部 <span>{{total}}</span>
  <button>清除已完成任务</button>
</div>
</template>

<script>
  export default {
    name: "Footer",
    props:['todos','checkAllTodo'],
    methods:{
      /*checkAll(e){
        console.log(e.target.checked)
        this.checkAllTodo(e.target.checked)
      }*/
    },
    computed:{
      total(){
        return this.todos.length
      },
      doneTotal(){
       /* const x = this.todos.reduce((pre,current)=>{
          console.log("@pre："+pre+"   @current：",current)
          return pre+(current.done?1:0)
        },0)
        console.log("###",x)*/
        return this.todos.reduce((pre,todo)=>pre+(todo.done?1:0),0)
      },
      isAll:{
        get(){
          return this.total === this.doneTotal&&this.total>0
        },
        set(value){
          this.checkAllTodo(value)
        }
      }
    }
  }
</script>

<style scoped lang="less">
div{
  width: 95%;
  margin: auto;
  margin-top: 10px;
  //border: 1px solid rgba(87, 87, 87, 0.3);
  button{
    background-color: #d9534f;
    float: right;
    padding: 3px 10px;
    color: white;
    border: 1px solid #d43f3a;
    border-radius: 5px;
    cursor: pointer;
    &:hover{
     background-color: #c9302c;
     border: 1px solid #ac2925;
   }
}
}
</style>

清除已完成任务

App.vue

<template>
  <div class="bg">

    <div class="todoList">
      <h2 class="title">待办事项</h2>
      <Header :addTodo="addTodo"/>
      <div class="listItem">
        <List :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
        <Footer :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
      </div>
    </div>
  </div>
</template>

<script>

import Header from "@/components/Header";
import List from "@/components/List";
import Footer from "@/components/Footer";
export default {
  name: "App",
  components:{Footer, Header, List},
  data(){
    return{
      todos:[
        {id:'001',title:'吃饭',done:false},
        {id:'002',title:'唱歌',done:false},
        {id:'003',title:'看电影',done:false},
      ]
    }
  },
  methods:{
    //添加一个todo
    addTodo(addObj){
      this.todos.unshift(addObj)
    },
    //勾选or取消勾选一个todo
    checkTodo(id){
      this.todos.forEach((todo)=>{
        if(todo.id==id) {
          todo.done=!todo.done
          if(todo.done){
            this.todoed++
          }else{
            this.todoed--
          }
        }
      })
    },
    //删除一个todo
    deleteTodo(id){
      //第一种方法删除
      // this.todos.splice(this.todos.forEach(todo=>todo.id===id),1)
      //第二种方法删除
      this.todos=this.todos.filter(todo=>todo.id!==id)
    },
    //全选or取消全选
    checkAllTodo(done){
      this.todos.forEach(todo=>todo.done=done)
    },
    clearAllTodo(){
      this.todos=this.todos.filter(todo=>{
        return !todo.done
      })
    }
  }
}
</script>

<style lang="less">
*{
  padding: 0;
  margin: 0;
}
.bg{
  background-color: #333;
  height: 937px;
  padding-top: 100px;
  box-sizing: border-box;
  .todoList{
    background-color: #fff;
    width: 50%;
    height: 90%;
    margin: 0 auto;
    //box-shadow: 5px 5px 10px 3px rgba(147, 221, 255, 0.5),-5px -5px 10px 3px rgba(147, 221, 255, 0.5);  蓝色阴影
    box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.5),-5px -5px 10px 3px rgba(0, 0, 0, 0.5);
    padding-top: 20px;
    box-sizing: border-box;
    .title{
      text-align: center;
      font-size: 30px;
      font-weight: 300;
      color: #00a4ff;
    }
    .listItem{
      width: 90%;
      //height: 200px;
      margin: auto;
      /*background-color: pink;*/
      list-style: none;
      border-radius: 0 0 5px 5px;
      box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.1),-1px -1px 5px 1px rgba(0,0,0,0.1);
      padding: 20px 0;
      box-sizing: border-box;
    }
  }
}
</style>

Footer.vue

<template>
<div v-show="total">
<!--  <input type="checkbox" name="matter" id="" :checked="isAll" @change="checkAll">-->
  <input type="checkbox" name="matter" id="" v-model="isAll">
  &nbsp;已完成 <span>{{doneTotal}}</span> / 全部 <span>{{total}}</span>
  <button @click="clearAll">清除已完成任务</button>
</div>
</template>

<script>
  export default {
    name: "Footer",
    props:['todos','checkAllTodo','clearAllTodo'],
    methods:{
      /*checkAll(e){
        console.log(e.target.checked)
        this.checkAllTodo(e.target.checked)
      }*/
      clearAll(){
        if(confirm('确认清除已完成任务吗？')){
          this.clearAllTodo()
        }
      }
    },
    computed:{
      total(){
        return this.todos.length
      },
      doneTotal(){
       /* const x = this.todos.reduce((pre,current)=>{
          console.log("@pre："+pre+"   @current：",current)
          return pre+(current.done?1:0)
        },0)
        console.log("###",x)*/
        return this.todos.reduce((pre,todo)=>pre+(todo.done?1:0),0)
      },
      isAll:{
        get(){
          return this.total === this.doneTotal&&this.total>0
        },
        set(value){
          this.checkAllTodo(value)
        }
      }
    }
  }
</script>

<style scoped lang="less">
div{
  width: 95%;
  margin: auto;
  margin-top: 10px;
  //border: 1px solid rgba(87, 87, 87, 0.3);
  button{
    background-color: #d9534f;
    float: right;
    padding: 3px 10px;
    color: white;
    border: 1px solid #d43f3a;
    border-radius: 5px;
    cursor: pointer;
    &:hover{
     background-color: #c9302c;
     border: 1px solid #ac2925;
   }
}
}
</style>

请添加图片描述

总结TodoList案例

  1. 组件化编码流程
    （1）拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突
    （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用
    ①一个组件在用：放在组件自身即可
    ②一些组件在用：放在他们共同的父组件上（状态提升）
    （3）实现交互：从绑定事件开始
  2. props适用于：
    （1）父组件 ===> 子组件 通信
    （2）子组件 ===> 父组件 通信（要求父先给子一个函数）
  3. 使用v-model时要切记：v-model绑定的值补不能是props传过来的值，因为props是不可以修改的！
  4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做
VillanelleS
关注
专栏目录
vue的todoList案例
m0_55916923的博客
08-30 1380
todolist案例
09-Vue技术栈（TodoList案例）
Zhang_wang_yun的博客
05-06 1496
基于Vue开发的一个记事本待办事项案例
vue——todo案例
weixin_45998300的博客
03-23 1295
javascript:let btn = document.querySelector('.buy-button') setInterval(function() { btn.addEventListener('click', function() { }) console.log('点击成功'); }, 100)
Vue：实现TodoList案例（尚硅谷）
热门推荐
做一只猫的博客
08-04 1万+
TodoList案例
Vue2.x - TodoList案例
程序员阿甘的博客
06-09 743
TodoList案例，源码下载，功能分析，组件化编程
Vue(七) TodoList案例1.0
qq_44285582的博客
08-31 1699
拆分静态组件。展示动态数据：数据类型，数据放在那里。子组件给父组件通过props如何传值。勾选与取消勾选，不可直接修改props传递过来的值。删除todo。footer底部交互，计算属性set方法的用途。
Vue实战——TodoList案例(附js原生和vue源码）
2301_76885465的博客
05-12 1338
分别用原生js和Vue框架实现todolist项目（附有源码）
Vue2 实现 TodoList 案例
m0_58861761的博客
10-07 490
Vue2实现TodoList案例
vue小案例TodoList
Jackmat的博客
05-28 1083
6.接下来我们来做删除模块，由于数据在APP中，我们在MyItem组件中给删除按钮添加点击事件，我们获取APP传来的todo对象数组中的id，我们将id传给爷组件APP，这时又是老生常谈的问题，孙组件向爷组件传递数据，我们可以让APP组件下方一个函数，依次传递给MyList和MyItem，通过props接收，再在子组件标签上带上该函数。我们这里可以采用爷传子，子传孙的方法，我们可以给APP（爷组件）绑定一个函数，将函数逐层传递到MyList（子组件），再传到MyItem（孙组件），例如下方。
vue.js实例todoList项目
12-29
新建组件todoList.vue，在App.vue中引入 import TodoList from ./components/todoList; export default { name: 'app', components: { TodoList } } <h1>TO DO LIST ! <todo></todo>  三处缺一不可...
使用VueCli制作TodoList案例
Scavenger的博客
04-26 777
案例展示 1650611778687 准备工作 利用Vue框架搭配Html+Css做出简易版的TodoList案例，在没有引用Vuex的相关知识下，实现原生版的框架结构搭建，首先搭配好整体的网页布局 如上图我们可以将整体布局分为四大部分 MyHeader.vue MyList.vue MyItem.vue MyFooter.vue 首先，为了读者能更好的划清组件结构，我在下面对组件结构进行了标识 MyHeader.vue 组件部分 MyItem.vue 和 MyLis...
腾讯IM SDK：TUIKit发送多张图片
q1003675852的博客
10-09 149
本文记录腾讯IM SDK：TUIKit发送多张图片的实现方法
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 211
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
vue-live2d看板娘集成方案设计使用教程
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1340
vue-live2d看板娘集成方案设计使用教程
Vue vben admin开源库中table组件tips
weixin_47454566的博客
10-09 300
Vue vben admin开源库
初识Vue
最新发布
m0_74742670的博客
10-09 246
Vue (发音为 /vju:/，类似 view)是一款用于构建用户界面的JavaScript 框架。它基于标准 HTML、CSS 和JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的,不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。
结合vueuse实现图片懒加载
clmm_的博客
10-02 1355
在 Vue.js 中，是用于注册自定义指令的 API。自定义指令允许你在组件的模板中实现特定的功能或行为，这些功能或行为通常是 DOM 操作。自定义指令是一种可以在模板中使用的功能，通常以v-开头。例如，v-model和v-bind是内置指令。通过创建自定义指令，你可以扩展 Vue 的功能。: 用于注册自定义指令。自定义指令: 可以在模板中添加特定的功能，增强组件的交互性。钩子函数: 提供不同生命周期阶段的操作机会。简单来说，这段代码的目的是确保只有当用户滚动到
使用element-plus中el-table时，取消表格出现的滚动条
qq_50906507的博客
10-09 82
【代码】使用element-plus中el-table时，取消表格出现的滚动条。
Vue2 实例解析：尚硅谷教程的 ToDoList 案例分析
这只是Vue2 ToDoList案例的第一部分，后续可能会涉及更多功能，如过滤已完成任务、编辑任务、以及更复杂的组件交互。通过实践这个案例，你可以更深入地理解Vue的生命周期、事件处理、计算属性和侦听器等概念。 这个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值