Java菜鸟学习日记37

前端的发展历程

静态网页-网页是死的（网页上的内容不会变化）

动态网页-网页是服务端程序生成的（内容可以随时变化）

前端应用-通过JS和Ajax实现前端程序化（网页可以不依赖或者少依赖于服务端就能实现丰富的功能）

前端原声js-浏览器兼容问题非常严重

前端脚本库-jQuery、prototupe.js、underscore.js

前端框架-backbone、angular、react、vue

前端应用要解决的核心问题

如何把数据显示为页面

数据来自两个方面：服务端、用户填写的

把数据与视图结合在一起的方案：

拼字符串（拼字符串很麻烦）

模版化（数据变化时视图需要重新调用模版引擎生成html，性能差）

双向绑定（数据驱动视图：数据模型变化时视图自动变化，视图变化时，自动更新数据模型）

Vue编程思想

将数据模型通过模版渲染到页面上

数据模型→视图

显示内容

模版插值：{{}}

v-bind:属性名 = “JS表达式”

简写为：:属性名

v-html="JS表达式"：用来显示html内容

简单逻辑

v-if="JS逻辑表达式"：决定了是否渲染

v-else

v-else-if

v-for=“vue for 语法”：循环

监听事件

v-on:事件名=“JS表达式”

简写为@事件名

提取数据

使用数据模型（Vue对象的data）的属性直接提取

{{属性名}}

v-if="属性名"

计算属性（Vue对象的computed）

根据数据计算出要显示的值

过滤器（Vue对象的 filters）

可以修饰、格式化、转换数据模型中的值

方法（Vue对象的methods）

可以计算或生成或从服务端获取数据

与计算属性的区别是：

计算属性会缓存，方法不会

计算属性不能接收参数，方法可以

从网页到数据模型

视图→数据模型

使用表单收集用户输入

v-model=“JS表达式”

通过事件更新数据

@事件名=“JS表达式”

Vue编程3步

设计数据模型

数据模型能够生成所需要的视图

数据模型能够满足业务的需要

根据数据模型编写模版渲染页面

实现业务逻辑（根据需求对数据模型进行各种修改）

Vue对象生命周期

created：Vue对象已经创建好，但还不能访问视图，可以用Ajax下载数据

mounted：Vue对象已经与视图连接好

updated：Vue对象已经更新好视图，每一次数据变化导致视图更新都会调用

destroyed：Vue对象已经销毁，释放一些资源，如计时器