在AppCan中使用Vue.js开发

在appcan升级到4.0过后新增了一个MVVM的开发模式，对于这种模式底层提供的api实在是有限，而其中最好用的也就属于双向绑定和基于组件开发。同样现在比较流行的AngularJs和Vue.js都具有这样的优势，但是因为angularjs是国外的，对于一些开发者来说文档看起来比较困难，但是Vue.js是国内的框架。在多番尝试之后我毅然决定采用Vue.js来结合AppCan进行开发。

原本还有一些废话想说，算了直接上代码：

首先引入vue.js，关于vue.js可以去vue官网查看

---------------------------html------------------------
<div id="music" >
<div v-for="item in musics" @click="clickEvent(item)" style="overflow: hidden;padding: 10px;border-bottom: #dddddd solid 1px;">
<div style="float:left;">
<img v-bind:src="item.albumpic_small"/>
</div>
<div v-text="item.singername"></div>
<div v-text="item.songname"></div>
</div>

</div>
---------------------------js----------------------
var app = new Vue({
el : '#music',//对应id为music的节点
data : {
musics : []//初始化数据
},
methods : {
init : function() {
var _this = this;//
appcan.ajax({
url : 'http://route.showapi.com/213-4',
type : 'POST',
timeout : 30000,
data : {
showapi_appid : 28250,
showapi_sign :'fdd7cb6d4f404570827c51d336416ce2',
topid : 26
},
dataType : 'json',
beforeSend : function(xhr, type) {
},
complete : function(xhr, status) {
},
success : function(data) {
if (data.showapi_res_code == 0) {//加载数据成功
_this.musics = data.showapi_res_body.pagebean.songlist;
} else {
//加载数据失败
}
},
error : function(e) {
}
});
},
clickEvent : function(item) {
alert(item)
}
}
});

app.init();

Vue.js还有许多强大的功能，有兴趣的话可以继续探索使用，这里只是一个简单入门介绍。

最终效果图：