Vue购物车——组件化

需求分析

• 按照组件化方式实现业务需求
  • 标题组件（展示文本）
  • 列表组件（列表展示、商品数量变更、商品删除）
  • 结算组件（计算商品总额）

项目图片展示

实现步骤

• 功能实现步骤
  • 实现整体布局和样式效果
  • 划分独立的功能组件
  • 组合所有的子组件形成整体结构
  • 逐个实现各个组件功能
    • 标题组件
    • 列表组件
    • 结算组件

购物车案例

1. 实现组件化布局

• 把静态页面转换成组件化模式
• 把组件渲染到页面上

 <div id="app">
    <div class="container">
      <!-- 2、把组件渲染到页面上 --> 
      <my-cart></my-cart>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    # 1、 把静态页面转换成组件化模式
    # 1.1  标题组件 
    var CartTitle = {
    
      template: `
        <div class="title">我的商品</div>
      `
    }
    # 1.2  商品列表组件 
    var CartList = {
    
      #  注意点 ：  组件模板必须是单个根元素  
      template: `
        <div>
          <div class="item">
            <img src="img/a.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="img/b.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="img/c.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="img/d.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="img/e.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
        </div>
      `
    }
    # 1.3  商品结算组件 
    var CartTotal = {
    
      template: `
        <div class="total">
          <span>总价：123</span>
          <button>结算</button>
        </div>
      `
    }
    ## 1.4  定义一个全局组件 my-cart
    Vue.component('my-cart',{
    
      ##  1.6 引入子组件  
      template: `
        <div class='cart'>
          <cart-title></cart-title>
          <cart-list></cart-list>
          <cart-total></cart-total>
        </div>
      `,
      # 1.5  注册子组件   
      components: {
    
        'cart-title': CartTitle,
        'cart-list': CartList,
        'cart-total': CartTotal
      }
    });
    var vm = new Vue({
    
      el: '#app',
      data: {
    

      }
    });

  </script>

2、实现 标题和结算功能组件

• 标题组件实现动态渲染
  • 从父组件把标题数据传递过来 即 父向子组件传值
  • 把传递过来的数据渲染到页面上
• 结算功能组件
  • 从父组件把商品列表list 数据传递过来 即 父向子组件传值
  • 把传递过来的数据计算最终价格渲染到页面上

 <div id="app">
    <div class="container">
      <my-cart></my-cart>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
     # 2.2  标题组件     子组件通过props形式接收父组件传递过来的uname数据
    var CartTitle = {
    
      props: ['uname'],
      template: `
        <div class="title">{
     {uname}}的商品</div>
      `
    }
	# 2.3  商品结算组件  子组件通过props形式接收父组件传递过来的list数据   
    var CartTotal = {
    
      props: ['list'],
      template: `
        <div class="total">
          <span>总价：{
     {total}}</span>
          <button>结算</button>
        </div>
      `,
      computed: {
    
        # 2.4    计算商品的总价  并渲染到页面上 
        total: function() {
    
          var t = 0;
          this.list.forEach(item => {
    
            t += item.price * item.num;
          });
          return t;
        }
      }
    }
    Vue.component('my-cart',{
    
      data: function() {
    
        return {
    
          uname: '张三',
          list: [{
    
            id: 1,
            name: 'TCL彩电',
            price: 1000,
            num: 1,
            img: 'img/a.jpg'
          },{
    
            id: 2,
            name: '机顶盒',