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:标题
共有条评论 网友评论