//用了vite后，在组件标签就可以直接用局部注册的标签名了。像没用这个vite时，如果在body里面大写组件标签会有报错的情况，还有像在v-model写在组件时，在对应的子组件input里面要写:value="modelValue"，但props里面传的是model-value，还有像在写父传子的组件中属性名都要小写,如果大写，会将数据传undefined,就是没有接收到，给写代码带来了不少麻烦。总的来说。使用vite后方便写代码了很多
<script>
?? ?import TodoHeader from './components/TodoHeader.vue'
?? ?import TodoText from './components/TodoText.vue'
?? ?import TodoCart from './components/TodoCart.vue'
?? ?import TodoFooter from './components/TodoFooter.vue'
?? ?var itemid=1
?? ?export default {
?? ??? ?name: 'app',
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?arr: [],
?? ??? ??? ??? ?type: 'all',
?? ??? ??? ??? ?currentarr: []
?? ??? ??? ?}
?? ??? ?},
?? ??? ?components: {
?? ??? ??? ?TodoHeader,
?? ??? ??? ?TodoText,
?? ??? ??? ?TodoCart,
?? ??? ??? ?TodoFooter
?? ??? ?},
?? ??? ?computed: {
?? ??? ??? ?computetode() {
?? ??? ??? ??? ?return this.arr.filter(item => item.complate == true)
?? ??? ??? ?},
?? ??? ??? ?uncomputetode() {
?? ??? ??? ??? ?return this.arr.filter(item => item.complate == false)
?? ??? ??? ?},
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?addcartin(title) {
?? ??? ??? ??? ?this.arr.push({
?? ??? ??? ??? ??? ?id: itemid++,
?? ??? ??? ??? ??? ?complate: false,
?? ??? ??? ??? ??? ?title
?? ??? ??? ??? ?})
?? ??? ??? ?},
?? ??? ??? ?removeall(data) {
?? ??? ??? ??? ?this.arr = data
?? ??? ??? ?},
?? ??? ??? ?remove(id) {
?? ??? ??? ??? ?this.arr = this.arr.filter(item => item.id != id)
?? ??? ??? ?},
?? ??? ??? ?tab(data) {
?? ??? ??? ??? ?this.type = data
?? ??? ??? ?}
?? ??? ?},
?? ??? ?watch: {
?? ??? ??? ?uncomputetode() {
?? ??? ??? ??? ?if (this.type == 'every') {
?? ??? ??? ??? ??? ?this.currentarr = this.uncomputetode
?? ??? ??? ??? ?} else if (this.type == 'some') {
?? ??? ??? ??? ??? ?this.currentarr = this.computetode
?? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ?this.currentarr = this.arr
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?type: {
?? ??? ??? ??? ?handler(newtype) {
?? ??? ??? ??? ??? ?console.log(newtype)
?? ??? ??? ??? ??? ?switch (newtype) {
?? ??? ??? ??? ??? ??? ?case 'all':
?? ??? ??? ??? ??? ??? ??? ?this.currentarr = this.arr
?? ??? ??? ??? ??? ??? ??? ?break
?? ??? ??? ??? ??? ??? ?case 'some':
?? ??? ??? ??? ??? ??? ??? ?this.currentarr = this.computetode
?? ??? ??? ??? ??? ??? ??? ?break
?? ??? ??? ??? ??? ??? ?case 'every':
?? ??? ??? ??? ??? ??? ??? ?this.currentarr = this.uncomputetode
?? ??? ??? ??? ??? ??? ??? ?break
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},
?? ??? ??? ??? ?immediate: true,
?? ??? ??? ?},
?? ??? ?}
?? ?}
</script>
<template>
?? ?<div class="header">
?? ??? ?<TodoHeader @add="addcartin"></TodoHeader>
?? ??? ?<TodoText :type="type" @blue="tab" :computetode="computetode" :Uncomputetode="uncomputetode" :arr="arr">
?? ??? ?</TodoText>
?? ??? ?<todo-cart :list="currentarr" @remove="remove"></todo-cart>
?? ??? ?<todo-footer @clear="removeall"></todo-footer>
?? ?</div>
</template>
<style>
?? ?* {
?? ??? ?padding: 0;
?? ??? ?margin: 0;
?? ?}
?? ?ul,
?? ?ol {
?? ??? ?list-style: none;
?? ?}
?? ?.header {
?? ??? ?width: 400px;
?? ??? ?margin: 0px auto;
?? ??? ?margin-top: 50px;
?? ??? ?box-shadow: 1px 1px 5px 5px;
?? ?}
?? ?.input {
?? ??? ?padding: 10px;
?? ??? ?height: 30px;
?? ??? ?display: flex;
?? ?}
?? ?.input input {
?? ??? ?padding-left: 10px;
?? ??? ?flex: 1;
?? ?}
?? ?.input button {
?? ??? ?width: 60px;
?? ??? ?height: 30px;
?? ?}
?? ?.text {
?? ??? ?padding: 10px;
?? ??? ?display: flex;
?? ?}
?? ?.text .list {
?? ??? ?flex: 1;
?? ??? ?text-align: center;
?? ??? ?cursor: pointer;
?? ?}
?? ?/* ?? ?.text div:nth-child(1){
?? ??? ??? ??? ?background-color: black;
?? ??? ??? ??? ?color: white;
?? ??? ??? ??? ?
?? ??? ??? ?} */
?? ?.text .active {
?? ??? ?background-color: black;
?? ??? ?color: white;
?? ?}
?? ?.cart {
?? ??? ?padding: 10px;
?? ?}
?? ?.cart li {
?? ??? ?height: 20px;
?? ??? ?display: flex;
?? ??? ?margin-bottom: 10px;
?? ?}
?? ?.cart li div {
?? ??? ?flex: 1;
?? ??? ?padding-left: 10px;
?? ?}
?? ?.cart li input {
?? ??? ?height: 20px;
?? ??? ?width: 20px;
?? ?}
?? ?.clear {
?? ??? ?padding: 10px;
?? ??? ?display: flex;
?? ?}
?? ?.clear div {
?? ??? ?flex: 1;
?? ?}
</style>