Java菜鸟学习日记37

前端的发展历程

1. 静态网页-网页是死的（网页上的内容不会变化）
2. 动态网页-网页是服务端程序生成的（内容可以随时变化）
3. 前端应用-通过JS和Ajax实现前端程序化（网页可以不依赖或者少依赖于服务端就能实现丰富的功能）
   1. 前端原声js-浏览器兼容问题非常严重
   2. 前端脚本库-jQuery、prototupe.js、underscore.js
   3. 前端框架-backbone、angular、react、vue

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

• 如何把数据显示为页面
  • 数据来自两个方面：服务端、用户填写的

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

1. 拼字符串（拼字符串很麻烦）
2. 模版化（数据变化时视图需要重新调用模版引擎生成html，性能差）
3. 双向绑定（数据驱动视图：数据模型变化时视图自动变化，视图变化时，自动更新数据模型）

Vue编程思想

1. 将数据模型通过模版渲染到页面上
   1. 数据模型→视图
      1. 显示内容
         1. 模版插值：{{}}
         2. v-bind:属性名 = “JS表达式”
            1. 简写为：:属性名
         3. v-html="JS表达式"：用来显示html内容
      2. 简单逻辑
         1. v-if="JS逻辑表达式"：决定了是否渲染
         2. v-else
         3. v-else-if
         4. v-for=“vue for 语法”：循环
      3. 监听事件
         1. v-on:事件名=“JS表达式”
            1. 简写为@事件名
      4. 提取数据
         1. 使用数据模型（Vue对象的data）的属性直接提取
            1. {{属性名}}
            2. v-if="属性名"
         2. 计算属性（Vue对象的computed）
            1. 根据数据计算出要显示的值
         3. 过滤器（Vue对象的 filters）
            1. 可以修饰、格式化、转换数据模型中的值
         4. 方法（Vue对象的methods）
            1. 可以计算或生成或从服务端获取数据
            2. 与计算属性的区别是：
               1. 计算属性会缓存，方法不会
               2. 计算属性不能接收参数，方法可以
2. 从网页到数据模型
   1. 视图→数据模型
   2. 使用表单收集用户输入
      1. v-model=“JS表达式”
   3. 通过事件更新数据
      1. @事件名=“JS表达式”

Vue编程3步

1. 设计数据模型
   1. 数据模型能够生成所需要的视图
   2. 数据模型能够满足业务的需要
2. 根据数据模型编写模版渲染页面
3. 实现业务逻辑（根据需求对数据模型进行各种修改）

Vue对象生命周期

• created：Vue对象已经创建好，但还不能访问视图，可以用Ajax下载数据
• mounted：Vue对象已经与视图连接好
• updated：Vue对象已经更新好视图，每一次数据变化导致视图更新都会调用
• destroyed：Vue对象已经销毁，释放一些资源，如计时器