MVVM前端框架

早开始接触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设置的偶数行背景色没有用。这个我也没有研究出来，可能与生命周期有关吧！感兴趣的同学可以研究一下，研究出来，记得留言告诉我，哈哈~

每天，进步一点点...

猜你喜欢