笔记一篇，备查。

初学vue的时候，做了一个待办事项清单。

首页 First.vue

<template><div id="app"><div class="q">待办事项清单</div><p class="e">不积跬步无以至千里</p><hr style="margin: 0 10% 6% 10%;" /><div class="u"><p>添加到待办事项列表</p><inputid="ap"type="text"@blur="pd"placeholder="请输入待办项目名称"v-model="content"style="text-indent:1em;height:40px;width:200px;font-size:15px;"/><buttonid="pl"@click="addrenwu()"style="text-indent:0.3em;height:47px;width:100px;font-size:15px;background-color:#EE6363;color:white;">添加项目</button><buttonid="cjx"onclickstyle="text-indent:0.3em;height:47px;width:100px;font-size:15px;background-color:#EE6363;color:white;">创建项目</button></div><div class="t" id="k"><center style="padding-top:20px;color:white;font-size:30px;">待办事项列表</center></div><!-- <input type="text" v-for="(item,i) of items" v-model="items[i]" :key="i"><button @click="onAdd">添加</button>--><tableid="yh"border="solid 8 white"cellspacing="8"style="border-width:0px 0px 0px 0px;border-color:rgba(255,251,240, 0.2);"><tbody id="tbMain"></tbody><!-- <inputclass="rt"v-for="(item,i) of items"v-model="items[i]":key="i"style="background-Color:rgba(255,251,240, 0.2);height:40px;width:1000px;margin-top:30px"/>--></table><!-- <input type="text" v-model="content"/><button @click="addTask">添加任务</button> --><!--代办事项的输入框--><ul><liv-for="(renwu,index) of list":id="forId(index)":key="index"class="ty"style="background-Color:rgba(255,251,240, 0.2);height:80px; width:100%;margin-top:10px"><!-- <input type="text" id='liid' v-html="index" style="margin-top:30px;color:white;height:30px;width:100px">{{val}} --><input:class="{'done':renwu.isDone}"v-model="renwu.name"style="text-indent:2em;width=500px;height=90px;margin-right:250px;padding:10px 200px 10px 0;background-Color:white;"/>&nbsp;&nbsp;<button@click="maskDone(renwu)"style="margin-top:30px;color:white;height:30px;width:100px"<!-- <button @click="edit()" style="color:white;height:30px;width:100px">编辑</button> --><button @click="deleterenwu(index)" style="color:white;height:30px;width:100px">删除待办事项</button><button  @click="click()">go to param</button><router-link :to="{name: 'Edit', query: {id: forId(index),name: renwu.name}}"> 编辑</router-link><!-- <button type="primary" @click="addRoute">跳转页面</button> --></li></ul></div>
</template><script>
// import Vue from "vue"
// import Msg from'./msg.js'
export default {data () {return {items: [],list: [],val: '',content: ''}},methods: {onAdd () {this.items.push('')},pd () {var a = document.getElementById('ap')if (a.length === 0) {alert('待办事项名称为空，请重新输入')} else {return true}},renwu () {if (this.content !== '' || this.content.length !== 0) {let renwu = {/* 创建一个对象，并存入list数组 */name: this.content,isDone: false}this.list.push(renwu)// var id = document.getElementsByClassName('ty')// alert(id.id)const arr = []// 过滤重复pushObject.keys(this.list).forEach(key => {for (var i = 0; i < this.list.length; i++) {for (var j = 0; j < arr.length; j++) {if (arr[j] === this.list[i]) {break}}if (j === arr.length) {arr[arr.length] = this.list[i]}} // arr.push(this.list);})console.log(arr)// window.localStorage.setItem('forid', JSON.stringify(this.list.id))window.localStorage.setItem('lister', JSON.stringify(arr))this.content = ''}/* 最后把输入框的内容置为空 */},deleterenwu (index) {this.list.splice(index, 1)},maskDone (task) {task.isDone = true},forId (index) {return 'forid_' + index},edit () {// 把选中行的参数id传到URL里// var gid = localStorage.getItem('id')// window.location.href = url// this.$router.push({path: './components/Edit.vue' + '/' + 'type=edit'})},addRoute () {this.$router.push('/Edit.vue')},getIndex (index) {document.getElementById('liid').innerHTML = 1// console.log(index)},goParam: function () {this.$router.push({name: 'param', params: this.forId})},click () {this.$store.commit('saveCurrJobData', this.db)}}
}
</script>
<style scoped>
* {background-color: #ee6363;margin: 0;padding: 0;
}
.q {height: 60px;color: white;padding-top: 30px;padding-left: 10%;font-family: 微软雅黑;font-size: 50px;
}
.e {padding-left: 10%;color: white;
}
.w {width: 100%;height: 80px;position: relative;background-color: rgba(255, 251, 240, 0.2);
}
.r {width: 100%;height: 80px;margin-top: 25px;position: relative;background-color: rgba(255, 251, 240, 0.2);
}
.t {width: 100%;height: 80px;margin-top: 25px;margin-right: 50%;text-align: center;position: relative;background-color: rgba(255, 251, 240, 0.2);
}
.y {margin-left: 50%;position: relative;color: white;font-size: 20px;
}
.u {padding-left: 10%;position: relative;color: white;top: -10px;font-size: 25px;font-weight: bold;
}
.rt {background-color: rgba(255, 251, 240, 0.2);height: "40px";width: 100%;
}
</style>

Edit.vue

<template><div id="ed"><div class="q">编辑事项清单</div><p class="e">不积跬步无以至千里</p><hr style="margin: 0 10% 6% 10%;" /><div id="p"><pstyle="width:18%;top:35px;color:white;font-size:18px;position:relative;padding-left:10%;padding-right:5px;">事项名称：</p><inputid="t"class="ee"v-model="this.$route.query.name"type="text"style="text-indent:1em;border-radius:10px;"/><!-- {{this.$store.state.id = this.$route.query.name}} --></div><pstyle="width:18%;top:35px;color:white;font-size:18px;position:relative;padding-left:10%;padding-right:5px;">待办时间：</p><input id="o" style="text-indent:1em;border-radius:10px;" /><p style="width:18%;top:35px;color:white;font-size:18px;position:relative;padding-left:10%;padding-right:5px;">事项内容：</p><textarea id="y" type="text" style="text-indent:1em;border-radius:10px;"></textarea><button type="submit" id="hu" class="u" >提交</button><button id="io" type="submit" class="u" @click="bc()" >保存</button><!-- <button id="fh" type="submit" class="u" @click="fl()">返回</button> --><router-link :to="{name: 'First', query: {id: this}}">返回</router-link></div>
</template>
<script>
// import Vue from "vue";
// import laydate from './latedate.js'
export default {// mounted: function () {//   this.getname()// },methods: {fl () {// this.$router.push({path: './components/First.vue'})this.$router.push('/First.vue')},bc () {var id = this.$route.query.idwindow.localStorage.setItem('forid', id)window.localStorage.getItem('forid')var ct = document.getElementById('t').valueif (ct.length === 0) {alert('事项名称为空')} else {window.localStorage.setItem('listname', ct)window.localStorage.getItem('listname')}// 存时间的值var co = document.getElementById('o').valueif (co.length === 0) {alert('时间未选择')} else {window.localStorage.setItem('listtime', co)window.localStorage.getItem('listtime')}// 存内容的值var cy = document.getElementById('y').valueif (cy.length === 0) {alert('内容为空')} else {window.localStorage.setItem('listneir', cy)window.localStorage.getItem('listneir')}// 创建一个数组取存这些数据// var slist = []// slist[0] = localStorage.getItem('listname')// slist[1] = localStorage.getItem('listtime')// slist[2] = localStorage.getItem('listneir')var slist = {}slist.name = localStorage.getItem('listname')slist.time = localStorage.getItem('listtime')slist.neir = localStorage.getItem('listneir')var qq = []Object.keys(slist).forEach(key => {qq.push(slist)})// window.localStorage.setItem('slist', JSON.stringify(slist))console.log(slist.length)var ss = []Object.keys(qq).forEach(key => {for (var i = 0; i < qq.length; i++) {for (var j = 0; j < ss.length; j++) {if (ss[j] === qq[i]) {break}}if (j === ss.length) {ss[ss.length] = qq[i]}}// ss.push(qq)})window.localStorage.setItem('slist1', JSON.stringify(ss))console.log(ss)this.$router.push({name: 'ListItem'})},sx () {}// getname () {//   this.state.store.content// }}
// data: {}
}
</script>
<style scoped>
* {background-color: #ee6363;margin: 0;padding: 0;
}
.ed {background-color: #ee6363;margin: 0;padding: 0;
}
.q {height: 60px;color:  black;padding-top: 30px;padding-left: 10%;font-family: 微软雅黑;font-size: 50px;
}
.e {padding-left: 10%;color: white;
}
#t {color: black;padding-top: 10px;margin-left: 20%;font-family: 微软雅黑;font-size: 20px;width: 65%;height: 30px;position: relative;background-color: white;margin: 0 10% 6% 25%;
}
#o {color: black;padding-top: 10px;margin-left: 20%;font-family: 微软雅黑;font-size: 20px;width: 65%;height: 30px;position: relative;background-color: white;margin: 0 10% 6% 25%;
}
#y {color: black;padding-top: 10px;margin-left: 20%;font-family: 微软雅黑;font-size: 20px;width: 65%;height: 400px;position: relative;background-color: white;margin: 0 10% 6% 25%;
}
.u {height: 50px;width: 100px;border-radius: 8%;color: white;margin: 0 10% 6% 25%;font-family: 微软雅黑;font-size: 20px;background-color: #ee6363;
}</style>

还在完善中。部分代码有参考过网上的。