vue框架入门.ppt

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