在Webstorm中用 javascrip实现组件版淘宝购物车作业要求本地data中定义假数据，用来模拟数据加载。使用Vue指令完成页面数据渲染。完成数量步进器组件开发，实现数据更改同时将数据传递给父级组件（商品组件）。完成商品组件开发，实现展示某一条商品数据，同时定义自定义属性接收一条商品数据并展示。完成总价格跟随商品选择动态计算，动态减少增加

这是一道比较复杂的问题，需要一步一步来实现。我会尽量详细地解答您的问题，但如果您对某些部分不太熟悉的话可能需要花点时间去学习一下。以下是一个可能的实现方案：

1. 定义假数据

我们可以在Vue组件中定义一个本地的数据对象，用来模拟从服务器端获取的数据。这个数据对象可以是一个数组，每个元素表示一个商品的信息，包括名称、价格、数量等等。例如：

data() {
  return {
    products: [
      {
        id: 1,
        name: '商品1',
        price: 10.0,
        quantity: 1
      },
      {
        id: 2,
        name: '商品2',
        price: 20.0,
        quantity: 2
      },
      // ...
    ]
  }
}

2. 使用Vue指令渲染页面

我们可以使用Vue指令（如`v-for`、`v-bind`等）来将商品数据渲染到页面上。例如，我们可以使用`v-for`指令来遍历商品数组，并将每个商品的信息展示出来：

<div v-for="(product, index) in products" :key="product.id">
  <div>{{ product.name }}</div>
  <div>{{ product.price }}</div>
  <div>{{ product.quantity }}</div>
  <!-- 其他展示商品信息的代码 -->
</div>

3. 实现数量步进器组件

我们可以编写一个数量步进器组件，用来让用户增加或减少商品的数量，并将更新后的商品数量传递给父组件。这个组件可以包含两个按钮和一个显示数量的输入框，例如：

<template>
  <div>
    <button @click="decrease">-</button>
    <input type="text" :value="quantity" @input="updateQuantity">
    <button @click="increase">+</button>
  </div>
</template>

<script>
export default {
  props: {
    quantity: {
      type: Number,
      required: true
    }
  },
  methods: {
    decrease() {
      if (this.quantity > 1) {
        this.$emit('update:quantity', this.quantity - 1)
      }
    },
    increase() {
      this.$emit('update:quantity', this.quantity + 1)
    },
    updateQuantity(event) {
      const newQuantity = parseInt(event.target.value)
      if (!isNaN(newQuantity) && newQuantity >= 1) {
        this.$emit('update:quantity', newQuantity)
      }
    }
  }
}
</script>

在商品组件中，我们可以使用这个步进器组件来让用户更改商品的数量，并将更新后的数量传递给父组件：

<template>
  <div>
    <div>{{ product.name }}</div>
    <div>{{ product.price }}</div>
    <div>
      <quantity-stepper :quantity.sync="product.quantity"></quantity-stepper>
    </div>
    <!-- 其他展示商品信息的代码 -->
  </div>
</template>

<script>
import QuantityStepper from './QuantityStepper.vue'
export default {
  props: {
    product: {
      type: Object,
      required: true
    }
  },
  components: {
    QuantityStepper
  }
}
</script>

4. 实现商品组件

我们可以编写一个商品组件，用来展示一条商品的信息，并将这条商品的数据以自定义属性的形式传递给这个组件。这个组件可以使用`props`接收商品数据，并在组件内部展示这些数据，例如：

<template>
  <div>
    <div>{{ product.name }}</div>
    <div>{{ product.price }}</div>
    <div>{{ product.quantity }}</div>
    <!-- 其他展示商品信息的代码 -->
  </div>
</template>

<script>
export default {
  props: {
    product: {
      type: Object,
      required: true
    }
  }
}
</script>

在父组件中，我们可以使用`v-for`指令遍历商品数组，并将每个商品的数据传递给商品组件：

<template>
  <div>
    <product v-for="(product, index) in products" :key="product.id" :product="product"></product>
    <!-- 其他展示商品信息的代码 -->
  </div>
</template>

<script>
import Product from './Product.vue'
export default {
  components: {
    Product
  },
  // 其他代码
}
</script>

5. 计算总价格

最后，我们需要实现一个计算总价格的函数，用来根据用户选择的商品计算出购物车中的总价格。这个函数可以遍历商品数组，累加每个商品的价格乘以数量，并将结果保存在一个变量中。例如：

computed: {
  total() {
    let sum = 0
    for (const product of this.products) {
      sum += product.price * product.quantity
    }
    return sum
  }
}

我们可以在页面上展示这个总价格，例如：

<div>总价格：{{ total }}</div>

以上就是一个可能的实现方案。当然，这只是一个大致的思路，具体实现细节还需要根据具体的需求进行调整。