vue10

最新推荐文章于 2023-02-06 15:59:22 发布

小新没蜡笔m

最新推荐文章于 2023-02-06 15:59:22 发布

阅读量155

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_66506641/article/details/125688532

版权

这个博客展示了如何使用Vue.js构建一个TodoList应用，包括组件化编码流程、父子组件通信以及交互实现。主要组件有MyHeader、List和MyFooter，涉及添加、检查、删除任务以及全选和清除功能。文章强调了props的使用规则，以及在修改对象属性时的注意事项。

摘要由CSDN通过智能技术生成

App.vue

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <MyHeader @addTodo="addTodo" />
        <List :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo" />
        <MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo" />
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyFooter from './components/MyFooter.vue'
import List from './components/List.vue'

export default {
  name: 'App',
  components: {
    MyFooter, MyHeader, List
  },
  data() {
    return {
      todos: [
        { id: '001', title: '抽烟', done: true },
        { id: '002', title: '喝酒', done: false },
        { id: 'eo3', title: '开车', done: true }
      ]
    }
  },
  methods: {
    //添加一个todo
    addTodo(todoObj) {
      this.todos.unshift(todoObj)
    },
    //勾选or取消勾选一个todo
    checkTodo(id) {
      this.todos.forEach((todo) => {
        if (this.todos.id == id) todo.done = !this.todos.done
      })

    },
    //删除一个todo
    deleteTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id)
    },
    //全选or取消全选
    checkAllToto(done) {
      this.todos.forEach((todo) => {
        todo.done = done
      })
    },
    //清除所有已经完成的todo
    clearAllTodo() {
      this.todos = this.todos.filter((todo) => {
        return !todo.done
      })
    }
  },
}
</script>

<style>
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid#bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}

.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid#ddd;
  border-radius: 5px;
}
</style>

Header

<template>
<div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/>
</div>
</template>
<script>
import {nanoid} from 'nanoid'
export default {
    name: 'MyHeader',
    props:['addTodo'],
    data(){
        return{
            title:''
        }
    },
    methods:{
        add(){
            //校验数据
            if(!this.title.trim())return alert('输入不能为空')
            //将用户的输入包装成一个todo对象
            const todoObj={id:nanoid(),title:this.title,done:false}
            //通知App组件去添加一个todo对象
            this.addTodo(todoObj)
            //清空输入
            this.title=''
        }
    },
}
</script>
<style scoped>
.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>

footer

<template>
    <div class="todo-footer" v-show="total">
        <label>
            <!--<input type="checkbox" :checked="isAll" @change="checkAll"/>-->
            <input type="checkbox" v-model="isAll" />
        </label>
        <span>
            <span>已完成{{ doneTotal }}</span>/全部{{ total }}
        </span>
        <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
    </div>
</template>
<script>
export default {
    name: 'MyFooter',
    props: ['todos', 'checkAllToto','clearAllTodo'],
    computed: {
        total() {
            return this.todos.length
        },

        doneTotalo() {
            /*const x = this.todos.reduce((pre, current) => {
                console.log('@', pre, current)
                return pre + (current.done ? 1 : 0)
            }, 0)*/
            return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0)

        },
        isA1l: {
            get() {
                return this.doneTotal == this.total && this.total > 0
            },
            set(value) {
                this.checkAllTodo(value)
            }

        },
        methods: {
           /*checkAll(e) {
                this.checkAllTodo(e.target.checked)
            }*/
            clearAll(){
                this.clearAllTodo() 
            }
        },
    }
}
</script>
<style scoped>
.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>

list

<template>
    <ul class="todo-main">
      <Item 
      v-for="todoObj in todos" 
      :key="todoObj.id" 
      :todo="todoObj"
      :checkTodo="checkTodo"
      :deleteTodo="deleteTodo"/>        
    </ul>
</template>
<script>
import Item from './Item.vue'
export default {
    name: 'List',
    components: { Item },
    props:['todos','checkTodo','deleteTodo']
  
}
</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;
}
</style>

item

<template>
    <li>
        <label>
            <input type="checkbox" :check="todo.done" @change="handleCheck(todo.id)"/>
            <!--如下代码也能够实现功能，但是不太推荐，因为违反了原则，修改了props-->
            <!--<input type="checkbox" v-model="todo.done">-->
            <span>{{todo.title}}</span>
        </label>
        <button class="btn btn-danger" style="display:none" @click="handelDelete(todo.id)">删除</button>
    </li>
</template>
<script>
export default {
    name: 'Item',
    //声明接受todo对象
    props:['todo','checkTodo','deleteTodo'],
    methods: {
        handleCheck(id){
            //通知App组价将对应的todo对象的done值取反
            this.checkTodo(id)
        },
        //删除
        handelDelete(id){
            if(confirm('确定删除吗？')){
                this.deleteTodo(id)

            }
        }
    },
}
</script>
<style scoped>
li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px 3;
    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;
}

li:hover{
    background-color: #ddd;
}
li:hover button{
    display: block;
}
</style>