前端的发展历程
- 静态网页-网页是死的(网页上的内容不会变化)
- 动态网页-网页是服务端程序生成的(内容可以随时变化)
- 前端应用-通过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表达式”
- 简写为@事件名
- v-on:事件名=“JS表达式”
- 提取数据
- 使用数据模型(Vue对象的data)的属性直接提取
- {{属性名}}
- v-if="属性名"
- 计算属性(Vue对象的computed)
- 根据数据计算出要显示的值
- 过滤器(Vue对象的 filters)
- 可以修饰、格式化、转换数据模型中的值
- 方法(Vue对象的methods)
- 可以计算或生成或从服务端获取数据
- 与计算属性的区别是:
- 计算属性会缓存,方法不会
- 计算属性不能接收参数,方法可以
- 使用数据模型(Vue对象的data)的属性直接提取
- 显示内容
- 数据模型→视图
- 从网页到数据模型
- 视图→数据模型
- 使用表单收集用户输入
- v-model=“JS表达式”
- 通过事件更新数据
- @事件名=“JS表达式”
Vue编程3步
- 设计数据模型
- 数据模型能够生成所需要的视图
- 数据模型能够满足业务的需要
- 根据数据模型编写模版渲染页面
- 实现业务逻辑(根据需求对数据模型进行各种修改)
Vue对象生命周期
- created:Vue对象已经创建好,但还不能访问视图,可以用Ajax下载数据
- mounted:Vue对象已经与视图连接好
- updated:Vue对象已经更新好视图,每一次数据变化导致视图更新都会调用
- destroyed:Vue对象已经销毁,释放一些资源,如计时器