早开始接触MVVM框架的时候，是在学习WPF的时候，后面陆陆续续接触到了很多的前端JS框架，个人觉得大同小异，也没有去研究源代码，所以都停留在使用的阶段。当然对于我来说，使用这些JS框架，最关注的无非就是通过前端JS代码获取后台数据，然后绑定到HTML页面上了。
今天是星期六，花点时间整理了一下AngularJs，与VueJs以及KnockoutJs的简单使用。也可以做一下小小的对比。那么，废话不多说，直接上代码。
本文示例，后台数据通过Asp.Net Web Api提供，前端代码异步请求数据的时候，涉及到跨域的问题，不在这里讨论，跨域的问题已经在Api中配置允许跨域。
AngualrJs简介：
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
注意：angularjs中字符串转json对象的方法 angular.fromJson(response.data);以及异步请求的方法：$http.get("http://10.101.98.197:8080/api/lazyorders/getcategorys")
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="angular.min.js"></script> <style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f1f1f1; } table tr:nth-child(even) { background-color: #ffffff; } </style> </head> <body> <div ng-app="myApp" ng-controller="categorysCtrl"> <div>{{categorys}}</div> <table> <tr ng-repeat="x in categorys"> <td>{{ x.CategoryId }}</td> <td>{{ x.CategoryName }}</td> </tr> </table> </div> <script> var app = angular.module('myApp', []); app.controller('categorysCtrl', function ($scope, $http) { $http.get("http://10.101.98.197:8080/api/lazyorders/getcategorys") .then(function (response) { $scope.categorys = angular.fromJson(response.data); //$scope.categorys = JSON.Parse(response.data); }); }); </script> </body> </html>
运行效果图：
VueJs简介：
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
注意：以下代码演示了两种异步请求的方法，
一种是引入<script src=" vue-resource.min.js"></script>通过this.$http.get方法发起请求
一种是引入<script src="jquery-1.4.1.min.js"></script>通过$.ajax方法发起请求，不管用哪种方法，原理都是通过XMLHttpRequest对象发起的请求，只是各自有各自的封装而已。
另外需要提一下的就是VueJs的实例生命周期钩子：https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery-1.4.1.min.js"></script> <script src="vue.min.js"></script> <script src=" vue-resource.min.js"></script> <style> table, th, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f1f1f1; } table tr:nth-child(even) { background-color: #ffffff; } </style> </head> <body> <div id="app"> <div> {{categorys}}</div> <table> <tr v-for="x in categorys"> <td> {{x.CategoryId}} </td> <td> {{x.CategoryName}} </td> </tr> </table> </div> <script type="text/javascript"> var vum = new Vue({ el:"#app", data:{ categorys:"" }, // created () { // $.ajax({ // url:"http://10.101.98.197:8080/api/lazyorders/getcategorys", // type:"get", // dataType:"json", // success:function(result){ // vum.categorys =JSON.parse(result); // }, // }) // }, methods:{ }, mounted: function () { this.$http.get('http://10.101.98.197:8080/api/lazyorders/getcategorys').then(response => { vum.categorys =JSON.parse(response.data); }, response => { console.log("error"); }); }, }); </script> </body> </html>
运行效果图与angularjs一样的：
KonckoutJs简介：
Knockout是一款很优秀的JavaScript库，它可以帮助你仅使用一个清晰整洁的底层数据模型（data model）即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新（比如：依赖于用户行为的改变或者外部的数据源发生变化），KO都可以很简单的帮你实现，并且非常易于维护。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery-1.4.1.min.js"></script> <script src="knockout.min.js"></script> <style> table, th, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f1f1f1; } table tr:nth-child(even) { background-color: #ffffff; } </style> </head> <body> <div> <div data-bind="text:jsondata"> </div> <table data-bind="foreach:list"> <tr> <td data-bind="text:CategoryId"> </td> <td data-bind="text:CategoryName"> </td> </tr> </table> </div> <script type="text/javascript"> var data = []; var viewModel = { list: ko.observableArray(data), jsondata:ko.observable("knockout"), }; ko.applyBindings(viewModel); $(function () { $.ajax({ type: "get", url: "http://10.101.98.197:8080/api/lazyorders/getcategorys", dataType: "json", success: function (res) { viewModel.jsondata(res); viewModel.list(JSON.parse(res)); } }); }); </script> </body> </html>
运行效果图：细心的同学肯定已经发现了与前面两张效果图不一样的地方------这里的table中的行的背景色都是奇数行设置的颜色，CSS设置的偶数行背景色没有用。这个我也没有研究出来，可能与生命周期有关吧！感兴趣的同学可以研究一下，研究出来，记得留言告诉我，哈哈~
每天，进步一点点...