前端开发 初步了解Vue与前端历史

淡若清风丶
639 阅读7分钟

前端框架发展过程

第 1 代：纯 HTML 静态时期（90 年代）

      最早 Web 主要被一帮科学家们用来共享和传递信息，全世界的 Web 服务器也就几十台。真正使得 Web 开始流行起来的是 Mosaic 浏览器，这便是曾经大名鼎鼎的 Netscape Navigator的前身。Berners Lee 在 1993 年建立了万维网联盟（World Wide Web Consortium，W3C），负责 Web 相关标准的制定。浏览器的普及和 W3C 的推动，使得 Web 上可以访问的资源逐渐丰富起来。这个时候 Web 的主要功能就是浏览器向服务器请求静态 HTML 信息。

      95 年的时候马云在美国看到了互联网，阿里早先做的黄页也就是把企业信息通过进行HTML 展示的 Web 应用。

      这个时期的前端是很单一的 HTML 页面，大概是这个样子:

image.png

第 2 代：动态内容（93 至 96 年之间）

      这个时期出现了一个技术叫做 CGI（Common Gateway Interface 即：公共网关接口），像 C、C++等语言就可以按 CGI 标准来编写服务端程序，把要返回给浏览器的内容以 print打印输出给 web 服务器，并显示给用户动态的内容。在 1993 年~1996 年有很多这样的网站，甚至很多国内著名的大型网站在 2000 年仍在使用这种技术。

      以下是第 2 代框架大致的示意图：

image.png

第 3 代：WEB 编程脚本语言 ASP/JSP/PHP（97~2000 年）

      这个时期典型的技术有脚本语言 asp、jsp、php。

image.png

第 4 代：分布式企业计算平台（2000~2004 年）

      这时期典型的技术代表是：Java Servlet、Java Server Pages (JSP)、Enterprise JavaBean (EJB )和 ASP.net

image.png

第 5 代：框架横飞的年代：MVC，ORM（2004~2015 年）

      2004 年出现的 Struts 就是当时非常流行的 Java Web 开发的 MVC 框架。视图 View 是数据的 HTML 展现，控制器 Controller 负责响应请求，协调 Model 和 View。Model，View和 Controller 的分开，是一种典型的关注点分离的思想。

      此外，数据访问也逐渐通过面向对象的方式来替代直接的 SQL 访问，出现了 ORM（Object Relation Mapping）的概念，2001 年出现的 Hibernate 就是其中的佼佼者，已经成为 Java 持久层的规范 JPA 的主要参考和实现。更多的全栈框架开始出现，比如 2003 年出现的 Java 开发框架 Spring。

image.png

第 6 代：前端 MVC 框架 Angular、VUE、React（2015~至今）

      其实说是 2015 年是不太准确的，主要是在 2015 年之前像 Angular 也是叫 AngularJS，真正的 Angular2 发布是 2016 年五月正式发布。

      与此同时，VUE 也在 2015 年迎来爆发。

      现在很多框架也叫 MVVM 框架（它是 Model-View-ViewModel 的简写），它其实就是MVC 框架的改进版。

image.png

第 N 代：在未来（大胆的估计一下应该在 2025 年之后有新的技术出现）

      近几年在前端框架上应该不会有太大的改进，更多的是在现有 MVVM 框架上做改进和完善，当前前端框架已趋于稳定，基本上是 Angular、VUE、React 三分天下的局面。

      但是，当下前端的辅助工具，如打包工具、运维工具还是没有完备体系，像 Java 早期手工编译到现在各类很成熟的开发工具，几乎需要 15 年的时间沉淀。相信在未来 5 年时间内，前端需要大量的时间来完善编译类的工具和框架。

      如果在短时间内技术变革太快，企业所付出的成本也会更大，这是违背常规发展的，技术更新太快，企业、人才跟不上也是没用的。

VUE 的发展历史

VUE 的官网网站地址是 cn.VUEjs.org/

image.png

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

      VUE.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，VUE.js 也能完美地驱动复杂的单页应用。

image.png

      尤雨溪在谷歌创意实验室（Google Creative Lab）工作期间，在使用 Angular 的过程中发现 Angular 是一个好东西，于是便开始从 Angular 中抽离一些他平日工作中用到的一些库，封装方便自己使用，开发出了一款轻量框架，最初命名为 Seed。

      2013 年 12 月，这粒种子发芽了，更名为 VUE，版本号是 0.6.0。

      2014.01.24，VUE 正式对外发布，版本号是0.8.0。

      2014.02.25 发布 0.9.0 版本，有了自己的代号：Animatrix，这个名字来自动画版的《骇客帝国》，此后，重要的版本都会有自己的代号。

      2015.06.13 发布 0.12.0 版本，代号 Dragon Ball（龙珠），这一年，VUE 迎来了大爆发。

      同年 VUE 发布了几个核心的库，VUE-router（2015-08-18）、VUEx（2015-11-28）、VUE-cli（2015-12-27），标志着 VUE 从一个视图层库发展为一个渐进式框架。很多前端同学也是从这个版本开始成为 VUE 的用户。

      VUE 的 2.0.0 版本 Ghost in the Shell（攻壳机动队）是第二个重要的里程碑，它吸收了React 的 Virtual Dom 方案，还支持服务端渲染。

      就在不久前，VUE 发布了 2.6.0 Macross（超时空要塞），这是一个承前启后的版本。

      接着应该很快出 3.0 版本了

VUE 的安装和使用

VUE 的官方提供了多种安装方式。

参见：cn.VUEjs.org/v2/guide/in…

第一个 VUE 示例

      为了方便快速入门，在 VUE 使用路由之前的示例中，都是直接

      第一个 VUE 示例，需要做如下步骤：

  • 下载 vue.js 文件，并放到项目中；

  • 创建 HTML 页面，并引入 vue.js；

vue.js 所放入的目录是：/js/vue.js

创建 HTML 页面源代码：VUE 示例.html

以下是第一个 vue 示例 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个 vue 示例 </title>
<script src="../js/vue.js"></script>
</head>

<body>
<div id="app">
    {{msg}}
</div>
<script>
let vue = new Vue({
    el:"#app",
    data:{
        msg:"第一个 vue 示例 "
    }
});
</script>
</body>
</html>

运行结果：

image.png

关键点：

  • 引入 VUE.js
  • 创建一个 HTML 根元素，如 <div id=“app”>;
  • 创建 VUE 实例，new VUE （为了方便调试，可以赋值给一个变量）；
  • 把 VUE 实例挂载到 Dom 元素上，如 el:“#app” （其实有几种挂载方式）；
  • 在 VUE 实例内创建 msg 变量，并赋值；
  • 用花括号直接绑定数据，注意必须在挂载元素以内才有效；

VUE 生命周期

image.png

image.png

beforeCreate: 实例初始化之后，this 指向创建的实例，不能访问到 data、computed、watch、methods上的方法和数据。常用于初始化非响应式变量。

Created: 实例创建完成，可访问 data、computed、watch、methods 上的方法和数据，未挂载到 DOM,不能访问到el属性，el 属性，ref 属性内容为空数组。常用于简单的 ajax 请求，页面的初始化。

beforeMount: 在挂载开始之前被调用，beforeMount 之前，会找到对应的 tempiate，并编译成 render函数。

mounted: 实例挂载到 DOM 上，此时可以通过 DOM API 获取到 DOM 节点，$ref 属性可以访问。

beforeUpdate: 响应式数据更新时调用，发生在虚拟 DOM 打补丁之前。适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。

Updated: 虚拟 DOM 重新渲染和打补丁之后调用，组件 DOM 已经更新，可执行依赖于 DOM 的操作，避免在这个钩子函数中操作数据，可能陷入死循环。

beforeDestroy: 实例销毁之前调用，这一步实例仍然完全可用，this 仍然能获取到实例。常用于销毁定时器、解绑全局事件、销毁插件对象等操作。

Destroyed: 实例销毁后调用，调用后，VUE 实例指示的所有东西都会解绑定，所有的时间监听器会被移除，所有的子实例也会被销毁。

另外，还有几个重要的参数：

methods： 事件方法定义

watch： 监听一个值的变化，然后执行相对应的函数。

computed： 计算属性，也就是依赖其它的属性计算所得出最后的值。

activated、deactivated： 当组件在 keep-alive 内被切换时组件的 activated、deactivated 这两个生命周期钩子函数会被执行（注意：如果没有引用 keep-alive 标签，这两个函数不起作用）。

VUE 实例参数完整写法

<head>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <span>{{msg}}{{price | RMPPrice}}</span>
</div>
<script>

//花括号内是 VUE 实例的参数(不常 用的 不写) 过滤器定义的地 方
Vue.filter("RMPPrice",value => {
    value = value.toFixed(2);
    return value+"元";
});

let vue = new Vue({
    el: "#app",
    
    data: {
        price: 5985200.65500,
        msg: "人民币："
    },
    //实例创建完 成，一 般数据的 初始 化在这里
    created() {
        this.show();
    },

    // 实例挂载完成 ，一般访问 DOM 可以 在这里操 作.如 $ref 访问属性
    mounted(){
    },

    //定义方法 的地 方
    methods: {
        show() {
            console.log('这是 show 函数.')
        }
    },

    //计算属性定义的地 方
    computed:{
    },

    //监听定义的地 方
    watch :{

    }
});
</script>
</body>
avatar
文章
阅读
粉丝