小白的vue学习笔记
vue随记
xyhanzhuangzhuang
这个作者很懒,什么都没留下…
展开
-
Vue组件:模拟购物车
表单由三个部分组成:表单头部、产品清单、产品总价 1、表单使用组件shop_list构建 shop_list 组件中用到的方法有: sum(),用于计算出产品清单的合计价格 2、其中产品清单的每一行可直接组件shop_item,利用v-for进行渲染,故可在组件shop_list中嵌套组件shop_item 组件shop_item中用到的方法有: 点击 + 按钮调用 add(),增加产品数量,且更新该项产品总价 点击 - 按钮调用 reduce(),减少产品数量(当产品数量等于0时,不再递减),且更新该.原创 2020-06-03 17:27:20 · 219 阅读 · 0 评论 -
vue自定义组件之子组件向父组件传递数据--$emit
1、创建一个组件xy,带有两个button 2、在子组件中设置data:count初始值为0; 3、两个method:add、reduce 4、点击第一个按钮时,调用add(),使count++,同时利用this.emit将count值传递给父组件5、点击第二个按钮时,调用reduce(),使count−−,同时利用this.emit将count值传递给父组件 5、点击第二个按钮时,调用reduc...原创 2020-04-11 16:45:27 · 170 阅读 · 0 评论 -
vue.js小练习之计算器
方法1: 点击button,调用对应method:submit(),获取计算结果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0...原创 2020-04-01 16:14:38 · 146 阅读 · 0 评论 -
vue.js小练习之跑马灯
跑马灯主要步骤: 1、利用substring(0,1)截取第一个字符 2、利用substring(1)截取剩余字符 3、拼接步骤2+步骤3的字符 4、设置定时器setInterval,重复步骤1、2、3即可 5、注意定时器的清除 vue.js小练习之跑马灯 ...原创 2020-04-01 15:37:37 · 142 阅读 · 0 评论