你们好,我是一个刚入门前端的一个小白,但愿各位大佬们可以对小的多多指导,我先作一下自我介绍吧。我叫王小辉,我大学的专业是播音主持,为何选择学习前端呢,这就跟我大学最后一年跟几个小伙伴一块儿创业开始提及,其实也不能彻底说成创业,其实就是大学期间认识的几个小伙伴想一块儿作一些喜欢的事情,那是18年年初,当时小程序市场起步,市场上大大小小的小程序公司如雨后春笋冒出来,当时咱们以为这个小程序是一个市场,而且能够经过大学生创业这个方式获取到一些资源。个人另两个小伙伴分别是商学院和艺术设计学院的,咱们当时没有一我的懂得技术,因此咱们就了解到了,一些大的互联网公司作的小程序能够代理,能够开代理商后台的,咱们当时拿着三千以大学生创业的身份跟广州的一家小程序公司谈,最后谈了下来,基本一个模版都在300-1000左右的拿货价,接下来咱们就开始了漫长的推广过程,恰好当时赶到暑假,临时招募学校里的几位同窗加入咱们,公司的运营总共持续了5个月左右,总共谈下2位代理,8个客户,共计收到打款十多万。感受本身扯的有点远了,继续说回为何想要学习编程,就是由于在咱们业务的过程当中遇到了不少的难题,模版的功能是固定的,客户的需求没法知足,给当时的咱们形成不少的困扰,因此当时就萌生了这个想法,当时也尝试着学习一些基础的页面的东西,尝试去知足客户需求,可是对于一个什么都不动的文科生,实在是太难了。可是前端时间由于疫情因此决心转变一下,当时也是考虑好久,对前端也比较感兴趣。其余废话就不说了,最近学到vue,作了一个做业,在这里分享出来,但愿大佬指点一下,哪里须要改进,请不吝赐教。javascript
ToDoList-代办事项列表
地址:http://todolist.wyhvip.top/#/前端
为了练习数据流,我总共分红了三个组件
其实最后两个组件逻辑类似,实际上是能够和在一块儿的,这样能够节省不少代码段
下面这个Home是主组件vue
<template> <div class="home"> <header> <div class="banxin"> <label for="textval">ToDoList</label> <input type="text" placeholder="添加ToDo" id="textval" v-model.trim="userval" @keyup.enter="submit" /> </div> </header> <section class="banxin"> <div class="title"> <h2>正在进行</h2> <span>{{goingArr.length}}</span> </div> <ul-comp :goingarr="goingArr" @goingtogdown="fathergoingtogdown" @delgoingarr="fatherdelgoingarr" @goingtoginphdiv="fathergoingtoginphdiv" @xggoingarrs="fatherxggoingarrs" ></ul-comp> </section> <section class="banxin"> <div class="title"> <h2>已经完成</h2> <span>{{doneArr.length}}</span> </div> <ol-comp :donearr="doneArr" @donetogup="fatherdonetogup" @deldonearr="fatherdeldonearr" @donetoginphdiv="fatherdonetoginphdiv" @xgdonegarrs="fatherxgdonegarrs" ></ol-comp> </section> <footer> Copyright © 2020 todolist.wyhvip.top <a @click="createlocalstorage">clear</a> </footer> </div> </template> <script> // @ is an alias to /src import UlComp from "../components/UlComp.vue"; import OlComp from "../components/OlComp.vue"; export default { name: "Home", components: { UlComp, OlComp }, data() { return { userval: "", num: 0, goingArr: [], doneArr: [] }; }, created() { this.num = JSON.parse(localStorage.getItem("num")) || 0; this.goingArr = JSON.parse(localStorage.getItem("goingArr")) || []; this.doneArr = JSON.parse(localStorage.getItem("doneArr")) || []; }, methods: { fathergoingtogdown(i) { this.goingArr[i].ifShowIpu = false; this.goingArr[i].ifCheck = true; this.doneArr.unshift(this.goingArr[i]); this.goingArr.splice(i, 1); this.setlocalstorage(); }, fatherdonetogup(i) { this.doneArr[i].ifShowIpu = false; this.doneArr[i].ifCheck = false; this.goingArr.push(this.doneArr[i]); this.doneArr.splice(i, 1); this.setlocalstorage(); }, fatherdelgoingarr(i) { this.goingArr.splice(i, 1); this.setlocalstorage(); }, fatherdeldonearr(i) { this.doneArr.splice(i, 1); this.setlocalstorage(); }, fathergoingtoginphdiv(i) { this.goingArr[i].ifShowIpu = true; this.setlocalstorage(); }, fatherdonetoginphdiv(i) { this.doneArr[i].ifShowIpu = true; this.setlocalstorage(); }, submit() { if (this.userval == "") { return; } else { this.num++; let obj = { id: this.num < 10 ? "00" + this.num : this.num < 100 ? "0" + this.num : "" + this.num, ifCheck: false, ifShowIpu: false, content: this.userval }; this.goingArr.unshift(obj); this.userval = ""; this.setlocalstorage(); } }, setlocalstorage() { localStorage.setItem("num", this.num); localStorage.setItem("goingArr", JSON.stringify(this.goingArr)); localStorage.setItem("doneArr", JSON.stringify(this.doneArr)); }, fatherxggoingarrs(i) { this.goingArr[i].ifShowIpu = false; this.setlocalstorage(); }, fatherxgdonegarrs(i) { this.doneArr[i].ifShowIpu = false; this.setlocalstorage(); }, createlocalstorage() { localStorage.clear(); this.goingArr = []; this.doneArr = []; } } }; </script> <style> * { margin: 0; padding: 0; border: 0; list-style: none; } body { background-color: #cdcdcd; font-size: 16px; } .banxin { width: 600px; margin: 0 auto; } header { min-width: 600px; height: 50px; background: rgba(47, 47, 47, 0.98); } label { float: left; width: 100px; line-height: 50px; color: #ddd; font-size: 24px; cursor: pointer; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } header input { float: right; width: 60%; height: 24px; margin-top: 12px; text-indent: 10px; border-radius: 5px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset; border: none; outline: none; } .title { display: flex; justify-content: space-between; align-items: center; } .title h2 { font-size: 24px; color: #000; margin: 20px 0; } .title span { display: inline-block; padding: 0 5px; height: 20px; border-radius: 20px; background: #e6e6fa; line-height: 22px; text-align: center; color: #666; font-size: 14px; } .list li { height: 32px; line-height: 32px; background: #fff; margin-bottom: 10px; border-radius: 3px; border-left: 5px solid #629a9c; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); display: flex; justify-content: space-around; align-items: center; cursor: grabbing; } .list li .fxk { width: 22px; height: 22px; cursor: pointer; margin: 3px 3px 3px 4px; margin-left: 10px; } .list li .txt { width: 421px; height: 24px; padding: 1px 2px; border-radius: 5px; text-indent: 1em; font-size: 16px; color: #000; /* outline: none; */ outline-color: #999; cursor: progress; } .list li div { width: 421px; height: 32px; padding: 1px 2px; text-indent: 1em; font-size: 16px; color: #000; } .list li label { width: 100px; height: 32px; } .list li a { float: right; text-decoration: none; width: 14px; height: 12px; border-radius: 14px; border: 6px double #fff; background: #ccc; line-height: 14px; text-align: center; color: #fff; font-weight: bold; font-size: 14px; cursor: pointer; margin-right: 5px; } .ollist li { border-left: 5px solid #999; opacity: 0.5; cursor: progress; } footer { font-size: 14px; color: #666; text-align: center; display: block; margin-top: 20px; margin-bottom: 30px; } footer a { text-decoration: none; font-size: 14px; color: #999; cursor: pointer; } </style>
下面就是正在进行的组件和已完成的组件java
正在进行组件web
<template> <ul class="list"> <li v-for="(item,i) in goingarr" :key="item.id"> <input :checked="item.ifCheck" type="checkbox" class="fxk" @click="togdwon(i)" /> <input v-focus v-if="item.ifShowIpu" type="text" class="txt" :id="item.id" v-model="item.content" @keyup.13="xggoingarr(i)" @blur="blurIpu(i)" /> <div v-else @click="toginphdiv(i)">{{item.content}}</div> <label :for="item.id" @click="toginphdiv(i)"></label> <a @click="dellist(i)">-</a> </li> </ul> </template> <script> export default { props: ["goingarr"], methods: { togdwon(i) { this.$emit("goingtogdown", i); }, dellist(i) { this.$emit("delgoingarr", i); }, toginphdiv(i) { this.$emit("goingtoginphdiv", i); }, xggoingarr(i) { this.$emit("xggoingarrs", i); }, blurIpu(i) { this.$emit("xggoingarrs", i); } }, directives: { focus: { inserted(el) { el.focus(); } } } }; </script> <style> </style>
已经完成的组件编程
<template> <ol class="list ollist"> <li v-for="(item,i) in donearr" :key="item.id"> <input :checked="item.ifCheck" type="checkbox" class="fxk" @click="togup(i)" /> <input v-focus v-if="item.ifShowIpu" type="text" class="txt" :id="item.id" v-model="item.content" @keyup.13="xgdonegarr(i)" @blur="blurIpu(i)" /> <div v-else @click="toginphdiv(i)">{{item.content}}</div> <label :for="item.id" @click="toginphdiv(i)"></label> <a @click="dellist(i)">-</a> </li> </ol> </template> <script> export default { props: ["donearr"], methods: { togup(i) { this.$emit("donetogup", i); }, dellist(i) { this.$emit("deldonearr", i); }, toginphdiv(i) { this.$emit("donetoginphdiv", i); }, xgdonegarr(i) { this.$emit("xgdonegarrs", i); }, blurIpu(i) { this.$emit("xggoingarrs", i); } }, directives: { focus: { inserted(el) { el.focus(); } } } }; </script> <style> </style>