Vue基础培训PPT.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,1,目录,1.,历史由来,2.MVVM,模式,3.,数据驱动和组件式编程,4.Vue,之,Hello World,！,5.,生命周期,6.,从,Vue,到页面,7.Vue,组件的重要选项,8.Vue,常用指令,2,历史由来,尤雨溪谈,Vue.js,：“我在,Google,的工作需要在浏览器上进行大量原型设计，于是我想要尽快获得有形的东西。当时有些项目使用了,Angular,。,Angular,提供了一些用数据绑定和数据驱动来处理,DOM,的方法，所以你不必自己碰,DOM,。它也有一些副作用，就是按照它规定的方式来构建代码。对于当时的场景而言实在是太重了。,我想，我可以只把我喜欢的部分从,Angular,中提出来，建立一个非常轻巧的库，不需要那些额外的逻辑。我也很好奇,Angular,的源码到底是怎么设计的。我最开始只是想着手提取,Angular,里面很小的功能，如声明式数据绑定。,Vue,大概就是这么开始的。,用过一段时间之后，我感觉我做的东西还有点前途，因为我自己就很喜欢用。于是我花了更多的时间把它封装好，取了一个名字叫做,Vue.js,。,2014,年,2,月，我第一次将它作为实际的项目发布在,Github,上，并把链接发送到了,Hacker News,上，它就被顶到了首页，然后它在首页待了好几个小时。后来，我写了一篇文章，分享了,Vue,第一周的使用数据以及我的感受。,那是我第一次看见这么多人在,Github,上为一个项目打星星。我当时一个星期收获了好几百个星星，整个人都激动坏了。,原文链接,：,View,与,Model,不发生联系，都通过,Presenter,传递。,3.View,非常薄，不部署任何业务逻辑，称为,被动视图,（,Passive View,），即没有任何主动性，而,Presenter,非常厚，所有逻辑都部署在那里。,5,MVVM,模式,MVVM,模式采用双向绑定（,data-binding,）：,View,的变动，自动反映在,ViewModel,，反之亦然。,Vue,、,Angular,和,Ember,都采用这种模式，相比于,Angular,，,Vue.js,提供了更加简洁、更易于理解的,API,，使得我们能够快速地上手并使用,Vue.js,。,6,数据驱动和组件式编程,数据驱动,：,7,程序,=,数据结构,+,算法，这是每个程序都耳熟能详的一句话,可在前端这里并不纯粹,因为前端需要跟界面打交道,html+css,并没用被抽象成某种在,js,中使用的数据结构,充当的更多是界面的一种配置,jquery,程序员看待他的方式就一块块的,ui,用到的时候再,$,一下,获取之后修改,.,整个程序写下来是零零散散的节点操作。一个比较实际的情况就是,在,ui,控件有联动的时候,如果没有一种机制来管理这些,ui,之间的修改,那么依赖程序员自己去手动管理这些,ui,的状态,会让人烦不胜烦,且容易出现,bug,。,总结一下基于操作,dom,的前端开发方式：,拼界面,-,找到,dom,节点,-,修改属性,-,检测是否有其他影响的节点,-,根据刚刚修改的,dom,节点更新自己的状态,那么上面的那句话就变成了：前端程序,=,拼界面,+,操作,ui+,算法,vue,或者,angular,这些,mvvm,框架给了前端另一种思路,完全基于数据驱动的编程。如果你之前已经习惯了用,jQuery,操作,DOM,，学习,Vue.js,时请先抛开手动操作,DOM,的思维，因为,Vue.js,是数据驱动的，你无需手动操作,DOM,。,Vue,采用一种数据绑定的方式,自动绑定,dom,节点的属性,.,这样就把你从操作,dom,节点的繁琐过程中解脱出来了,你只要专注于数据的状态,ui,更新的事情你不需要去管了,不管是样式还是内容,可见性还是切换,class,框架帮你把关注点从传统的,dom,操作转移到了数据,回归编程的本质,:,程序,=,数据结构,+,算法,.,这也是,mvvm,框架最大的思路上的突破。,8,组件式编程,这个理念不是来源于,vue,把,web,组件式开发发扬光大的应该是,react,了,组件开发是一种朴素的开发思想,分而治之,大型系统拆分成一个个的小模块小组件,分配给不同的人。额外的好处是顺便能复用这个组件。,9,理解组件的思想可以类比函数。一个函数包含哪些东西呢？,1.,形参,2.,局部变量,3.,函数名,4.,返回值,那对应到,vue,中又是什么呢,?,10,Vue,之,Hello World,！,11,Vue,之,Hello World,！,使用,Vue,的过程就是定义,MVVM,各个组成部分的过程的过程。,1.,定义,View,2.,定义,Model,3.,创建一个,Vue,实例或,ViewModel,，它用于连接,View,和,Model,在创建,Vue,实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。,在这个示例中，选项对象的,el,属性指向,View,，,el:#app,表示该,Vue,实例将挂载到,.,这个元素；,data,属性指向,Model,，,data:exampleData,表示我们的,Model,是,exampleData,对象。,Vue.js,有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时,message,会被数据对象的,message,属性替换，所以页面上会输出,Hello World!,。,12,生命周期,13,生命周期,每个,Vue,实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测,(data observer)编译模版、挂载实例到,DOM,，然后在数据变化时更新,DOM,。在这个过程中，实例也会调用一些,生命周期钩子,，这就给我们提供了执行自定义逻辑的机会。,它可以总共分为,8,个阶段：,1.beforeCreate:,在实例初始化之后，数据观测,(data observer),和,event/watcher,事件配置之前被调用。,2.created:,实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测,(data observer),，属性和方法的运算，,watch/event,事件回调。然而，挂载阶段还没开始，,$el,属性目前不可见。,3.beforeMount:,在挂载开始之前被调用：相关的,render,函数首次被调用。,该钩子在服务器端渲染期间不被调用。,4.mounted:,el,被新创建的,vm.$el,替换，并挂载到实例上去之后调用该钩子。如果,root,实例挂载了一个文档内元素，当,mounted,被调用时,vm.$el,也在文档内。,该钩子在服务器端渲染期间不被调用。,14,5.beforeUpdate:,数据更新时调用，发生在虚拟,DOM,重新渲染和打补丁之前。,你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。,该钩子在服务器端渲染期间不被调用。,6.updated:,由于数据更改导致的虚拟,DOM,重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件,DOM,已经更新，所以你现在可以执行依赖于,DOM,的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用,计算属性,或,watcher,取而代之。,该钩子在服务器端渲染期间不被调用。,7.beforeDestroy:,实例销毁之前调用。在这一步，实例仍然完全可用。,该钩子在服务器端渲染期间不被调用。,8.destroyed:,Vue,实例销毁后调用。调用后，,Vue,实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。,该钩子在服务器端渲染期间不被调用。,15,从,Vue,到页面,16,从,Vue,到页面,17,Vue,组件的重要选项,data:,18,Vue,组件的重要选项,props:,methods:,watch:,computed:,19,Vue,常用指令,20,结束,21,