vue 学习心得
2017-12-08 本文已影响7人
warryy
最大思想:vue 最大的特点就是数据驱动,所以一定要在写项目之前好好思考一下怎样能充分发挥这个特点
----引用自亲爱的zhuo哥教导
bugs:
v-if:(vue 点透)
用 vue 写了一个小页面如下:
页面2
两个页面里面的元素用同一个符号变量
cwShow
作为 v-if
的判断条件来渲染,及页面1和页面2不同时展示。页面1常用语按钮及页面2右上角关闭按钮或页面2发送按钮或页面2常用语标题会改变 cwShow
的真假值从而在两个页面中切换。
问题情景描述:
- 点击页面2中x或常用语标题,页面1出现,伴随页面1中左下角语音按钮事件发生。
- 点击页面2中发送按钮,仅页面1出现。
- 更换页面1中底部按钮顺序,点击页面2中x或常用语标题,页面1出现,伴随页面1中左下角按钮事件发生。
- 在页面1底部按钮前加上一个没有事件的元素,点击页面2中x常用语标题,页面1出现,伴随页面1中右下角按钮事件发生。
- 将页面1中
v-if
换为v-show
, 情况1, 3, 4,全部像情况2一样。
思考原因:
在页面2中点击常用语标题一栏内的按钮,页面1在页面关闭瞬间重新渲染,在点击瞬间发生点透,实际点击到了页面1中的元素。(点击事件有一点延迟)。
佐证原因:
页面2点击事件加上定时函数,情况1, 3, 4不会发生。
解决方法:
将页面1中v-if
换为v-show
。