vue框架入门.ppt

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