Vue.js 是什么

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。
起步

前期只采用最简单的方式来应用Vue，意在替代商城系统的模板语法，使模板页面更具有通用性，只要掌握Vue的简单语法即可完成系统模板页面的编辑工作。

一、安装

最简单的安装方式就是直接复制vue.js文件到项目文件夹中，并在页面引用他，实测可以与Jquery共存

<script type="text/javascript" charset="utf-8" src="/scripts/vue/vue.min.js"></script>

二、服务端支持

Mvc可以直接由控制器返回Json格式内容（示例："{items:[{"id":1,"title":"标题"}]}"）即可

简单的示例，返回字符串，js端需要做JSON.parse()类型转换：

public ActionResult GetList() {
    List<object> list = new List<object>();
    list.Add(new { id = 1, tiele = "标题" });
    string json = Newtonsoft.Json.JsonConvert.JsonConvert.SerializeObject(list);
    return Content(json);//返回"{items:[{"id":1,"title":"标题"}]}"字符串
}

或者直接返回json对象

public ActionResult GetList() {
    List<object> list = new List<object>();
    list.Add(new { id = 1, tiele = "标题" });
    return Json(list);   
}

三、客户端获取Json数据

方法示例，前期并不想放弃JQuery，所以数据的获取可以仍然采用ajax方法获取：

var service = {
    getList: function (options, callback) {
        $.ajax({
            type: 'post',
            url: '/tools/json_ajax/GetList',
            data: {},//可以添加自定义参数
            success: function (res) {
                var resultObj = JSON.parse(res);
                if (typeof(callback) === 'function') {
                    callback(resultObj);
                }
            },
            error: function () {
                alert('请求数据失败!');
            }
        });
    }
}

四、页面模板内容示例

<div id="app">
    <template v-for="item in items">
        <p>id:{{id}}</p>
        <p>title:{{title}}</p>
    </template>
</div>

五、实例化Vue对象并更新模板数据

<script>
    var vm;
    window.onload = function () {
        vm = new Vue({
            el: '#app',
            data: {
                items:[]
            }
        });
        server.getList({},function(resultObj){
            vm.items = resultObj.items;
        });
    }
</script>

更新成功即可在页面看到从服务端获取的数据：

示例：

id:1

title:标题