Vue.js搭建移动端购物车界面

本文介绍了如何使用Vue搭建一个移动端购物车界面,最终实现的功能包括:

1. 选择要最终购买的物品
2. 选择每件物品购买的数量
3.  实时更新所选择物品的总价格 

HTML部分

首先给出HTML部分代码和注释,显示了整个界面的结构。

 
  
购物车
  • 商品信息
  • 商品金额
  • 商品数量
  • 总金额
  • 编辑
  • {{ item.productName }}
    赠送:
    {{ item.productPrice |formatMoney}}
    - +
    有货
    {{ item.productPrice*item.productQuantity| money('元')}}
    全选
    取消全选 Item total: {{totalMoney| money('元')}} 结账

    对应的关键注释在代码中给出,下面结合Vue.js的代码,对主要部分进行解释。 

    一、Vue组件基本格式

    一个Vue组件的基本代码如下:

    new Vue({ 
     el:'#app', 
     data: {}, 
     filters: {}, 
     mounted: function() {}, 
     methods: {} 
    }); 
    

    在JS代码中,使用new Vue即可声明一个Vue组件。Vue组件主要包括以下几个字段。
    1.  el字段:el字段用来定义该组件在HTML中的哪个位置生效,需要传入HTML中某个元素的id值。这里传入了#app,表示HTML中id为app的元素内部都是这个Vue组件的作用范围。
    2. data字段:data字段定义了Vue组件中的数据,可能在HTML中进行渲染。在本应用中,商品的价格、名称、图片链接等信息,都是使用Vue组件中data字段内的数据进行渲染的。
    3. filter字段:filter字段是一个过滤器,在本应用中,针对价格等需要格式化的文本,就可以使用filter进行过滤。
    4. mounted字段:mounted字段通常定义一个方法,这个方法将在页面加载完成时自动执行,在React等框架中都有类似的机制。
    5. method字段:method字段用来定义Vue组件中需要用到的方法,这个字段的内容往往是需要投入时间最多的部分,例如页面中选择商品、增加数量等逻辑,都是在这个字段中进行编辑的。
    以上就是一个vue组件的主要组成部分,下面对各个部分功能的代码编写进行简要介绍。 

    二、数据渲染

    数据渲染部分,要渲染的数据都存放在data中。每一个商品的信息都被模拟存储在了cart.json的文件中。我们可以实现数据自动加载,基本思路是:在method字段中定义一个方法,用来加载cart.json中的数据,并将其存放到data字段中定义的对应变量中。在mouted字段中,自动调用这个方法。这样就实现了页面加载完成后自动加载数据。对应的JS代码和注释如下:

    data: { 
      //存放商品json数据信息 
      productList: [] 
     } 
    methods: { 
       //cartView()方法用来加载数据,并将数据存储在这个Vue组件中的productList变量中 
       cartView: function() { 
        var _this = this; 
        //使用vue-resource模块加载数据,类似Jquery中的AJAX,返回数据存放在res.body中 
        this.$http.get("data/cartData.json", {"id":123}).then(function(res) { 
         _this.productList =res.body.result.list; 
         // _this.totalMoney = res.body.result.totalMoney; 
        }); 
    } 
     } 
     mounted: function() {  
      //执行代码放在$nextTick中,保证页面结构加载完毕后再执行函数 
      this.$nextTick(function() { 
       this.cartView();  //使用this调用methods中定义的cartView()方法 
      }) 
     } 
    

    完成了这部分代码,所有商品的数据就存放在了组件中变量名为productList的字段中。
    在前端HTML部分的进行调用,需要使用v-for指令。这个指令用来循环遍历Vue中的数据,代码如下:

    • 烟
      {{ item.productName}}
      赠送:

    通过v-for指令,遍历了变量productList中的数据,并在内部的HTML中调用。利润item.productImage获取对应图片URL地址;item.productName获取商品名称等。这样,就自动生成了一个商品信息列表。

    下一部分将介绍逻辑代码的编写。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    你可能感兴趣的:(Vue.js搭建移动端购物车界面)