案例主要部分：
创建一个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就可以访问到。
