（静态网页时代）：最初的网页是欧洲粒子物理研究所的科学家为了方便查看共享文档和论文，而基于XML语言开发的（我之前还以为先有HTML后又XML，XML是对HTML的补充）。所以前端开发的全局对象是document。当时网页只具备文本图片的显示以及页面的相互跳转hyper link（注意没有表单，因为表单涉及交互）。最初的web，功能单一，开发不复杂。

科普：1990推出HTML；

局限性：有时候只是一部分内容需要改变也需要重新准备一个文档，而且还不能交互。

（动态网页时代）：这个时候PHP、jsp等闪亮登场，使前端网页从静态走向动态。这个时候网页就可以后端脚本语言修改HTML文档的内容，避免哪怕是一点内容改变就需要新建一个网页。同时也实现了交互。

科普：1995年推出PHP；1996年推出CSS；1997年推出JS；

局限性：哪怕改变网页的一小块内容，浏览器也需要重新请求和渲染整个页面。这就导致页面重载巨卡；体验十分扎心。

网页的少年时期

（ajax网页时期）：从1999年开始，ActiveX和XMLHttpRequest的陆续问世，ajax闪亮登场。ajax（异步JavaScript和XML）通过XMLHTTPRequest对象，可以在不重载页面的情况下与web服务器交互数据，再JavaScript的document对象，开发者就可以通过ajax实现网页页面局部内容刷新。这使得网页修改一小块内容，（由于是异步）浏览器响应更快，比之前的体验happy些；

科普：2005年ajax开始流行；

局限性：虽然没有巨卡，但是前后端没分开，每个程序员都是全栈工程师，即搞业务逻辑又搞页面表现；新的问题就是开发效率。页面的 HTML还是通过套模板的方式生成：美工生成HTML模板，程序员用jsp等技术把动态内容添加上去；

（模块化开发）：2011~2014年，模块化思想占主导。2011年，阿里有一款TMS的产品，可以用模块化搭建的思路解决了页面批量生产的问题，当时淘宝商城的双11的活动页面用这款大杀器搭建完成。当时比较流行的模块化协议有KMD（以Kissy为主）、CMD（sea.js为代表），KMD主导了淘宝天猫、Kissy应用，CMD主导了支付宝及外部社区。玉伯在当时前端圈名气高；

还有许多细节，我就不一一赘述了。

网页的现在

（前端工程化）：2009基于Google v8引擎创建的web服务器node.js诞生；npm、webpack；

（前后端分离）：2013年5月，react推出。随着大家对浏览器页面的视觉和交互要求越来越高，套模板的方式已经无法满足需求，表现层开始慢慢迁移到浏览器中，一大批react.js、vue.js的框架崛起，前后端分离了。后端工程师只负责提供接口和数据，专注业务逻辑的实现。前端取到数据后就在浏览器中展示。

科普：ajax实现了无刷新的数据交互、前端路由实现了无刷新的页面跳转。ajax将web page发展成web app，而前端路由给web app增加了更多可能，如单页面应用。

（终端碎片化）：移动端浏览器的发展；小程序；

（领域细分）：小前台（面向消费者端的web与轻APP业务场景）、中后台（面向企业OA等业务场景）、数据可视化、web新的衍生（AR、VR、3D、网友、直播、富导购等）；

网页的未来五年

我也不知道啊，但是肯定是效率上、功能上或者安全上的提升。往性能更好、开发运维更简便的方向上走。同时前端的发展不能只关注网站，其他硬件领域的（量子计算机、5G等）、软件方面的（VR、AI、大数据）都需要关注，毕竟都是相互联系的。

第二章 Vue的基本介绍（Vue实例）

这一章讲在不使用项目构建工具的条件下，安装和引入Vue和特定的调试工具。

正常情况下开发全新的Vue项目，最好使用项目构建工具Vue CLI，它可以快速构建一个“开箱即用”的大型单页应用，并提供优秀的构建配置。

参考：这本书的第二章

Vue的官网：https://cn.vuejs.org/v2/guide/installation.html

我以前写过的vue.js初次使用、JavaScript学习（未完善，参考《JavaScript权威指南》和菜鸟教程）

学习要对比，要学以致用，要知道为什么要使用vue.js。通过用JavaScript实现一遍，再用vue.js实现一遍，两者对比，才能知道其中的对比在哪里。而对比的地方有显示（文本、图片、列表）、事件处理、表单

安装和引入

1引入vue.js；

可以在官网下载vue.js的开发版本vue.js和生产版本vue.min.js，然后在HTML中用

对于学习的时候，可以用cdn；

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

对于用Vue构建大型应用时推荐用NPM（node包管理工具）；

2安装Vue devtools；

在Chrome浏览器上安装Vue devtools拓展程序，这个程序可以帮助我们查看Vue组件和全局状态管理器vuex中记录的数据。

有条件的在Google web store搜索下载；没条件的用git或npm下载，然后手动安装；

Vue实例介绍

每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的。如：

<body>
<div id="app">
  <h1>{{ title }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app', // mount到DOM上
    data () {
      return {
        title: 'Hello World'
      }
    }
  })
</script>
</body>

在这个实例中，初始化了带title数据的vm对象以及将其绑定到ID为APP的DOM节点上。

如果不引用vue.js，JavaScript如何实现这种数据绑定呢？我猜应该是用DOM操作；

这样使用的好处在哪？

拓展了解：Vue实例

每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的。

有种感觉是，vue.js实例就好像是jQuery.js中的选择器加强版。它不仅仅绑定元素的id、class、类型、属性、属性值,还绑定数据。数据改变，绑定的视图里的数据也跟着变。

jQuery的使用我感觉就是一个选择器一个事件，最后就是方法；操作的方法就是用选择器选择元素，然后根据事件执行方法；缺点就是每次都要选择。修改元素要自己用函数去修改。

vue.js的使用我感觉精华在这个绑定上，这个绑定不光绑定元素，还绑定了数据和方法，这就很灵性了。~~首先建一个Vue实例，然后用el选项指定挂载目标（属性值仅限于CSS选择器和DOM节点对象），最后data方法中返回~~

第三章 Vue的模板语法（指令）

vue.js使用HTML的模板语法，允许开发者声明式地将DOM绑定到底层Vue实例的数据。

vue.js的核心是运行采用简洁的模板语法来声明式地将数据渲染进DOM的系统，集合响应式，当应用状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。如果足够熟悉虚拟DOM并且偏爱JavaScript的原始力量，可以不用模板，直接写渲染（render）函数，使用可选jsx语法。

提取关键信息就是vue.js的模板语法是使用虚拟DOM和JavaScript来实现的。说到这，我发现我之前学的jQuery和这个好像，jQuery是用DOM和JavaScript来实现模板语法。我猜关键可能就在这个虚拟DOM上了，jQuery的缺点应该就是DOM的使用次数很多，也许用了虚拟DOM可以智能计算重新渲染组件的最小代价并应用到DOM操作上。所以可以理解为vue.js是jQuery.js的升级版。vue.js的本质就是用到虚拟DOM的JavaScript库。

双向绑定用的指令

v-model指令：为可输入元素创建双向数据绑定。类似jQuery中的选择器。选择元素。

事件绑定用的指令

v-on指令：监听DOM事件。类似jQuery的事件响应。

插值绑定与属性绑定用的指令

v-bind指令：类似jQuery的DOM方法。

渲染用的指令

v-if指令：条件渲染

v-show指令：也可以用于条件渲染，但只能渲染元素的CSS属性：display。那么v-show用于什么呢。以后懂了再补上答案。

v-for：循环渲染

第四章 Vue实例的常用（选项）

数据与方法相关的选项

data选项：可接受的类型有对象和函数两种。

props选项：属性选项，可以用其为组件为组件注册动态特性。用于业务大部分特性都一致，但部分有差异。可以是代码好复用些。

methods选项：方法选项。顾名思义。

computed选项：计算属性。初衷是减轻模板上的业务负担，当数据链上出现复杂衍生数据时，用这个选项设置可以更易维护地使用它。

watch选项：观察属性，使用侦听属性。

DOM渲染相关的选项

el选项：指定Vue实例的挂载目标，属性值仅限于CSS选择器和DOM节点对象。

render选项：渲染选项。

template选项：模板选项。获取实例模板（指定或创建），与el、render选项功能一致。

封装复用相关的选项

filters选项：过滤器选项。定义当前组件或实例作用域中可用的过滤器。

directives选项：自定义指令选项。

components选项：组件选项。用于为组件注册从外部引入的组件。应用场景是自定义组件和引入第三方库中的组件。

mixins选项：混入选项。用于注册在外部封装好的代码，不过不如组件一样成体系，但是更灵活地分发组件中一些可复用的功能。

created选项与mounted选项：待定。书上还说这是钩子函数，一些迷。

第五章 Vue内置组件

组件是可复用的Vue实例，且带有一个名字。因为组件是可复用的Vue实例，所以与new Vue接受相同的选项，如data、computed、watch、methods以及生命周期钩子等。唯一例外的是el选项，这是根实例特有的选项。

下面要讲的是用Vue内置的组件。这个类似jQuery里的切换页面和过渡效果。

组件服务

动态组件：某些常见需要我们动态切换页面部分区域的视图，这个时候可以使用component组件。

分发内容：通过props选项，组件可以接受多态的数据，如果希望组件还能接受多态的DOM结构，可以使用slot组件。

组件的缓存：keep-alive组件可以缓存一些非动态的组件实例。

过渡效果

单节点的过渡：transition组件

多节点的过渡：transition-group组件，可以实现列表过渡

第六章 Vue项目化

一个完整的前端开发环境应该具备预编译模板、依赖注入、合并压缩资源、分离开发和生产环境以及提供一个模拟的服务端环境等功能。

Vue脚手架：Vue CLI

是Vue官方提供的构建工具，五分钟就可以搭建一个完整的Vue应用。

前端路由：Vue router

ajax实现了无刷新的数据交互、前端路由实现了无刷新的页面跳转。ajax将web page发展成web app，而前端路由给web app增加了更多可能，如单页面应用。

Vue router是官方提供的路由管理器，致力于简化单页面应用的构建。

状态管理：Vuex

对于小型应用来说，完全没必要引入状态管理，因为这会带来更多开发成本。但是当应用复杂度越来越高，状态管理也越发重要起来。

官网提供的状态管理器为vuex，用于管理分散在Vue各个组件中的数据。

总结：

今天暂时按照《vue.js从入门到项目实战》梳理了一下Vue的知识点。

重点在第二、三、四章所讲的Vue实例与Vue模板语法。

第一章的网页发展还挺有意思，无古不成今，参考网页的发展既可以知道网页技术栈的形成，又可以看网页未来如何发展。

第五章讲组件的使用；我等把模板语法用熟练后再啃，现在先留个印象。

第六章将Vue项目化。我明天结合实战理解，先留个印象。

今天熟练Vue的基础知识还是有收获的。果然对着jQuery来学Vue可以更容易理解。

本人才疏学浅，许多内容请辩证理解。后期会不断更新。

更新地址：Vue的基础知识

更多内容请关注：CSDN、GitHub