vue框架入门.ppt

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