Vue - 购物车案例 - 创建Vue实例

案例主要部分：

创建一个Vue实例
通过v-for指令渲染产品数据
使用Filter对金额和图片进行格式化
使用v-on实现产品金额的动态计算
综合演示

创建一个完整的Vue实例

html:

<div id="app">
  <a @click="add"></a>
</div>

我们在js文件中创建vue实例：
这是一个完整的Vue实例：

var app = new Vue({
  el: "#app",
  data: {
    title: 'Hello Vue',
  },
  filter: function () {
    // 局部的过滤器
  },
  mounted: function () {
    // 页面加载完成,我们可以做的操作。可以参见Vue的生命周期。
  },
  methods: {
    add: function () {
      
    }
  }
});

el就是我们这个Vue实例要监听的范围。一般是绑定一个Dom对象的id。
data 就是我们的模型。
methods: 事件的方法。比如我们的监听的DOM对象中有一个方法，那么我们就需要在methods中添加那个方法。
filter：这个是局部的实例。

mounted中调用methods中的方法：

var app = new Vue({
  el: "#app",
  data: {
    title: 'Hello Vue',
  },
  filter: function () {
    // 局部的过滤器
  },
  mounted: function () {
    // 页面加载完成,我们可以做的操作
    this.change_title();
  },
  methods: {
    add: function () {
      alert("add");
    },

    change_title: function () {
      this.title = "new title";
    }

  }
});

注意：上面的实例说明了vue对象.data.xxx我们直接可以使用vue对象.xxx就可以访问到。