静态页面

 

　　最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。

 

　　异步刷新，操作DOM

 

　　1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言，随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。

 

　　ajax盛行：2005年开始，ajax逐渐被前端开发人员所重视，因为不用刷新页面就可以更新页面的数据和渲染效果。此时的开发人员不仅仅要编写HTML样式，还要懂ajax与后端交互，然后通过JS操作Dom元素来实现页面动态效果。比较流行的框架如Jquery就是典型代表

 

　　MVVM，关注模型和视图–相当于后端的MVC，但是前端的MVVM比MVC强大

 

　　2008年，google的Chrome发布，随后就以极快的速度占领市场，超过IE成为浏览器市场的主导者。

 

　　2009年，Ryan Dahl在谷歌的Chrome V8引擎基础上，打造了基于事件循环的异步IO框架：Node.js。

 

　　基于时间循环的异步IO单线程运行，避免多线程的变量同步问题JS可以编写后台diamante，前后台统一编程语言

 

　　node.js的伟大之处不在于让JS迈向了后端开发，而是构建了一个庞大的生态系统。

 

　　2010年，NPM作为node.js的包管理系统首次发布，开发人员可以遵循Common.js规范来编写Node.js模块，然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统

 

　　随后，在node的基础上，涌现出了一大批的前端框架:

 

　　MVVM模式

 

　　M：即Model，模型，包括数据和一些基本操作V：即View，视图，页面渲染结果VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

 

　　在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中

 

　　双向绑定

 

　　而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：（双向绑定）

 

　　只要我们Model(数据)发生了改变，View（页面）上自然就会表现出来。当用户修改了View，Model中的数据也会跟着改变。

 

　　把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。

 

　　注：所有的获取页面元素或者给页面元素赋值的操作都是DOM操作

 

　　可能会面临的面试题：

 

　　面试题1：解释一下MVVM？

 

　　M：model数据层

 

　　V：view视图层

 

　　VM：将model层和view层绑定在一起的层，这一层vue已经自动完成好了

 

　　面试2：MVC和MVVM的区别是什么？

 

　　在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。

 

　　而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

 

　　只要我们Model发生了改变，View上自然就会表现出来。当用户修改了View，Model中的数据也会跟着改变。

 

　　Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

 

　　渐进式：

 

　　1 我们可以像使用jQuery一样，使用vue – 熟悉vue的基础语法

 

　　2 采用node的方式去使用vue --企业级开发模式 – 掌握vue企业级开发模式

 

　　前端框架三巨头：Vue.js（150k）、React.js（118k）、AngularJS（45k），vue.js以其轻量易用著称，vue.js和React.js发展速度最快，AngularJS已经是老三，而且还在继续下降。

 

　　官网：

 

　　参考：

 

　　Git地址：

 

　　尤雨溪，Vue.js 创作者，Vue Technology创始人，致力于Vue的研究开发。

 

　　总结：

 

　　1 vue是一个mvvm框架，就是后端的MVC框架，但是功能更强大

 

　　2 vue的最全面的文档是官方文档

 

　　3 vue现在很火

 

　　创建一个maven工程：

 

　　名字位置找到自己的地方即可：

 

　　下载地址：

 

　　使用CDN

 

　　或者也可以直接使用公共的CDN服务：

 

　　或者：

 

　　只用一个即可。

 

　　1.HTML模板

 

　　在vue-demo目录新建一个HTML：

 

　　在hello.html中，我们编写一段简单的代码：

 

　　h2中要输出一句话：xx 非常帅。效果图如下所示：

 

　　2.vue渲染

 

　　然后我们通过Vue进行渲染：

 

　　首先通过 new Vue()来创建Vue实例

 

　　然后构造函数接收一个对象，对象中有一些属性：

 

　　el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个divdata：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中

 

　　name：这里我们指定了一个name属性

 

　　页面中的元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。

 

　　打开页面查看效果：

 

　　更神奇的在于，当你修改name属性时，页面会跟着变化：

 

　　此处可以改变name的值，当name的值改变的时候，整个数据也都会发生改变；

 

　　3.双向绑定

 

　　方向一：当data中的数据发生改变的时候，页面的显示也会自动改变

 

　　方向二：当页面的 文本框的值 发生改变的时候，data中的属性也会对应发生改变

 

　　我们对刚才的案例进行简单修改：

 

　　我们在data添加了新的属性：在页面中有一个元素，通过与进行绑定。同时通过在页面输出

 

　　效果：

 

　　我们可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。

 

　　input与num绑定，input的value值变化，影响到了data中的num值页面与数据num绑定，因此num值变化，引起了页面效果变化。

 

　　没有任何dom操作，这就是双向绑定的魅力。

 

　　4.事件处理

 

　　我们在页面添加一个按钮：

 

　　这里用指令绑定点击事件，而不是普通的，然后直接操作num普通onclick事件是无法直接操作num的。

 

　　效果：

 

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

 

　　在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：、、 等

 

　　el : 我们可以通过el属性来指定。

 

　　例如一段html模板：

 

　　然后创建Vue实例，关联这个div

 

　　这样，Vue就可以基于id为的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

 

　　当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。

 

　　html：

 

　　js:

 

　　name的变化会影响到的值input中输入的值，也会导致vm中的name发生改变

 

　　Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用。

 

　　html:

 

　　js写法一：

 

　　js写法二：

 

　　回顾：servlet的生命周期–生老病死

 

　　生命周期函数–钩子函数：当处于Vue实例处于某个阶段的时候，会自动触发该阶段的钩子函数

 

　　1.生命周期

 

　　每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

 

　　生命周期：

 

　　生命周期的流程：–每个流程对应一个函数，当vue处于某个阶段的时候，会自动触发该阶段的函数

 

　　1 初始化前 --BeforeCreate

 

　　2 初始化完成 —发送ajax --created

 

　　3 双向数据绑定前/挂载前 —BeforeMount

 

　　4 双向数据绑定完成/挂载完成 --Mounted

 

　　5 更新前 --BeforeUpdate

 

　　6 更新完成–updated

 

　　7 销毁前–BeforeDestroy

 

　　8 销毁完成–Destroyed

 

　　2.钩子函数

 

　　例1：created代表在vue实例创建后；

 

　　我们可以在Vue中定义一个created函数，代表这个时期的构造函数：

 

　　html:

 

　　js:

 

　　结果：

 

　　例2：

 

　　预览：

 

　　总结：

 

　　1: vue的生命过程很丰富的，每个过程都有要完成的事情

 

　　2: created的生命周期：vue已经创建完成，数据已经有了—>通过ajax向后台往后操作就是进行双向数据绑定

 

　　3:

 

　　1.beforeCreate：初始化前/创建前，此时data中的数据还没有初始化2.created：初始化完成/创建完成,data中的数据已经初始化3.beforeMount：双向绑定前4.mounted：双向绑定完成，页面会显示data中的数据

 

　　5.beforeUpdate：更新前，此时变量的内容会被更新，但是页面没有变化6.updated：更新完成，此时页面会发生改变7.beforeDestroy:销毁前8.destroyed:销毁完成

 

　　3.this

 

　　我们可以看下在vue内部的this变量是谁，我们在created的时候，打印this

 

　　控制台的输出：

 

　　总结：

 

　　this就是代表当前的vue对象;

 

　　什么是指令？

 

　　指令 (Directives) 是带有  前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

 

　　例如我们在入门案例中的v-model、v-on…，都是指令。

 

　　格式：

 

　　{{表达式}}

 

　　说明：

 

　　该表达式支持JS语法，可以调用js内置函数（必须有返回值）表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;可以直接获取Vue实例中定义的数据或函数

 

　　HTML：

 

　　JS:

 

　　使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的，加载完毕后才显示正确数据，我们称为插值闪烁。

 

　　我们将网速调慢一些，然后试试看刚才的案例：

 

　　刷新页面：

 

　　使用v-text和v-html指令来替代

 

　　作用：用来进行数据呈现的，可以代替{{}}，可以有效的解决插值表达式的闪烁问题

 

　　说明：

 

　　v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

 

　　示例：

 

　　预览：

 

　　并且不会出现插值闪烁，当没有数据时，会显示空白。

 

　　刚才的插值表达式、v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

 

　　既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

 

　　input-textinput-passwordselecttextareacheckboxradiocomponents（Vue中的自定义组件）

 

　　基本上除了最后一项，其它都是表单的输入项。

 

　　Html:

 

　　效果：

 

　　v-on指令用于给页面元素绑定事件。语法：

 

　　v-on:事件名=“js片段或函数名”

 

　　事件绑定可以简写，例如可以简写为

 

　　示例：

 

　　表示键盘按下事件。

 

　　鼠标移入和移出事件区域事件。

 

　　概念：

 

　　当事件发生后，这个事件就要开始传播(从里到外或者从外向里)，会触发所有父层或者子层的方法。

 

　　案例：

 

　　Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或event.stopPropagation()。

 

　　.stop // 停止触发，阻止冒泡修饰符

 

　　.prevent // 阻止默认事件发生，阻止事件默认行为

 

　　.capture // 捕获

 

　　.self //只点自己身上才运行

 

　　.once // 只执行一次

 

　　案例1：

 

　　案例2：

 

　　Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

 

　　遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。

 

　　语法：

 

　　items：要遍历的数组，需要在vue的data中定义好。item：迭代得到的数组元素的别名

 

　　示例：ul显示

 

　　效果：

 

　　示例：表格显示 html代码：

 

　　效果：

 

　　在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

 

　　语法:

 

　　items：要迭代的数组item：迭代得到的数组元素别名index：迭代到的当前元素索引，从0开始。

 

　　示例:

 

　　效果：

 

　　共同点：都是条件判断

 

　　v-if：移除元素

 

　　v-show：只是简单的加display:none

 

　　v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。

 

　　语法：

 

　　示例：

 

　　效果：

 

　　当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

 

　　示例：筛选出所有性别为女的人

 

　　你可以使用  指令来表示  的“else 块”：

 

　　元素必须紧跟在带  或者  的元素的后面，否则它将不会被识别。

 

　　，顾名思义，充当  的“else-if 块”，可以连续使用：

 

　　类似于 ， 也必须紧跟在带  或者  的元素之后。

 

　　另一个用于根据条件展示元素的选项是  指令。用法大致一样：

 

　　不同的是带有  的元素始终会被渲染并保留在 DOM 中。 只是简单地切换元素的 CSS 属性 。

 

　　示例：

 

　　页面的HTML标签有很多属性，如果属性想获取vue中的data的值，怎么处理？

 

　　假如我们想动态的修改页面元素的属性，比如class属性，这样写是错误的：

 

　　因为插值表达式不能用在属性的值中。

 

　　案例：

 

　　课堂代码：

 

　　可以简写为

 

　　综合案例：下拉列表框改变div样式

 

　　在插值表达式中使用js表达式是非常方便的，而且也经常被用到。

 

　　但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，需要显示在页面，默认的显示方式是：

 

　　如果只想显示年月日呢？

 

　　虽然能得到结果，但是非常麻烦。

 

　　Vue中提供了计算属性，来替代复杂的表达式：

 

　　计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。

 

　　页面效果：

 

　　Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

 

　　axios的github:

 

　　可以用script引入

 

　　引入axios-0.18.0.js

 

　　为方便起见，为所有支持的请求方法提供了别名

 

　　axios.request(config)

 

　　axios.get(url[, config])

 

　　axios.delete(url[, config])

 

　　axios.head(url[, config])

 

　　axios.post(url[, data[, config]])

 

　　axios.put(url[, data[, config]])

 

　　axios.patch(url[, data[, config]])

 

　　【需求】：创建data/user.json文件----获取所有用户

 

　　使用axios读取user.json文件的内容，并在页面上输出内容。

 

　　创建data目录，创建user.json