您好!欢迎来到默认站点! 请登录 注册有礼
首页 新闻资讯 > 研发日志 > JavaScript

Vue的最简化应用

2020-9-16 8:16:00 人评论

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

Vue.js 是什么

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

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

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

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

一、安装

最简单的安装方式就是直接复制vue.js文件到项目文件夹中,并在bob综合客户端app引用他,实测可以与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('请求数据失败!');
            }
        });
    }
}

四、bob综合客户端app模板内容示例

<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>

更新成功即可在bob综合客户端app看到从服务端获取的数据:

示例:

id:1

title:标题

相关资讯

暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?
会员登陆
18004549898
QQ
Mvcms网站管理系统客服QQ:
返回顶部