在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还有许多强大的功能，有兴趣的话可以继续探索使用，这里只是一个简单入门介绍。
最终效果图：