vue框架入门完整版.ppt

*****把一个普通JavaScript对象传给Vue实例的data选项，Vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty是仅ES5支持，且无法shim的特性，这也就是为什么Vue不支持IE8以及更低版本浏览器的原因。用户看不到getter/setter，但是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时getter/setter的格式化并不同，所以你可能需要安装vue-devtools来获取更加友好的检查接口。每个组件实例都有相应的watcher实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。***初识Vue.js

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