vue和小程序的比较

vue的钩子函数:

beforeCreat: 创建前

created: 创建

beforeMount: 挂载前

mounted: 挂载

beforeupdate: 更改前

updated: 更改

beforeDestroy: 销毁前

destroyed: 销毁

小程序的钩子函数:

onLoad: 页面加载

onShow: 页面显示

onReady: 页面初次渲染完成

onHide: 页面隐藏

onUnload: 页面卸载

vue一般会在created或者mounted中请求数据，而在小程序，会在onLoad或者onShow中请求数据

vue动态绑定一个变量的值为元素的某个属性铅碰的时候，会在变量前面加上冒号：

小程序绑定某个变量的值为元素属性时，会用两个大括号括起来

vue使用v-if 和v-show控制元素的显示和亏激粗隐藏

小程序使用wx-if和hidden控制元素的显示和隐藏

vue使用v-on:event绑定事件，或者使用@event绑定事件，@event.stop阻止事件冒泡

小程序用bindtap(bind+event)，或者catchtap(catch+event)绑定事件，阻止事件冒泡

vue中如下:

小程序中如下：

vue中的表单元素上加v-model，然后再绑定data中对应的值

小程序中通过this.setData({key:value})将表单上的值赋值给data中的对应值

vue中需要在触发事件的方法中，把需要传递的数据作为形参传入

小程序中需要将参数作为属性值，绑定到元素上的data-属性上，然后在方法中，通过e.currentTarget.dataset.*的销镇方式获取，从而完成参数传递

微信小程序的购物车功能

在商品列表页

index.wxml

中，给下单按钮绑定一个添加购物车的事件

addCart

，使用

catchtap

是不会冒泡，同时传入

data-item

，当前的商品，代码如下所示：

1

<view class="order" catchtap="addCart" data-item="{{ item }}">下单</view>

在

index.js

中，在

Page

中，定义

addCart

事件。对此，可以分析一下当点击按钮以后添加购物车的逻辑：

拿到点击要添加入到购物车的商品

判断该商品在不在购物车里面

如果不在, 把该做腔念商品添加到购物车里面, 并且新加一个字段

num = 1

如果在，修改改商品的

num

值 累加

在

addCart

中，第一步拿到该商品，通过

e.currentTarget.dataset

获取。第二步，判断该商品在不在购物车里面，根据

_id

尝试从购物车里面获取数据，看能不能获纯困取的到。使用

try...catch

，在有值的情况下，把购圆雀物车里面的该商品的

num

值累加

，并且进行下单成功的提示；在没有值，把商品添加到购物车里面，并且进行下单成功的提示，最后调用

setTabBar()

方法修改底部购物车

bind事件绑定不会阻止冒泡事件向上冒运配泡

catch事件绑定可以阻止冒泡事件向上冒泡

当点击子集的 catchtap='child' 事件之后阻止冒简皮泡事件向上冒泡，所以不会触旁咐指发 bindtap='father'

---