Vue设计记事本

这篇具有很好参考价值的文章主要介绍了Vue设计记事本。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目描述

项目实现功能有:记录今天要完成的任务,勾选已经完成的任务,删除已经完成的全部任务。
界面展示:
Vue设计记事本

代码展示

创建一个Myitem.vue文件夹

<template>

<li>
    <label >
      <input type="checkbox" :checked="todo.done" @click="handle(todo.id)"/> 
      <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" @click="delect(todo.id)" >删除</button>
</li>
</template>

<script>
export default {
    name:'MyItem',
    props:['todo','checkTodo','delectTodo'],
   methods:{
    handle(id){
        //通知app去将tudo.down取反
       this.checkTodo(id)
    },
    delect(id){
        //通知app删除当前todoObj
        this.delectTodo(id)
    }
   }

}
</script>

<style scoped>
li{
    list-style:none;
    height:36px;
    line-height: 36px;
    padding:0 50px;
    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>

2.在components文件夹下创建 Myheader文件夹

<template>
    <div class="todo-header">
        <input type="text"  
           @keydown.enter="add"  
           placeholder="请输入你的任务名称,按回车键确认"  
           v-model="value"/>
    </div>

        
  
</template>

<script>
//引入
import {nanoid} from 'nanoid'

export default {
    name:'MyHeader',
    data(){
       return {
        value:''}
    }, 
    props:['addtodos'],
    methods:{
        add(e){
            //校验数据
            if(!this.value.trim()){
                return alert('输入不能为空!')
            }
            const todoObj={id:nanoid(),title:this.value,done:false}
            this.addtodos(todoObj)
            this.value=''
        }
    },
   


}
</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>

3.在同一个文件夹下创建MyFooter.vue文件夹

<template>
    <div class = 'todo-footer' v-if="todosAll">
        <label for="">
            <input type="checkbox" :checked="isAll" @click="allTodo"/> 
        </label>
        <span>已完成{{countDone}}/全部{{todosAll}}</span>
        <button class="btn btn-danger"  @click="delectDoneall">清除已经完成的内容</button>
    </div>
  
</template>

<script>

export default {
 name:'MyFooter',
 props:['todos','delectDone'],
 date(){
 },
methods:{
    allTodo(e){
 
        if(e.target.checked==true){
            this.todos.forEach((todo)=>{
                todo.done=true
            })
        }
        else{
            this.todos.forEach((todo)=>{
                todo.done=false
            })
        }
    },
    delectDoneall(){
        this.delectDone()
    }

   
},
 
 computed:{
    todosAll(){
        return this.todos.length
    },
    countDone(){
        let  i  =0
     this.todos.forEach(todo => {
        if(todo.done==true){
            i++
        }}
      )
      return i 
     
    },
    isAll(){
        return this.countDone === this.todosAll && this.todosAll >0
        
    },
  }
 }

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

4.在同个文件夹下创建MyList.vue文件

<template>  
    <ul  class="todo-main">
        <MyItem 
           v-for="todoObj in todos" 
           :key="todoObj.id"  
           :todo="todoObj"  
           :checkTodo="checkTodo"
           :delectTodo="delectTodo">
        </MyItem>
    </ul>
</template>

<script>
import MyItem from './MyItem.vue'
export default {
    name:'MyList',
    components:{
        MyItem,
    },
    props:['todos','checkTodo','delectTodo']

}
</script>

<style scoped>
  .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>

5.再创建app.vue

<template>
  <div id="app">
    <div class="todo-container">
      <div class="todo-wrap">
    <!--放置静态资源-->
        <MyHeader :addtodos="addtodos"></MyHeader>
        <MyList 
           :todos="todos" 
           :checkTodo="checkTodo"
           :delectTodo="delectTodo">
          </MyList>
        <MyFooter 
           :todos="todos"
           :delectDone="delectDone" >
        </MyFooter>
      </div>
    </div>
  </div>
</template>

<script>
//所有组件放置的文件夹,除了app.vue 
import MyHeader from './components/MyHeader.vue'
import MyList from'./components/MyList.vue'
import MyFooter from './components/MyFooter.vue'

export default {
  name: 'App',
  components: {
    MyFooter,
    MyHeader,
    MyList
  },
  data(){
    return{
            todos:[
                {id:'001',title:'写代码',done:true},
                {id:'002',title:'看书',done:false},
                {id:'003',title:'休息',done:true}
            ],
            i:0,
            n:0
        }
  },
  methods:{
    //添加一个todo 
    addtodos(todoObj){  
      this.todos.unshift(todoObj)
    },
    //勾选或者取消勾选一个todo
    checkTodo(id){
      this.todos.forEach((todo)=>{
        if(todo.id ==id){
          todo.done=!todo.done
        }
      })
    },
    //删除对应的todo
    delectTodo(id){
     this.todos=this.todos.filter((todo)=>{
      console.log('运行到了这里')
      return todo.id !==id
     })
     console.log(this.todo.id,id)
    },
    //清除已经完成的内容
    delectDone(){
        this.todos=this.todos.filter((todo)=>{
        return todo.done === false
       })
    }
    
    
  },
}
</script>

<style>
/*basic*/ 
  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 o rgba(225,225,225,0.2) , 0 1px 2px rgba(0,0, 0, 0.2);
    border-radius: 4px;

  }
  .btn-danger{
    color:#fff;
    background-color:#da4f49;
    border:1px solid #bd362f;
  }
  .btn-danger:hover{
    color:#fff;
    background-color:#bd362f ;
  }
  .btn:foucs{
    outline:none;
  }
  .todo-container{
    width:600px;
    margin:0 auto;
  }
  .todo-container .todo-wrap{
    padding:10px;
    border:1px solid #ddd;
    border-radius: 5px;
  }
  

</style>

总结

1.组件化编码流程:

(1)拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突
(2)实现动态组件:考虑好数据的存放位置,数据是一个组件在用还是一些组件在用:
一个组件在用的话放在组件本身
一些组件在用的话放在对应的组件的父组件上
(3)实现交互:从绑定事件开始文章来源地址https://www.toymoban.com/news/detail-472530.html

2.props适合用于:
 (1)父组件向子组件通信
 (2)子组件向父组件通信
3.使用v-model的时候要记得:v-model绑定的数据的值不能是props中传递过来的数据,因为props不能修改
4,props传递的值如果是对象类型,那么改变对象中的属性的话,不会报错,但是不建议这么做。
5.获取框是否选中用e.target.checked (type=‘checked’),获取文本框的文字用e.target.value
6.可以使用过滤器来删除数组中不符合条件的组员
语法:arrs = arrs.filter((arr)={return 条件})

到了这里,关于Vue设计记事本的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue记事本渲染以及交互

    2024年04月10日
    浏览(45)
  • 基于Android的记事本设计和模块开发

    有一万五千字论文,完美运行。 由于编程技术的迅速发展,各种记事本APP随处可见,在人们的日常生活中经常使用的到。于是各种记事本APP也跟着发展起来。本文在通过在Android Studio开发平台上开发一个简单的多功能语音输入记事本APP的过程,同时了解记事本APP的功能实现,

    2024年02月03日
    浏览(54)
  • Android 备忘录,记事本程序设计

    android备忘录实现,使用ObjectBox数据库框架进行数据存储,增删改查等操作。代码使用kotlin编写。 1、下面看看ObjectBox数据库封装 需要注意的是:    /**      * 你只有配置好之后, 点击 Make Model \\\'你的model名字\\\', 才会创建 MyObjectBox对象      * 对于MyObjectBox的包名, 目前我发现的

    2024年01月23日
    浏览(48)
  • 【Java】实现记事本(完整版)

    💕💕💕大家好,这是作业侠系列之Java实现记事本,还是那句话,我的粉丝们需要源码直接qq邮箱+你需要的源码私发我即可哦,大家觉得还行的话,期待你们的三连,这也是我创作的最大动力💕💕💕 往期源码回顾: 【Java】实现绘图板(完整版) 【C++】图书管理系统(完整板

    2024年02月08日
    浏览(56)
  • 【安卓开发】开源Notepad记事本APP项目(完整代码+说明文档)

    作业:记事本APP。要求: (1) 给出实现源程序,对源程序加以说明; (2) 给出屏幕运行结果的截图,运行结果含有个人特征; (3) 用word文档提交,文件名:班号-姓名-学号后3位-作业。 1.页面设计美观,可以正确显示数据(20分)。 2.实现数据保存、查询、修改和读取功能(20分

    2023年04月12日
    浏览(62)
  • 实现一个简单的记事本APP

    主要涉及的相关知识: 1、控件RecyclerView的使用 2、轻量级数据库SQLite的使用 3、activity之间的跳转以及参数传递 首先创建MainActivity 为方便这里使用的是帧布局FrameLayout,主要包含两个控件,一个是用于显示记事本相关信息的RecyclerView,另一个是用于进行添加记事信息FloatingAct

    2024年02月12日
    浏览(45)
  • 基于Android平台的记事本软件(Android Studio项目+报告+app文件)

    移动应用开发技术 期末考核报告 题    目:         基于 Android 平台的记事本软件              学生姓名                               学生学号                               专      业                            班     级

    2024年02月08日
    浏览(48)
  • MFC第十九天 记事本项目功能完善和开发、CTabCtrl类与分页模式开发

    获取选择的文字 向下查找 查找替换功能 向下 向上 不区分大小写的 替换当前选中 替换全部 打开查找编辑框需要加载的 CFileDialog 构造函数详解 pch.h CApp NotePad.cpp 对编码的解析 以及对编码格式的转换 CMainDlg.h CMainDlg.cpp CMainDlg.h CMainDlg.cpp CFileDialogXq.h CFileDialogXq.cpp CMainDlg.h CMai

    2024年02月16日
    浏览(48)
  • 网络攻防:DLL注入实现键盘钩取+记事本注入并联网下载网页

    目录 前言 一、dll注入的介绍和示例 dll注入介绍 dll注入示例 二、dll注入实现方法 三、键盘消息监听钩取 消息钩取原理 键盘消息监听钩取具体实现 四、dll注入记事本实现联网下载网页 介绍  实现 五、总结 这是研一专业课网络攻防对抗术的一次汇报,我对其大致内容做了相

    2024年02月11日
    浏览(54)
  • 电脑记事本在哪里?电脑桌面显示记事本要怎么设置?

    绝大多数上班族在使用电脑办公时,都需要随手记录一些琐碎或重要的事情,例如工作注意事项、常用的文案、某项工作的具体要求、多个平台的账号和密码等。于是就有不少小伙伴想要使用电脑记事本软件来记录,那么电脑记事本在哪里呢?想要电脑桌面显示记事本怎么设

    2024年02月15日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包