return;
}
if(!this.foodsele.count){
Vue.set(this.foodsele, 'count', 1)
}else{
this.foodsele.count++
}
},
decreaseCart (event){ // 点击减少
if (!event._constructed) { // 去掉自带click事件的点击
return;
}
if(this.foodsele.count){
this.foodsele.count --
}
}
}
(2)添加按钮 实现transtion 过渡
我们要实现的效果是：当点击添加按钮时，减少按钮出现 并伴随着 旋转、平移以及透明度变化的 一些 动画效果
<transition name='move'> <!--平移动画-->
<div class="cart-decrease" v-show="foodsele.count" @click='decreaseCart($event)'>
<span class="icon-remove_circle_outline inner"></span><!--旋转、透明度动画-->
</div>
</transition>
.cart-decrease
display inline-block
padding 6px
transition: all .4s linear /*过渡效果的 CSS 属性的名称、过渡效果需要多少时间、速度效果的速度曲线*/
.inner
line-height 24px
font-size 24px
color rgb(0,160,220)
transition all 0.4s linear
&.move-enter-active, &.move-leave-active
transform translate3d(0,0,0) /* 这样可以开启硬件加速，动画更流畅，3D旋转，X轴位移24px */
.inner
display inline-block /* 设置成inline-block才有高度，才能有动画 */
transform rotate(0)
&.move-enter, &.move-leave-active
opacity: 0
transform translate3d(24px,0,0)
.inner
transform rotate(180deg)
三、抛物线小球动画
通过两个层来控制小球，外层控制一个方向的变化，内层控制另外一个方向的变化（写两层才会有抛物线的效果），采用fixed布局（是相对于视口的动画）
事件发射和接收
组件之间传值-1
组件之间传值-2
扩展
Vue1.0组件间传递
使用$on()监听事件；
使用$emit()在它上面触发事件；
使用$dispatch()派发事件，事件沿着父链冒泡；
使用$broadcast()广播事件，事件向下传导给所有的后代
(1) Vue2.0 组件之间传递数据
1-1. 当点击 添加数量时 在 cartControl 组件里的 addCount 方法里 通过 $emit 属性 派发一个事件 , 传入点击的对象
addCart(event){ // 点击count 加，
// console.log(event.target);
if (!event._constructed) { // 去掉自带click事件的点击
return;
}
if(!this.foodsele.count){
Vue.set(this.foodsele, 'count', 1)
}else{
this.foodsele.count++
}
// 当点击 添加数量时 通过 $emit 属性 提交一个名为 add 给父组件
