觉得框架的东西没什么好说的，就简单的说一下自己的实现过程吧。
（1）首先设计好自己页面所要展示的内容，webapp是一个单页面应用，这也是vue的好处，非常适合写单页面应用。用v-if指令去控制显示哪一个页面。


（2）因为这只是前端的静态页面，要想模仿更多的后台东西，可以用json文件，所以就将要在页面上显示的信息写在json文件中，然后解析json去获得，解析可以用vue提供的插件vue-resource，代码如下：
//json数据格式
{
"status":1,
"result":{
"list":[
{
"cakeId":"001",
"cakeName":"HappyBirthday",
"cakeImg1":"../images/cake1.jpg",
"cakeImg2":"../images/cake2.jpg",
"cakeImg3":"../images/cake3.jpg",
"cakePrice":80,
"cakeQuantity":0,
"cakeMess":"这是一个水果蛋糕，里面有樱桃，菠萝，橘子等水果"
},
{
"cakeId":"002",
"cakeName":"HappyMarry",
"cakeImg1":"../images/cake2.jpg",
"cakeImg2":"../images/cake4.jpg",
"cakeImg3":"../images/cake3.jpg",
"cakePrice":99,
"cakeQuantity":0,
"cakeMess":"这是一个巧克力蛋糕，里面有樱桃，菠萝，橘子等水果"
}
]
}
}

//解析json代码
//页面加载时的初始化
mounted:function(){
var_this=this;
//读取json文件，获得所有蛋糕信息
_this.$http.get("../json/cakelist.json").then(function(res){
_this.cakelist=res.body.result.list;
}).catch(function(error){
console.log(error);
});
}

vue-resource不但可以发送get请求，还可以发送post等请求，以及jsonp。mounted是vue的一个方法，就相当于js中的onload，页面dom
加载完毕就执行mounted方法。
（3）接下来就是最重要的部分了，控制在页面上显示什么数据，因为vue是数据驱动的，所以只要数据改变页面就会改变，我们根本不需要dom操作。下面是一小部分代码：
//蛋糕图片的轮播动画
animation:function(){
var_this=this;
setInterval(function(){
if(_this.imgFlag==3){
_this.imgFlag=1;
}else{
_this.imgFlag++;
}
},3000);
}

//html代码

这是我代码中的一小部分，只要imgFlag的值变化，页面上的图片就会对应得变化，当然这一切都得益于v-if指令。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！