zoukankan      html  css  js  c++  java
  • 从零开始学习Vue(二)

    思维方式的变化

    • WebForm时代, Aspx.cs 取得数据,绑定到前台的Repeater之类的控件.重新渲染整个HTML页面.就是整个页面不断的刷新;后来微软打了个补丁,推出了AJAX控件,比如UpdatePanel,就不是整个HTML页面渲染了,只是渲染指定的UpdatePanel里面的DOM
    • MVC时代, Controller的Method取得数据,传递到Model或者ViewBag,前台的Razor引擎就是比较纯粹的HTML了,对Model的数据做个循环,就能显示出需要的数据;这个方法方便和设计师合作.通常设计师设计是图片,再切图成CSS/HTML, 取消的控件的概念,整个html就比较清爽了.
    • Jquery的兴起, 你要在页面改变某个元素,你得操心具体的DOM的结构.看下面的代码是不是很熟悉呢?
          $.ajax({
              url: '/api/data/query',
              data: {
                  id: id
              }
          }).done(function(res){
              if(res.code == 200) {
                  var name = res.data.name;
                  $input.val(name);
                  $name_text.text(name);
              }
          })
      
       var params = {name: name};
      
          $.ajax({
              url: '/api/data/save',
              data: params
          }).done(function (res) {
              if (res.code == 200) {
                  $name_text.text(name);
              }
          })

      这种实现的主要问题在于:

      1)在数据变化的时候,必须手工更新DOM,看那两个ajax请求的回调就知道。对这种简单页面可能还好说,要是页面里面包含几十个不同类型的表单控件时,这些页面的更新操作就会变得非常繁杂,而且还容易出错;

      2)缺乏封装,没有体现数据的管理,功能都是直接靠请求与DOM操作实现的,实际上按照面向对象的思路以及职责分离的原则,应该把数据的同步和数据的管理功能单独封装起来,把界面变化的功能也单独封装起来,两部分的内容通过接口或者事件来交互。

  • 相关阅读:
    jdk1.8 操作List<Map> 多个map 具有相同的key 进行分组合并重组数据
    js获取字符中连续的值
    Java线程ABA问题
    Oracle递归查询语句
    Oracle学习笔记表连接(十六)
    Docker For Mac没有docker0网桥
    awk 和 sed (Stream Editor)
    WARNING: firstResult/maxResults specified with collection fetch; applying in memory!
    iptables编写规则
    InnoDB Next-Key Lock
  • 原文地址:https://www.cnblogs.com/zitjubiz/p/6519590.html
Copyright © 2011-2022 走看看