[前端学习]从0到1做一个Vue风格的Todolist(Vue牛刀小试)

代码 代码 1406 人阅读 | 0 人回复

<
文章目次



媒介

  大家好,我是法式员manor,我期望本人能成为国度再起门路的展路人,年夜数据范畴的耕作者,伟大但没有苦于平凡的人。
进修vue好未几5天了,终究能写代码,以下代码是我根据B站尚硅谷的案例敲出去的:
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=82&spm_id_from=pageDriver

团体的目次构造:

115023vdrromnmmetlzztt.png

疏忽失落MyList的报白,临时弄没有分明假如来除 ,其实不影响代码运转
先本人找一个目次,并创立一个vue足脚架:
  1. vue create todo
复造代码
115023b8ebbbin1ju8lmi1.png

运转项目
  1. npm run serve
复造代码
115024iddtdssdzb8dgcgn.png

main.js
  1. //引进Vue
  2. import Vue from &#39;vue&#39;
  3. //引进App
  4. import App from &#39;./App.vue&#39;
  5. //封闭Vue的消费提醒
  6. Vue.config.productionTip = false
  7. //创立vm
  8. new Vue({
  9.         el:&#39;#app&#39;,
  10.         render: h => h(App)
  11. })
复造代码
App.vue

创立todolist的主体:
顺次是MyHeader、MyList、MyFooter

一些筹办:
html及css款式均已上传到网盘
链接:https://pan.百度.com/s/1ZoIEjkAfBwy_27rkqneR_w
提与码:js8p
导进相干组件
  1.         import MyHeader from &#39;./components/MyHeader&#39;
  2.         import MyList from &#39;./components/MyList&#39;
  3.         import MyFooter from &#39;./components/MyFooter.vue&#39;
复造代码
  1. components:{MyHeader,MyList,MyFooter}
复造代码
完好代码:
  1.                 <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        import MyHeader from &#39;./components/MyHeader&#39;
  2.         import MyList from &#39;./components/MyList&#39;
  3.         import MyFooter from &#39;./components/MyFooter.vue&#39;        export default {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>name:&#39;App&#39;,                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>components:{MyHeader,MyList,MyFooter},                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>data() {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        return {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>//因为todos是MyHeader组件战MyFooter组件皆正在利用,以是放正在App中(形态提拔)                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>todos:JSON.parse(localStorage.getItem(&#39;todos&#39;)) || []                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        }                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>},                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>methods: {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        //增加一个todo                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        addTodo(todoObj){                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>this.todos.unshift(todoObj)                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        },                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        //勾选or打消勾选一个todo                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        checkTodo(id){                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>this.todos.forEach((todo)=>{                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        if(todo.id === id) todo.done = !todo.done                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>})                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        },                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        //删除一个todo                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        deleteTodo(id){                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>this.todos = this.todos.filter( todo => todo.id !== id )                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        },                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        //齐选or打消齐选                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        checkAllTodo(done){                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>this.todos.forEach((todo)=>{                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        todo.done = done                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>})                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        },                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        //肃清一切曾经完成的todo                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        clearAllTodo(){                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>this.todos = this.todos.filter((todo)=>{                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        return !todo.done                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>})                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        }                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>},                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>watch: {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        todos:{                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>deep:true,                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>handler(value){                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        localStorage.setItem(&#39;todos&#39;,JSON.stringify(value))                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>}                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        }                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>}        }        /*base*/        body {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>background: #fff;        }        .btn {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>display: inline-block;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>padding: 4px 12px;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>margin-bottom: 0;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>font-size: 14px;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>line-height: 20px;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>text-align: center;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>vertical-align: middle;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>cursor: pointer;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>border-radius: 4px;        }        .btn-danger {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>color: #fff;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>background-color: #da4f49;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>border: 1px solid #bd362f;        }        .btn-danger:hover {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>color: #fff;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>background-color: #bd362f;        }        .btn:focus {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>outline: none;        }        .todo-container {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>width: 600px;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>margin: 0 auto;        }        .todo-container .todo-wrap {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>padding: 10px;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>border: 1px solid #ddd;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>border-radius: 5px;        }
复造代码
MyHeader.vue

吸取从App通报过去的addTodo
搜集用户输进的title
校验数据
将用户的输进包拆成一个todo工具
浑空输进
  1.                 <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>
复造代码
  1. import {nanoid} from &#39;nanoid&#39;        export default {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>name:&#39;MyHeader&#39;,                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>props:[&#39;addTodo&#39;],                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>data() {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        return {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>title:&#39;&#39;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        }                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>},                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>methods: {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        add(){                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>if(!this.title.trim()) return alert(&#39;输进不克不及为空&#39;)                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>const todoObj = {id:nanoid(),title:this.title,done:false}                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>this.addTodo(todoObj)                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>this.title = &#39;&#39;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        }                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>},        }
复造代码
完好代码:
  1.                 <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        import {nanoid} from &#39;nanoid&#39;        export default {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>name:&#39;MyHeader&#39;,                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>//吸取从App通报过去的addTodo                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>props:[&#39;addTodo&#39;],                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>data() {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        return {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>//搜集用户输进的title                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>title:&#39;&#39;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        }                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>},                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>methods: {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        add(){                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>//校验数据                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>if(!this.title.trim()) return alert(&#39;输进不克不及为空&#39;)                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>//将用户的输进包拆成一个todo工具                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>const todoObj = {id:nanoid(),title:this.title,done:false}                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>//告诉App组件来增加一个todo工具                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>this.addTodo(todoObj)                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>//浑空输进                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>this.title = &#39;&#39;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        }                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>},        }        /*header*/        .todo-header input {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>width: 560px;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>height: 28px;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>font-size: 14px;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>border: 1px solid #ccc;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>border-radius: 4px;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>padding: 4px 7px;        }        .todo-header input:focus {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>outline: none;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>border-color: rgba(82, 168, 236, 0.8);                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);        }
复造代码
MyList.vue

声明吸取App通报过去的数据,此中todos是本人用的,checkTodo战deleteTodo是给子组件MyItem用的
  1.    <MyItem
  2.       v-for="todoObj in todos"
  3.       :key="todoObj.id"
  4.       :todo="todoObj"
  5.       :checkTodo="checkTodo"
  6.       :deleteTodo="deleteTodo"
  7.     />
复造代码
  1. import MyItem from "./MyItem";
  2. export default {
  3.   name: "MyList",
  4.   components: { MyItem },
  5.   props: ["todos", "checkTodo", "deleteTodo"],
  6. };
复造代码
完好代码:
  1.    <MyItem
  2.       v-for="todoObj in todos"
  3.       :key="todoObj.id"
  4.       :todo="todoObj"
  5.       :checkTodo="checkTodo"
  6.       :deleteTodo="deleteTodo"
  7.     />   <MyItem
  8.       v-for="todoObj in todos"
  9.       :key="todoObj.id"
  10.       :todo="todoObj"
  11.       :checkTodo="checkTodo"
  12.       :deleteTodo="deleteTodo"
  13.     />  import MyItem from "./MyItem";export default {  name: "MyList",  components: { MyItem },  //声明吸取App通报过去的数据,此中todos是本人用的,checkTodo战deleteTodo是给子组件MyItem用的  props: ["todos", "checkTodo", "deleteTodo"],};/*main*/.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;}
复造代码
MyFooter.vue

  1.    <MyItem
  2.       v-for="todoObj in todos"
  3.       :key="todoObj.id"
  4.       :todo="todoObj"
  5.       :checkTodo="checkTodo"
  6.       :deleteTodo="deleteTodo"
  7.     />   <MyItem
  8.       v-for="todoObj in todos"
  9.       :key="todoObj.id"
  10.       :todo="todoObj"
  11.       :checkTodo="checkTodo"
  12.       :deleteTodo="deleteTodo"
  13.     />   <MyItem
  14.       v-for="todoObj in todos"
  15.       :key="todoObj.id"
  16.       :todo="todoObj"
  17.       :checkTodo="checkTodo"
  18.       :deleteTodo="deleteTodo"
  19.     />   <MyItem
  20.       v-for="todoObj in todos"
  21.       :key="todoObj.id"
  22.       :todo="todoObj"
  23.       :checkTodo="checkTodo"
  24.       :deleteTodo="deleteTodo"
  25.     />   <MyItem
  26.       v-for="todoObj in todos"
  27.       :key="todoObj.id"
  28.       :todo="todoObj"
  29.       :checkTodo="checkTodo"
  30.       :deleteTodo="deleteTodo"
  31.     />   <MyItem
  32.       v-for="todoObj in todos"
  33.       :key="todoObj.id"
  34.       :todo="todoObj"
  35.       :checkTodo="checkTodo"
  36.       :deleteTodo="deleteTodo"
  37.     />   <MyItem
  38.       v-for="todoObj in todos"
  39.       :key="todoObj.id"
  40.       :todo="todoObj"
  41.       :checkTodo="checkTodo"
  42.       :deleteTodo="deleteTodo"
  43.     />   <MyItem
  44.       v-for="todoObj in todos"
  45.       :key="todoObj.id"
  46.       :todo="todoObj"
  47.       :checkTodo="checkTodo"
  48.       :deleteTodo="deleteTodo"
  49.     />   <MyItem
  50.       v-for="todoObj in todos"
  51.       :key="todoObj.id"
  52.       :todo="todoObj"
  53.       :checkTodo="checkTodo"
  54.       :deleteTodo="deleteTodo"
  55.     />   <MyItem
  56.       v-for="todoObj in todos"
  57.       :key="todoObj.id"
  58.       :todo="todoObj"
  59.       :checkTodo="checkTodo"
  60.       :deleteTodo="deleteTodo"
  61.     />  已完成{{ doneTotal }} / 局部{{ total }}   <MyItem
  62.       v-for="todoObj in todos"
  63.       :key="todoObj.id"
  64.       :todo="todoObj"
  65.       :checkTodo="checkTodo"
  66.       :deleteTodo="deleteTodo"
  67.     />   <MyItem
  68.       v-for="todoObj in todos"
  69.       :key="todoObj.id"
  70.       :todo="todoObj"
  71.       :checkTodo="checkTodo"
  72.       :deleteTodo="deleteTodo"
  73.     />  肃清已完成使命          export default {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>name:&#39;MyFooter&#39;,                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>props:[&#39;todos&#39;,&#39;checkAllTodo&#39;,&#39;clearAllTodo&#39;],                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>computed: {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        //总数                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        total(){                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>return this.todos.length                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        },                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        //已完成数                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        doneTotal(){                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>//此处利用reduce办法做前提统计                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>// const x =this.todos.reduce((pre.current) =>{                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>//         console.log(&#39;@&#39;,pre)                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>//         return pre + 1                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>// },0)                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>//简写                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        },                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        //掌握齐选框                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        isAll:{                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>//齐选框能否勾选                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>get(){                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        return this.doneTotal === this.total && this.total > 0                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>},                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>//isAll被修正时set被挪用                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>set(value){                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        this.checkAllTodo(value)                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>}                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        }                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>},                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>methods: {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        /* checkAll(e){                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>this.checkAllTodo(e.target.checked)                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        } */                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        //浑空一切已完成                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        clearAll(){                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>this.clearAllTodo()                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        }                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>},        }/*footer*/.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;}
复造代码
MyItem.vue

勾选or打消勾选
告诉App组件将对应的todo工具的done值与反
告诉App组件将对应的todo工具删除
  1.                 <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>{{todo.title}}                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>删除                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>export default {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>name:&#39;MyItem&#39;,                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>//声明吸取todo、checkTodo、deleteTodo                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>props:[&#39;todo&#39;,&#39;checkTodo&#39;,&#39;deleteTodo&#39;],                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>methods: {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>handleCheck(id){                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>this.checkTodo(id)                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        },                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        handleDelete(id){                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>if(confirm(&#39;肯定删除吗?&#39;)){                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>this.deleteTodo(id)                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>}                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>        }                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>},        }        /*item*/        li {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>list-style: none;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>height: 36px;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>line-height: 36px;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>padding: 0 5px;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>border-bottom: 1px solid #ddd;        }        li label {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>float: left;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>cursor: pointer;        }        li label li input {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>vertical-align: middle;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>margin-right: 6px;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>position: relative;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>top: -1px;        }        li button {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>float: right;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>display: none;                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>margin-top: 3px;        }        li:before {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>content: initial;        }        li:last-child {                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>border-bottom: none;        }        li:hover{                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>background-color: #ddd;        }                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>li:hover button{                <input type="text" placeholder="请输进您的使命称号,按回车键确认" v-model="title" @keyup.enter="add"/>display: block;        }
复造代码
运转结果:

115025r9gke9ut0tek10uq.gif

❤️往期超卓回顾❤️:

[前端进修]年夜数据齐栈工程师之一文快速上脚vue3
[前端进修]一文弄定Vue指令
[前端进修]文件组件专题
总结
到那里祝贺您把Vue进门的第一个案例做完了,假如您还有甚么没有懂,可随时问我,公疑我,假如C站出有复兴您,可正在公家号背景减我密友,备注:C站去的。期望以上可以帮到刚进修Vue的您!
115025lokgh0vpsoj5500a.jpg


免责声明:假如进犯了您的权益,请联络站少,我们会实时删除侵权内乱容,感谢协作!
1、本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,按照目前互联网开放的原则,我们将在不通知作者的情况下,转载文章;如果原文明确注明“禁止转载”,我们一定不会转载。如果我们转载的文章不符合作者的版权声明或者作者不想让我们转载您的文章的话,请您发送邮箱:Cdnjson@163.com提供相关证明,我们将积极配合您!
2、本网站转载文章仅为传播更多信息之目的,凡在本网站出现的信息,均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性,但不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
3、任何透过本网站网页而链接及得到的资讯、产品及服务,本网站概不负责,亦不负任何法律责任。
4、本网站所刊发、转载的文章,其版权均归原作者所有,如其他媒体、网站或个人从本网下载使用,请在转载有关文章时务必尊重该文章的著作权,保留本网注明的“稿件来源”,并自负版权等法律责任。
回复 关闭延时

使用道具 举报

 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则