案例主要部分：

創(chuàng)建一個(gè)Vue實(shí)例
通過v-for指令渲染產(chǎn)品數(shù)據(jù)
使用Filter對金額和圖片進(jìn)行格式化
使用v-on實(shí)現(xiàn)產(chǎn)品金額的動(dòng)態(tài)計(jì)算
綜合演示

創(chuàng)建一個(gè)完整的Vue實(shí)例

html:

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

我們在js文件中創(chuàng)建vue實(shí)例：
這是一個(gè)完整的Vue實(shí)例：

var app = new Vue({
  el: "#app",
  data: {
    title: 'Hello Vue',
  },
  filter: function () {
    // 局部的過濾器
  },
  mounted: function () {
    // 頁面加載完成,我們可以做的操作?？梢詤⒁奦ue的生命周期。
  },
  methods: {
    add: function () {
      
    }
  }
});

el就是我們這個(gè)Vue實(shí)例要監(jiān)聽的范圍。一般是綁定一個(gè)Dom對象的id。
data 就是我們的模型。
methods: 事件的方法。比如我們的監(jiān)聽的DOM對象中有一個(gè)方法，那么我們就需要在methods中添加那個(gè)方法。
filter：這個(gè)是局部的實(shí)例。

mounted中調(diào)用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";
    }

  }
});

注意：上面的實(shí)例說明了vue對象.data.xxx我們直接可以使用vue對象.xxx就可以訪問到。