Vue基础11之TodoList案例第一篇

最新推荐文章于 2024-11-12 20:45:00 发布
最新推荐文章于 2024-11-12 20:45:00 发布
阅读量524 收藏
点赞数
分类专栏： 前端 Vue基础 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/128826975
版权
该文章展示了如何使用Vue.js创建一个TodoList应用，包括组件拆分，如Header、List和Item组件，使用nanoid生成唯一ID，以及处理兄弟组件间的值传递和勾选功能。同时，讨论了不推荐在组件中直接用v-model修改props的原因。
摘要由CSDN通过智能技术生成

Vue基础11

TodoList案例

组件拆分

在这里插入图片描述
样式结构：
在这里插入图片描述

静态组件

代码目录结构

在这里插入图片描述

App.vue

<template>
  <div class="bg">
    <div class="todoList">
      <h2 class="title">待办事项</h2>
      <Header />
      <div class="listItem">
        <List />
        <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{
      appText:this.text
    }
  }
}
</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>

Header.vue

<template>
  <div>
     <input type="text" class="content" @keyup.enter="enSure" placeholder="请输入你的任务名称，按回车键确认">
  </div>
</template>

<script>
export default {
  name: "Header",
  data(){
    return{
      InputText:''
    }
  },
  methods:{
    enSure(element){
      this.InputText=element.target.value;
      console.log(element.target.value)
    }
  }
}
</script>

<style scoped lang="less">
div{
  width: 90%;
  height: 8%;
  background-color: #ffffff;
  box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.1),-1px -1px 5px 1px rgba(0,0,0,0.1);
  margin: 10px auto 2px auto;
  display: flex;
  .content{
    width: 95%;
    height: 80%;
    font-size: 25px;
    outline: none;
    display: block;
    margin: auto;
    justify-content: center;
    align-self: center;
    border: none;
  }
}
</style>

List.vue

<template>
  <div>
    <ul>
      <div class="con">
        <Item :messages='["打代码","睡觉","吃饭"]'/>
      </div>
    </ul>
  </div>
</template>

<script>
import Item from "@/components/Item";
export default {
  name:'List',
  components:{Item},
}
</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 v-for="(msg,index) in messages" :key="index">
      <input type="checkbox" name="matter" id="">
      &nbsp;{{msg}}
      <button class="delete">删除</button>
    </li>
  </div>
</template>

<script>
    export default {
        name: "Item",
        props:{
          messages:{
            type:Array,
            default:['123233','5125656']
          }
        }
    }
</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>

Footer.vue

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

<script>
    export default {
        name: "Footer"
    }
</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>

初始化列表

List.vue

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

<script>
import Item from "@/components/Item";
export default {
  name:'List',
  components:{Item},
  data(){
    return{
      todos:[
        {id:'001',title:'上班',done:false},
        {id:'002',title:'吃饭',done:false},
        {id:'003',title:'看电影',done:false},
      ]
    }
  }
}
</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">
      &nbsp;{{todo.title}}
      <button class="delete">删除</button>
    </li>
  </div>
</template>

<script>
    export default {
        name: "Item",
        props:['todo']
    }
</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>

在这里插入图片描述

添加功能

使用nanoid作为每项的id值

安装nanoid

npm i nanoid

在这里插入图片描述

使用nanoid

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

兄弟组件之间的传值

在这里插入图片描述

App.vue

<template>
  <div class="bg">
    <div class="todoList">
      <h2 class="title">待办事项</h2>
      <Header :addTodo="addTodo"/>
      <div class="listItem">
        <List :todos="todos"/>
        <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:{
    addTodo(addObj){
      this.todos.unshift(addObj)
    }
  }
}
</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>

Header.vue

<template>
  <div>
      <input type="text" class="content" v-model="title" @keyup.enter="add" placeholder="请输入你的任务名称，按回车键确认">
  </div>
</template>

<script>
import {nanoid} from 'nanoid'
export default {
  name: "Header",
  data(){
    return{
      title:''
    }
  },
  props:['addTodo'],
  methods:{
    add(){
      //校验数据
      if(!this.title.trim()) return alert("输入的值不得为空");
      //将用户输入包装成一个todo对象
      const addObj={id:nanoid(),title:this.title,done:false};
      //通知App组件去添加一个todo对象
      this.addTodo(addObj)
      //清空输入
      this.title=''
    }
  }
}
</script>

<style scoped lang="less">
div{
  width: 90%;
  height: 8%;
  background-color: #ffffff;
  box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.1),-1px -1px 5px 1px rgba(0,0,0,0.1);
  margin: 10px auto 2px auto;
  display: flex;
  .content{
    width: 95%;
    height: 80%;
    font-size: 25px;
    outline: none;
    display: block;
    margin: auto;
    justify-content: center;
    align-self: center;
    border: none;
  }
}
</style>

List.vue

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

<script>
import Item from "@/components/Item";
export default {
  name:'List',
  components:{Item},
  props:['todos']
}
</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>

请添加图片描述

勾选

在这里插入图片描述

App.vue

<template>
  <div class="bg">
    <div class="todoList">
      <h2 class="title">待办事项</h2>
      <Header :addTodo="addTodo"/>
      <div class="listItem">
        <List :todos="todos" :checkTodo="checkTodo"/>
        <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)
    },
    checkTodo(id){
      this.todos.forEach((todo)=>{
        if(todo.id==id) {
          todo.done=!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>

List.vue

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

<script>
import Item from "@/components/Item";
export default {
  name:'List',
  components:{Item},
  props:['todos','checkTodo']
}
</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">删除</button>
    </li>
  </div>
</template>

<script>
    export default {
        name: "Item",
        //声明接收todo对象
        props:['todo','checkTodo'],
        methods:{
          handleCheck(id){
            //通知App组件将对应的todo对象的done值取反
            this.checkTodo(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>

请添加图片描述

使用v-model也能实现修改功能，不过不推荐使用

在Item.vue中的checkbox使用v-model双向绑定，虽然也能实现功能，但是不推荐，因为有点违反原则，因为修改了props值，Vue的检测是浅度检测，props中是todo对象时，使用todo.done改值后，地址值并没有修改，则Vue检测不到，所以未报错，但是一旦使用变量存储就会报错

App.vue

<template>
  <div class="bg">
    <div class="todoList">
      <h2 class="title">待办事项</h2>
      <Header :addTodo="addTodo"/>
      <div class="listItem">
        <List :todos="todos"/>
        <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)
    }
  }
}
</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"/>
      </div>
    </ul>
  </div>
</template>

<script>
import Item from "@/components/Item";
export default {
  name:'List',
  components:{Item},
  props:['todos']
}
</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>
<!--      如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props-->
      <input type="checkbox" name="matter" id="" v-model="todo.done">
      &nbsp;{{todo.title}}
      <button class="delete">删除</button>
    </li>
  </div>
</template>

<script>
    export default {
        name: "Item",
        //声明接收todo对象
        props:['todo'],
    }
</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>
VillanelleS
关注
专栏目录
vue的todoList案例
m0_55916923的博客
08-30 1404
todolist案例
09-Vue技术栈（TodoList案例）
Zhang_wang_yun的博客
05-06 1582
基于Vue开发的一个记事本待办事项案例
Vue基础12之TodoList案例第二篇
qq_34306228的博客
02-08 722
跟勾选框那个类似 List.vue Item.vue reduce专门做条件统计的 可以筛选出数组中想要的，例如，学生中年龄大于18的，订单中金额大于1000的，一堆人中男士有几个人等等局部代码： 整体代码： 结果展示： 操作分析： 比如有两项的todo都已完成，则todo.done有两项是true，使用reduce并对每次的todo.done进行判断，则最后的x值为2 Footer.vue Footer.vue 清除已完成任务 App.vue Footer.vue
Vue：实现TodoList案例（尚硅谷）
热门推荐
做一只猫的博客
08-04 1万+
TodoList案例
Vue(七) TodoList案例1.0
lxh的博客
08-31 1778
拆分静态组件。展示动态数据：数据类型，数据放在那里。子组件给父组件通过props如何传值。勾选与取消勾选，不可直接修改props传递过来的值。删除todo。footer底部交互，计算属性set方法的用途。
Vue2.x - TodoList案例
程序员阿甘的博客
06-09 802
TodoList案例，源码下载，功能分析，组件化编程
Vue实战——TodoList案例(附js原生和vue源码）
2301_76885465的博客
05-12 1371
分别用原生js和Vue框架实现todolist项目（附有源码）
vue小案例TodoList
Jackmat的博客
05-28 1102
6.接下来我们来做删除模块，由于数据在APP中，我们在MyItem组件中给删除按钮添加点击事件，我们获取APP传来的todo对象数组中的id，我们将id传给爷组件APP，这时又是老生常谈的问题，孙组件向爷组件传递数据，我们可以让APP组件下方一个函数，依次传递给MyList和MyItem，通过props接收，再在子组件标签上带上该函数。我们这里可以采用爷传子，子传孙的方法，我们可以给APP（爷组件）绑定一个函数，将函数逐层传递到MyList（子组件），再传到MyItem（孙组件），例如下方。
用 Vue 构建 TodoList 案例
可爱不能当饭吃
12-03 2895
目录 一、构思组件 二、布置静态页面 三、功能实现 1. MyHeader.vue 组件 2. MyList.vue 组件 3. MyItem.vue 组件 4. MyFooter.vue 组件 5. App.vue 组件 四、总结 这是学 Vue 来做的第一个比较完整的案例，可以说是前面知识点的验收阶段，不得不说，边学边忘，果然还是靠练习。怎么说，用Vue 框架实现 TodoList 的思路和以前操作 Dom 元素时做的有异曲同工之妙，但是...
使用VueCli制作TodoList案例
Scavenger的博客
04-26 788
案例展示 1650611778687 准备工作 利用Vue框架搭配Html+Css做出简易版的TodoList案例，在没有引用Vuex的相关知识下，实现原生版的框架结构搭建，首先搭配好整体的网页布局 如上图我们可以将整体布局分为四大部分 MyHeader.vue MyList.vue MyItem.vue MyFooter.vue 首先，为了读者能更好的划清组件结构，我在下面对组件结构进行了标识 MyHeader.vue 组件部分 MyItem.vue 和 MyLis...
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>  三处缺一不可...
Vue中的常用指令
m0_62388400的博客
11-12 712
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
第四十二章 Vue中使用mutations修改Vuex仓库数据
Calvin的博客
11-11 622
在Vue中，明确vuex同样遵循单向数据流，即组件中不能直接修改仓库的数据，我们可以通过 strict: true 可以开启严格模式，防止在组件中非法修改仓库数据。(错误写法)在Vue中，组件想要修改Vuex的数据，可以通过Vue提供的mutations来实现。本章节我们将通过掌握mutations的操作流程，来修改state数据。(state数据的修改只能通过mutations )1.2. mutations修改数据基本步骤。
『VUE』24. 组件事件之子组件传递数据给父组件（详细图文注释）
最新发布
MZH
11-12 519
『VUE』24. 组件事件之子组件传递数据给父组件（详细图文注释）
前端基础面试题·第四篇——Vue（其三）
2301_76380626的博客
11-09 818
Vue中组件定义式可以为其添加一个name属性，这个属性是组件的别名。当时组件被渲染时，Vue DevTools 会显示组件的名称，方便开发者调试，增强调试体验。当组件需要在内部调用渲染自己本身时，需要通过name属性来指定组件名称，否则Vue会报错。给组件命名后，我们可以通过全局注册，在全应用范围内使用该组件。方便了组件的使用，提高了组件复用性。使用keep-alive包裹动态组件时，可以通过include和exclude属性来指定哪些组件需要缓存，哪些组件不需要缓存。
Vue实际应用之无限滚动、css之&、混合宏和~
swj的博客
11-12 451
今天来点实际的，看起来简单但是给我们代码带来更好的效果，一起来看看吧！先来介绍一个三方库。
【开源免费】基于SpringBoot+Vue.JS美发门店管理系统（JAVA毕业设计）
customer08的博客
11-11 1004
基于Vue.js和SpringBoot开发的美发门店管理系统是一个功能全面的解决方案，旨在为美发店提供高效的日常运营支持。该系统分为两个主要部分：管理后台和用户网页端，以满足不同用户角色的需求。
速盾：vue的cdn是干嘛的？
zhuguowang01的博客
11-08 363
这时就可以使用CDN来加速这些库或者插件的加载。总结一下，Vue的CDN是一种将Vue.js及其相关的库或者插件缓存在全球各个节点的技术，通过就近访问的原则，加速网页加载，减轻服务器负载，并提高网站的稳定性和可靠性。Vue的CDN可以帮助将Vue.js及其相关的库或者插件存储到全球各个节点的服务器中，使得用户可以从最近的服务器上加载这些资源，从而提高加载速度。提高网站的稳定性和可靠性：CDN通过将资源存储在多个服务器上，即使某个节点故障或者不可用，用户仍然可以从其他的节点上获取资源，保证网站的可用性。
Vue Cli的配置中configureWebpack和chainWebpack的主要作用及区别是什么？
friend_ship的博客
11-08 823
Vue Cli提供的两种方案，一种是基于configureWebpack项直接覆盖同名配置；另一种是chainWebpack直接修改默认配置。
Vue记事本待办事项TodoList案例源码
它展示了如何使用Vue.js创建一个基础的TodoList功能，包含添加、编辑、删除和标记待办事项为已完成等操作。代码中会涉及到Vue的核心概念，如数据绑定、组件使用、生命周期钩子、事件处理等。此外，该案例还可能包含...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值