Vue.js简单实践

直接上代码，一个简单的新闻列表页面（.cshtml）：

@section CssSection{
    <style>
        [v-cloak] { display: none; }
    </style>
}

<div id="list">
    <ul class="newsList">
        <li class="newsItem" v-for="item in list" v-cloak>
            <a v-bind:href="'/Office/Detail/'+item.ID">
                <div class="newsImg">
                    <img v-bind:src="item.ImageUrl" />
                </div>
                <div class="newsTxt">
                    <p class="newsTitle">{{item.Name}}</p>
                    <p class="newsIntro">{{item.Preface}}</p>
                    <p class="newsTime">{{formatDate(item.CreateTime)}}</p>
                </div>
            </a>
        </li>
    </ul>
    <div class="more" v-if="page < pageCount" id="loadmore" v-on:click="loadMore">
        <a href="javascript:;" class="btnFull">+ 更多</a>
    </div>
</div>

@section ScriptSection{
    <script src="http://cdn.bootcss.com/vue/2.0.7/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#list',
            data: {
                page: 1,
                pageCount: 0,
                list: []
            },
            methods: {
                getData: function () {
                    $.getJSON("/Office/ListData?page=" + app.page, function (data) {
                        app.pageCount = Math.ceil(data.record / 10);
                        app.list = app.list.concat(data.list);
                    })
                },
                formatDate: function (val) {
                    var date = new Date(parseInt(val.replace("/Date(", "").replace(")/", ""), 10));
                    return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDay();
                },
                loadMore: function () {
                    app.page += 1;
                    app.getData();
                    return false;
                }
            }
        });
        app.getData();
    </script>
}