我的博客

Goods点击加减实现修改数量的原理Goods点击增加实现实例Goods点击减少实现实例Footer计算商品总数量moreprops:{//商品id值，将来，使用EventBus方案，把数量传递到App.vue的时候，需要通知App组件，更新哪个商品的数量id:{default:1计算勾选商品的总数量//计算属性//已勾选商品的总数量total(){},定义勾选商品数量属性props: {all:{default:0},渲染到Footer组件中-- 结算按钮 -->

Goods组件中导入Counter组件设置Counter组件的数量more定义num属性props:{//接收到的num数量值num:{default:1渲染num值。

App.vue中计算勾选商品的总价格定义子组件Footer中的商品总价格将App.vue中商品的总价格传递给Footer显示moreprops: {isFull: {},amount:{default:0},

导入Footer子组件定义fullState计算属性把全选状态传递给Footer子组件实现全选功能more当Goods中的所有商品全部选中时，Footer.vue中的全选按钮才被选中在App.vue中通过计算属性computed，计算Goods中商品按钮的状态props:{isFull:{监听checkbox状态改变事件发送自定义事件methods: {},

如何修改商品的勾选状态自定义state-change事件修改对应商品的勾选状态more在子组件中，要监听复选框状态变化的事件。拿到最新的勾选状态只要复选框的勾选状态发生变化，会自动触发change事件当监听到勾选状态变化之后，应该立即把最新的状态，通过自定义事件的形式，发送给父组件。

Goods.vue中props属性对比Goods.vue中属性使用对比App.vue中父向子传值对比more。

为Goods组件封装商品价格price属性为Goods组件封装商品选中状态state属性moreprops:{//商品价格price:{default:0,props:{//商品勾选状态state:{

循环渲染Goods组件为Goods组件封装title属性为Goods组件封装pic属性moreprops:{//商品标题title:{props:{//商品标题title:{},//商品图片pic:{

项目导入axios HTTP 库axios请求数据列表将请求到的数据转存到data中moreAxios是一个基于promise 的 HTTP 库，可以用在浏览器和 node.js中methods: {//封装请求列表数据的方法//调用axios的get方法，请求列表数据data() {return {//用来存储购物车的列表数据，默认为空数组list: [],},

初始项目预览最终项目预览more。

some循环every循环reduce的用法more。

文本框和按钮按需展示功能实现了解this.$nextTick的应用场景updated为啥不行more。

在本组件内部修改count的值在父组件内修改子组件的count值more导入Left.vue组件注册组件Left,渲染Left.vue组件--渲染Left-->

什么是ref引用ref引用示例moreref用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用每个vue的组件实例上，都包含一个$refs对象，里面存储着对应的DOM元素或组件的应用默认情况下，组件的$refs指向一个空对象。

前言Vue自从发布以来就一直受到前端开发人员的热爱，而除了一些本身优秀的特征之外，还有就是丰富的插件和工具的支持和更新。本文主要讲述Vue环境搭建。 内容包含：node.js环境（npm包管理器） vue-cli 脚手架构建工具 cnpm npm的淘宝镜像Vue搭建第一步 node环境安装下载地址：https://nodejs.org/en/或者http://node...