Vue.js-分享-vuejs-的分享-介绍入门开启vuejs之旅.pptx

Vue.js,数据驱动+组件化的前端界面开发,尤小右,yyx990803,,Vue.js概况2013年底作为个人实验项目开始开发2014年2月公开发布2014年11月发布从头重写的0.11截止2015年1月：3100+StarsonGitHub,Vue.js不是一个框架,路由视图管理数据持久化,路由视图管理数据持久化,灵活的接口,简单示例QuickDemo,核心思想：数据驱动组件化,数据驱动Data-Driven,视图View,用户行为UserInput,数据模型Model,渲染Render,视图View,用户行为UserInput,数据模型Model,渲染Render,视图只是数据的映射,“真相只有一个”,DOM,DOM在单页Web应用中的问题重新渲染整个视图是昂贵的手动更新DOM来保持视图和数据的同步很容易导致bug,View,ViewModel,Model,通过MVVM的数据绑定实现自动同步,DOM,POJO(原生JS对象),Vue,View,ViewModel,Model,通过MVVM的数据绑定实现自动同步,varvm=newVue(el:#demo,data:msg:HelloVue.js!),msg,JavaScript,HTML,varvm=newVue(el:#demo,data:msg:HelloVue.js!),msg,JavaScript,指令Directive（插值其实被编译为v-text指令）,ViewModel,Model,View,HTML,View,Model,DOMListeners,Directives,ViewModel,应用逻辑全部是数据操作,DOM操作封装在指令中,组件化Component-Oriented,每一个应用界面都可以看作是组件构成的,Nav,Content,Item,Sidebar,SideItem,每一个组件都可以看做是一个ViewModel,Nav,Content,Item,Sidebar,所以可以把界面抽象为ViewModelTree,在Vue.js中注册组件,/扩展Vue来自定义一个可复用的组件类varMyComponent=Vue.extend(template:msg,paramAttributes:msg)/全局注册该组件Vponent(my-component,MyComponent),在Vue.js模板中使用组件,my-component组件的模板将会被填充到该元素中，而msg则会被作为数据传入该组件实例。渲染结果如下。,Hello!,通过paramAttributes实现父子组件之间的数据传递,root,my-component,msgFromParent,msg,双向绑定,每一个组件都默认有自己的独立作用域。,组件之间也可以通过事件系统进行通信,$dispatch(),组件之间也可以通过事件系统进行通信,$broadcast(),一些实现细节,基于ES5Object.defineProperty实现对POJO(原生JS对象)的观察和依赖收集,Object,setter,getter,Property,收集依赖,触发更新,a,setter,getter,b,Watchera.b,收集依赖,Directivev-text=a.b,DOMa.b,通知,更新,通知,依赖收集机制的实现类似Knockout，精确到每一个属性，比脏检测效率得多，性能不受制于watcher的数量。,vm.msg=onevm.msg=twovm.msg=three/只会触发一次DOM更新,异步批量更新,varvm=newVue(data:nested:a:b:hi!),可以直接替换多层嵌套的对象,/直接替换对象vm.nested=a:b:yo!,vardata=msg:hivarvm=newVue(data:data),可以直接修改原数据对象,/直接修改原对象data.msg=changed/DOM会在下一帧更新,varitems=a,b,cvarvm=newVue(data:items:items)/下一帧会触发更新items.reverse(),数组的mutating方法会触发更新,对于直接的数组替换，v-repeat会进行Array-diffing确保尽可能地复用vm和DOM元素,/不会导致性能问题哟vm.items=vm.items.filter(fn),*即使用含有全新数据对象的数组替换，只要对象有uid也可以通过比较uid来达成有效复用。,/如果data上不存在prop属性，/则必须要用$set或$add才会触发更新data.$set(prop,value)data.$add(prop,value)/删除属性要用$deletedata.$delete(prop)/数组不能用arr0=value,要用$setarr.$set(0,value),ES5的局限：不能侦测对象属性的添加/删除,优势和使用场景,侵入性低,不对整体架构做过多约束，方便与其他库或是已有的前端技术栈整合。,数据持久层DataPersistenceLayer,服务器端数据库Database,View,ViewModel,Model,以POJO作为Model使得Vue对于数据持久层的接口非常灵活,Vue+BackboneModel,Vue+Firebase,Vue+Meteor,鼓励模块化,基于组件的开发模式有利于将界面代码自然分割成更容易维护的模块,基于CommonJS的单文件组件：Vueify,通过Brow