用vue写一个购物小程序

Vue.js是一种流行的JavaScript框架，用于构建交互式Web应用程序。下面是一个简单的购物小程序的Vue.js实现。

首先，我们需要创建一个Vue实例：

var app = new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: '商品1', price: 10 },
      { id: 2, name: '商品2', price: 20 },
      { id: 3, name: '商品3', price: 30 }
    ],
    cart: []
  },
  methods: {
    addToCart: function(item) {
      this.cart.push(item);
    },
    removeFromCart: function(item) {
      var index = this.cart.indexOf(item);
      if (index > -1) {
        this.cart.splice(index, 1);
      }
    }
  },
  computed: {
    totalPrice: function() {
      var total = 0;
      for (var i = 0; i < this.cart.length; i++) {
        total += this.cart[i].price;
      }
      return total;
    }
  }
});

在这个Vue实例中，我们有两个数据对象：items和cart。items是一个包含商品信息的数组，cart是一个空的购物车数组。我们还定义了一些方法：addToCart和removeFromCart，用于将商品添加到购物车或从购物车中删除商品。我们还定义了一个计算属性：totalPrice，用于计算购物车中所有商品的总价。

接下来，我们需要在HTML中使用Vue实例：

<div id="app">
  <ul>
    <li v-for="item in items">
      {{ item.name }} - {{ item.price }}
      <button v-on:click="addToCart(item)">加入购物车</button>
    </li>
  </ul>
  <h2>购物车</h2>
  <ul>
    <li v-for="item in cart">
      {{ item.name }} - {{ item.price }}
      <button v-on:click="removeFromCart(item)">从购物车中删除</button>
    </li>
  </ul>
  <p>总价：{{ totalPrice }}</p>
</div>

在这个HTML中，我们使用v-for指令来循环遍历商品列表，并且使用v-on指令来绑定addToCart和removeFromCart方法。我们还使用计算属性totalPrice来显示购物车中所有商品的总价。

这个小程序实现了简单的购物功能，但是还有许多可以改进的地方，例如添加商品数量、结算等等。希望这个例子可以帮助你开始使用Vue.js构建Web应用程序。