Vue学习之路

说句老实话，我也不知道写点啥，只是突然发现好久好久没写了，就来想想写点啥，发现最近一直在折腾vue，也不算什么新技术了，上次出去，别人跟我说现在去面试的人都说自己会vue，烂大街了要，其实想想还真是，毕竟简单易学，入门分分钟，很多不会前端的也在学这个框架。我也不知道写个啥，最近写了一个小的组件demo，关于时间选择的，但是还灭写完，也写了一个点餐系统里的添加某一个菜的数量的组件。还写了不少公用插件，但是还是写点关于vue的代码吧。

首先这个玩意是一个没写完的时间组件，只写了一部分，只能作为一个学习的样板，如果有写的很烂的地方，能看出来很烂那你肯定是大神了，请留下你的联系方式，我们一起谈论讨论技术，希望你不吝赐教。

首先呢是组件的DOM部分，都是基础的vue知识。

<template>
    <div class="disInline fr">
        <transition-group name="fade" tag="span">
            <a href="javascript:void(0);" class="decrease" @click="operation({goodsDetail:data,type:'decrease'})" v-show="isShow" key="decrease">-</a>
            <span class="count" v-show="isShow" key="count">{{data.id | showCount(selectedArr)}}</span>
        </transition-group>
        <a href="javascript:void(0);" class="increase" @click="operation({goodsDetail:data,type:'increase'})">+</a>
    </div>
</template>

   .decrease,.count,.increase{ display: inline-block; width: 16px; height: 16px; font-size: 10px; text-align: center; line-height: 14px; color: #00a0dc; border: 1px #00a0dc solid; -webkit-border-radius: 50% 50%; -moz-border-radius: 50% 50%;  border-radius: 50% 50%; vertical-align: top;}
    .count{ font-size: 10px; color: rgb(147,153,159); border: none;}
    .fade-enter-active {
        transition: all .5s
    }
    .fade-enter-active {
        opacity: .8;
    }
    .fade-enter, .fade-leave-active {
        opacity: 0
    }

import { mapActions,mapGetters } from 'vuex'
    import Filter from '../../tools/toolFun.js'
    export default {
        props:{
            data:{
                type:Object
            }
        },
        computed: {
            ...mapGetters(['selectedArr']),
            isShow () {
                let i= 0,selArr = this.selectedArr,selArrLength = selArr.length,flag=false;

                for(;i<selArrLength;i++){
                    if(selArr[i].goodsId==this.data.id){
                        flag=true;
                        break;
                    }
                }
                return flag;
            }
        },
        methods:{
            ...mapActions(['operation'])
        }
    }

其中showCount这个是自定义的过滤器operation是vuex的action里的分发方法，大概这个可以这么写，用vuex是因为选择的菜品可以有很多，也可以是不同的餐厅来的，如果不用vuex进行数据管理的话，会让数据之间的交互，操作显得异常的繁琐。

这个是自己写的，并不是看了别人的选餐组件以后写的，如有雷同纯属巧合，如果有写的不好的地方请见谅。
如果你读的够仔细，会发现，我说写的是时间插件，但是最后写出来的确是一个点餐的添加菜品的一个按钮，哈哈，没写完的我怎么敢拿出来给大家看呢，别打我哈，，，希望对您有帮助。我觉得没啥帮助，，，哎

猜你喜欢