vue框架入门.ppt

初识Vue js 官网 https cn vuejs org 2019 12 29 为什么存在框架 2019 12 29 主流框架分析 纯模板引擎 最少的就是纯模板引擎 只管状态到界面的映射 React和Vue 其实这两者都是非常专注的只做状态到界面映射 以及组件 Backbone 它会给你多一些架构上指导 比如它会让你分层 Angular 它做的事情就更多 它有自己的路由 这些都会包含在里面 Ember 相比Angular Ember做得就更加彻底 Ember信奉的是约定优于配置 它会将一切都帮你设计好打包好 你就开箱用就可以了 Meteor Meteor只是一个极端 它是从前到后全都包含 从前端到数据层到数据库 全都帮你打包好 2019 12 29 React Vue 2019 12 29 Vue现状 2019 12 29 Vue现状 2019 12 29 简介 Vue js 读音 vju 类似于view 是一套构建用户界面的渐进式框架 Vue的核心库只关注视图层 它不仅易于上手 还便于与第三方库或既有项目整合 另一方面 当与单文件组件和Vue生态系统支持的库结合使用时 Vue也完全能够为复杂的单页应用程序提供驱动 2019 12 29 2019 12 29 MVVM Demo001 2019 12 29 生命周期 Demo005 每个Vue实例在被创建之前都要经过一系列的初始化过程 例如 实例需要配置数据观测 dataobserver 编译模版 挂载实例到DOM 然后在数据变化时更新DOM 在这个过程中 实例也会调用一些生命周期钩子 这就给我们提供了执行自定义逻辑的机会 2019 12 29 模板语法 Vue js使用了基于HTML的模板语法 允许开发者声明式地将DOM绑定至底层Vue实例的数据 所有Vue js的模板都是合法的HTML 所以能被遵循规范的浏览器和HTML解析器解析 在底层的实现上 Vue将模板编译成虚拟DOM渲染函数 结合响应系统 在应用状态改变时 Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上 Demo003 2019 12 29 计算属性 模板内的表达式是非常便利的 但是它们实际上只用于简单的运算 在模板中放入太多的逻辑会让模板过重且难以维护 例如 message split reverse join 对于复杂逻辑 使用计算属性 Demo008 2019 12 29 指令 指令 Directives 是带有v 前缀的特殊属性 指令属性的值预期是单一JavaScript表达式 除了v for 之后再讨论 指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM上 Demo007 2019 12 29 过滤器 Vue js允许你自定义过滤器 可被用作一些常见的文本格式化 过滤器可以用在两个地方 mustache插值和v bind表达式 Demo004 2019 12 29 事件处理 用v on指令监听DOM事件来触发一些JavaScript代码 许多事件处理的逻辑都很复杂 所以直接把JavaScript代码写在v on指令中是不可行的 因此v on可以接收一个定义的方法来调用 Demo006 2019 12 29 表单 你可以用v model指令在表单控件元素上创建双向数据绑定 它会根据控件类型自动选取正确的方法来更新元素 尽管有些神奇 但v model本质上不过是语法糖 它负责监听用户的输入事件以更新数据 并特别处理一些极端的例子 Demo009 2019 12 29 深入响应式原理 2019 12 29 组件系统 在Vu