Vue.js 前端开发 快速入门与专业应用.docx

《Vue.js 前端开发 快速入门与专业应用.docx》由会员分享，可在线阅读，更多相关《Vue.js 前端开发 快速入门与专业应用.docx（173页珍藏版）》请在三一办公上搜索。

1、Vuejs前端开发快速入门与专业应用1 .第1章VUeV简介2 .第2章基础特性3 .第3章指令4 .第4章过滤器5 .第5章过渡6 .第6章组件7 .第7章VUev常用插件8 .第8章VUeV工程实例9 .第9章状态管理：VUeX10 .第10章跨平台开发：WeeX11 .第11章Vue.is2.0新特性第1章Vlejs简介近几年，互联网前端行业发展得依旧迅猛，涌现出了很多优秀的框架，同时这些框架也正在逐渐改变我们传统的前端开发方式。GOOgle的AngUIarJS、FaceboolReactJS,这些前端MVC(MVVM)框架的出现和组件化开发的普及和规范化，既改变了原有的开发思维和方式，

2、也使得前端开发者加快脚步，更新自己的知识结构。2014年2月，原GoOgIe员工尤雨溪公开发布了自己的前端库Vuejs,时至今日，VUe.js在GitHUb上己经收获超过30000star,而且也有越来越多的开发者在实际的生产环境中运用它。本书主要以VueJs1.0.26版本为基准进行说明，VueJs2.0版本与之不同的地方，会在对应章节中说明。1.1 Vuejs是什么单独来讲，VueJs被定义成一个用来开发Web界面的前端库，是个非常轻量级的工具。VueJs本身具有响应式编程和组件化的特点。所谓响应式编程,即为保持状态和视图的同步，这个在大多数前端MV*(MVCMVVM/MVW)框架，不管是

3、早期的backbone还是现在AngUIarJS都对这一特性进行了实现(也称之为数据绑定)，但这几者的实现方式和使用方式都不相同。相比而言,VUeJS使用起来更为简单，也无需引入太多的新概念，声明实例newVue(data:data)后自然对data里面的数据进行了视图上的绑定。修改data的数据，视图中对应数据也会随之更改。VueJ那J组件化理念和ReaCtJS异曲同工一一切都是组件”，可以将任意封装好的代码注册成标签，例如：VUe.ComponentCexample:Example),可以在模板中以VeXamPle/example的形式调用。如果组件抽象得合理，这在很大程度上能减少重复开发

4、，而且配合VueJs的周边工具VUe-Ioader,我们可以将一个组件的CSS、HTML和js都写在一个文件里，做到模块化的开发。除此之外，VueJs也可以和一些周边工具配合起来，例如VUeToUter和VUe-resource,支持了路由和异步请求，这样就满足了开发单页面应用的基本条件。1.2 为什么要用VlIeJS相比较AngUlaijS和ReaCtJS,VueJs一直以轻量级，易上手被称道。MVVM的开发模式也使前端从原先的DOM操作中解放出来，我们不再需要在维护视图和数据的统一上花大量的时间，只需要关注于data的变化，代码变得更加容易维护。虽然社区和插件并没有一些老牌的开源项目那么丰

5、富，但满足日常的开发是没有问题的。VueJs2.0也已经发布了bea版本，渲染层基于一个轻量级的VimIaI-DOM实现，在大多数场景下初始化渲染速度和内存消耗都提升了24倍。而阿里也开源了WeeX(可以理解成ReaCtJS-NatiVe和ReaCJS的关系)，这也意味着VueJs在移动端有了更多的可能性。不过，对于为什么要选择使用一个框架，都需要建立在一定的项目基础上。如果脱离实际项目情况我们来谈某个框架的优劣，以及是否采用这种框架，我觉得是不够严谨的。作为新兴的前端框架，VUeJS也抛弃了对1E8的支持，在移动端支持到AndrOid4.2+和iOS7+o所以如果你在一家比较传统，还需要支持

6、IE6的公司的话，你或许就可以考虑其他的解决方案了(或者说服你的老板)。另外，在传统的前后端混合(通过后端模板引擎渲染)的项目中，VueJs也会受到一定的限制，VUe实例只能和后端模板文件混合在一起，获取的数据也需要依赖于后端的渲染，这在处理一些JSoN对象和数组的时候会有些麻烦。理想状态下，我们能直接在前后端分离的新项目中使用VueJs最合适。这能最大程度上发挥VueJs的优势和特性，熟悉后能极大的提升我们的开发效率以及代码的复用率。尤其是移动浏览器上，VueJs压缩后只有18KB,而且没有其他的依赖。1.3 Vuejs的HeHOworld现在来看一下我们第一个Vue.js项目，按照传统，我

7、们来写一个HelIoWOrk1。首先，引入VueJs的方式有很多，你可以采用直接使用CDN,例如：scriptsrc=,http:/cdnjS也可以通过NPM进行安装：npminstallvue/最新稳定版本正确引入VueJs之后，我们在HTML文件中的内容为：message)应用的js如下：varvm=newVue(el:#app,data:message:,Helloworld,IamVue.js)；输出结果为：Helloworld,IamVue.js这种形式类似于前端模板引擎，我们把js中message值替换了HTML模板中message这部分。不过，如果仅仅是这样的例子，我相信你也不会

8、有什么兴趣去使用VUe.js。根据上文对VueJs的说明，我们继续写两个有关于它特性的例子。第一个特性是数据绑定，我们可以在运行上述例子的浏览器控制台(console)环境中输入Vm.message=HelloVuejs,输出结果就变为了HelloVuejs0也就说明Vm.message和视图中的message是绑定的，我们无需手动去获取vhl标签来修改里面的innerHTML。同样，我们也可以绑定用户输入的数据，视图会随着用户的输入而变化，例如：Yourinputismessageinputtype=,text,/V-InodeI=message”)YourinputisHello,Worl

9、dHolo.Wortdlvm.message的值会随着用户在input中输入的值的变化而变化，而无需我们手动去获取DoM元素的值再同步到js中。第二个特性是组件化，简单来说我们可以自己定义HTML标签，并在模板中使用它，例如：-sagecontent=,HelloWorldvarMessage=Vue.extend(props：,content,template:,content,)Vponent(,message,Message);varvm=newVue(el:,#app*,!)；我们在浏览器里最终看到的HTML结果为：rHelloWorld可以看到自定义的标签VmeSSage被替换成了H

10、elloWoid,当然，实际中的组件化远比示例复杂，我们会给组件添加参数及方法，使之能更好地被复用。如果说这几个例子引起了你对VueJs的兴趣的话，那接下来我们就会详细地说明它的基础用法和应用场景，以及最终我们如何将它真实地运用到生产环境中。第2章基础特性其实，无论前端框架如何变化，它需要处理的事情依旧是模板渲染、事件绑定、处理用户交互（输入信息或鼠标操作），只不过提供了不同的写法和理念。VueJs则会通过声明一个实例newVue（）标记当前页面的HTML结构、数据的展示及相关事件的绑定。本章主要介绍VueJs的构造函数的选项对象及用法，以及如何通过VueJs来实现上述的常规前端功能。2.1实

11、例及选项从以前的例子可以看出，VueJs的使用都是通过构造函数Vue（option）创建一个VUe的实例：varvm=newVue（）0一个VUe实例相当于一个MVVM模式中的VieWMode1,如图2-1所示。视图(VieW)数据绑定业务逻辑和数据展示和展示逻辑图21在实例化的时候，我们可以传入一个选项对象，包含数据、模板、挂载元素、方法、生命周期钩子等选项。下面就对一些常用的选项对象属性进行具体的说明。2.1.1模板选项中主要影响模板或DOM的选项有el和template,属性replace和template需要一起使用。el：类型为字符串，DOM元素或函数。其作用是为实例提供挂载元素。一

12、般来说我们会使用CSS选择符，或者原生的DoM元素。例如el:痴pp在初始项中指定了el,实例将立即进入编译过程。template：类型为字符串。默认会将template值替换挂载元素（即el值对应的元素），并合并挂载元素和模板根节点的属性（如果属性具有唯一性,举似id,则以模板根节点为准）。如果replace为false,模板IemPlate的值将插入挂载元素内。通过IemPlate插入模板的时候，挂载元素的内容都将被互联，除非使用SlOt进行分发（有关SIOt内容将在第6章组件中介绍）。在使用template时，我们往往不会把所有的HTML字符串直接写在js里面，这样影响可读性而且也不利于

13、维护。所以经常用#中1的方式赋值，并且在body内容添加scriptid=tptype=x-template”为标签包含的HTML内容，这样就能将HTML从js中分离开来，示例如下：123ThisisatplfromscripttagvarVm=newVue(el:,#app,template:,#tpl,)；最终输出HTML结构为：cl*5-tplidappP-ThieUatplfreeXrSttp-duVue.js2.0中废除了replace这个参数，并且强制要求每一个VueJs实例需要有一个根元素，即不允许组件模板为：这样的兄弟节点为根节点的模板形式，需要改写成：2.1.2 数据Vue.

14、js实例中可以通过data属性定义数据，这些数据可以在实例对应的模板中进行绑定并使用。需要注意的是，如果传入data的是一个对象，VUe实例会代理起data对象里的所有属性，而不会对传入的对象进行深拷贝。另外，我们也可以引用VUe实例Vm中的$data来获取声明的数据，例如：vardata=a:1varvm=newVue(data:data)vm.$data=data/-truevm.a=data.a/-true/设置属性也会影响到原始数据vm.a=2data.a/-2/反之亦然data.a=3vm.a/-3然后在模板中使用a就会输出vm.a的值，并且修改vm.a的值，模板中的值会随之改变，我

15、们也会称这个数据为响应式(responsive)数据(具体的用法和特性会在第2.2节的数据绑定中说明)。需要注意的是，只有初始化时传入的对象才是响应式的，即在声明完实例后，再加上一句vm.Sdata.b=,2,并在模板中使用b,这时是不会输出字符串2的。例如：abvarvm=newVue(el:#app,data:(a:1!)；vm.$data.b=2;如果需要在实例化之后加入响应式变量，需要调用实例方法$set,例如：vm.$set(,b,2);不过VueJs并不推荐这么做，这样会抛出一个异常：OUarMttU*nen-RAiMHth*H*0v*SrW.CMlrAVM.3.m3|6*tSlU

16、BZthereftywittM4t*aforaeerlablercIAvityandbtror*M.I所以，我们应尽量在初始化的时候，把所有的变量都设定好，如果没有值，也可以用UndefinedsEnull占位。另外，组件类型的实例可以通过PrOPS获取数据，同data一样，也需要在初始化时预设好。示例：varmyComponent=Vponent(my-component,props:,title,content,template:,title!)content)我们也可以在上述组件类型实例中同时使用data,但有两个地方需要注意：data的值必须是一个函数，并且返回值不是原始对象。如果传给

17、组件的data是一个原始对象的话，则在建立多个组件实例时它们就会共用这个data对象，修改其中一个组件实例的数据就会影响到其他组件实例的数据，这显然不是我们所期望的。data中的属性和ProPS中的不能重名。这两者均会抛出异常：O2TMa*MtftleXfuntMnthatrtwrmr3ty“IsIfiu.l,.26.ilt23。(VwtetafieldtltK*it*lrtdydefinedasa0rg.T0rwiofaultvaluefory.1AJtfiAlAJLlIU“，stMdefault-88*5；ifmM*Attopasp，gvUmtafttt*tatoflC4lltutth.e

18、*0,.XM.(fundin)f*I所以正确的使用方法如下:varMyComponent=Vponent(my-component,props:,title,content,data:function()returndesc:123template:,titlecontentdesc,2.1.3 方法我们可以通过选项属性methods对象来定义方法，并且使用V-On指令来监听DOM事件，例如：alertnewVue(el:app,data:a:1,methods:alert:function()alert(this.a);另外，Vue.js实例也支持自定义事件，可以在初始化时传入evems对象

19、，通过实例的$emit方法进行触发。这套通信机制常用在组件间相互通信的情况中，例如子组件冒泡触发父组件事件方法，或者父组件广播某个事件，子组件对其进行监听等。这里先简单说明下用法，详细的情况将会在第6章组件中进行说明。varvm=newVue(el:,#app,data:data,events:,event.alert,:function()(alert(,thisiseventalert:,+this.a);!);vm.$emit(,event.alert,);而VueJs2.0中废弃了events选项属性，不再支持事件广播这类特性，推荐直接使用VUe实例的全局方法$on()/$emit()

20、,或者使用插件VUeX来处理。2.1.4 生命周期VueJs实例在创建时有一系列的初始化步骤，例如建立数据观察，编译模板，创建数据绑定等。在此过程中，我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑。例如：varvm-newVue(data:a:1,created:function()console.log(,created,)运行上述例子时，浏览器ConSole中就会打印出Crealedo下图是实例的生命周期，可以根据提供的生命周期钩子说明VueJs实例各个阶段的情况，VueJs2.0对不少钩子进行了修改，以下一并说明。VUeJS实例生命周期(原图出自于VUeJS官网)，如图2-2所示

21、。newVue()ready群备完成vm.Sdestroy()beforePesuoy)图2-2init:在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化。2.0中更名为beforeCreateocreated：在实例创建之后调用。此时已完成数据绑定、事件方法，但尚未开始DoM编译，即未挂载到document中。beforeCompile:在DOM编译前调用。2.0废弃了该方法，推荐使用Created。beforeMount:2.0新增的生命周期钩子，在mounted之前运行。COmPiIed:在编译结束时调用。此时所有指令已生效，数据变化已能触发DOM更新，但不保证$el已插入文

22、档。2.0中更名为mounted。ready：在编译结束和$el第一次插入文档之后调用。2.0废弃了该方法，推荐使用mountedo这个变化其实已经改变了ready这个生命周期状态，相当于取消了在$目首次插入文档后的钩子函数。attached：在vm.$el插入DOM时调用，ready会在第一次attached后调用。操作$el必须使用指令或实例方法(例如$appendTo(),直接操作VmSeI不会触发这个钩子。2.0废弃了该方法，推荐在其他钩子中自定义方法检查是否已挂载。detached:同attached类似，该钩子在vm.$el从DC)M删除时调用，而且必须是指令或实例方法。2.0中同

23、样废弃了该方法。beforeDestroy:在开始销毁实例时调用，此刻实例仍然有效。destroyed:在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑，子实例也被销毁。beforeUpdate:2.0新增的生命周期钩子，在实例挂载之后，再次更新实例(例如更新data)时会调用该方法，此时尚未更新DoM结构。UPdated:2.0新增的生命周期钩子，在实例挂载之后，再次更新实例并更新完DOM结构后调用。activated：2.0新增的生命周期钩子，需要配合动态组件ke叩-IiVe属性使用。在动态组件初始化渲染的过程中调用该方法。deactivated：2.0新增的生命周期钩子，需要配合动

24、态组件keep-live属性使用。在动态组件移出的过程中调用该方法。可以通过写一个简单的demo来更清楚地了解内部的运行机制，代码如下：varvm=newVue(el:,#app,init:function()console.log(,init,);,created:function()console.log(,created,);,beforeCompile:function()console.log(,beforeComile,);,compiled:function()console.log(,compiled*);rattached:function()console.log(,att

25、ached);rdettached:function()console.log(,dettached);r1.eforeDestroy:function()console.log(,beforeDestroy,);rdestroyed:function()console.log(,destroyed);rready:function()console.log(,ready,);/组件完成后调用$1651；。”()函数，进行销毁this.$destroy();!)；输出结果为：cretecompiledreaiyeestrcye2.2数据绑定VueJs作为数据驱动视图的框架，我们首先要知道的就是

26、如何将数据在视图中展示出来，传统的Web项目中，这一过程往往是通过后端模板引擎来进行数据和视图的渲染，例如PHPsmarty,JaVa的VeloCity和freemarker。但这样导致的情况是前后端语法会交杂在一起，前端HTML文件中需要包含后端模板引擎的语法，而且渲染完成后如果需要再次修改视图，就只能通过获取DoM的方法进行修改，并手动维持数据和视图的一致。而VueJs的核心是一个响应式的数据绑定系统，建立绑定后，DoM将和数据保持同步，这样就无需手动维护De)M,使代码能够更加简洁易懂、提升效率。2.2.1 数据绑定语法本小节主要介绍Vue.js的数据绑定语法，出现的例子会基于以下js代

27、码：varVin=newVue(el:#app,data:id:1,index:O,name:,Vue,avatar:,http:/.“,count:1,2,3,4,5,names:,Vuel.0,Vue2.0/items:name:,Vuel.0,zversion:11.0,name:,Vuel.1,version:11.0,1)；1 .文本插值数据绑定最基础的形式就是文本插值，使用的是双大括号标签,为“Mustache”语法(源自前端模板引擎MUStaCheJs),示例如下：Helloname)/-HelloVueVue.js实例Vm中name属性的值将会替换MUStaChe标签中的nam

28、e,并且修改数据对象中的name属性，Dc)M也会随之更新。在浏览器COnSOIe中运行vm.nameVUeI.0,输出结果为Helk)VUe1.0。模板语法同时也支持单次插值，即首次赋值后再更改Vm实例属性值不会引起DoM变化，例如以下模板在运行vm.nameVUe1.0,后，依旧会输出HelloVue：Hello*name/-HelloVueVue.js2.0去除了*这种写法，采用vonce代替。以上模板需要改写为Vspanv-once=,name,nameo2 .HTML属性MUStaChe标签也同样适用于HTML属性中，例如：/Vuejs2.0中废弃了这种写法，用v-bind指令代替，

29、代替,或简写为VdiVid=,id-+id3 .绑定表达式放在MUStaChe标签内的文本内容称为绑定表达式。除了直接输出属性值之外，一段绑定表达式可以由一个简单的JaVaSeriPt表达式和可选的一个或多个过滤器构成。例如：index+1)/1index=O?,a,:b,/aname.split(,).join(,I,)/Vue每个绑定中只能包含单个表达式，并不支持JaVaSCriPt语句，否则VueJs就会抛出Warning异常。并且绑定表达式里不支持正则表达式，如果需要进行复杂的转换，可以使用过滤器或者计算属性来进行处理，以下的例子即为无效的表达式：vara=1/无效if(ok)retu

30、rnname/无效，但可以写成Ok?name:,或者Ok&name这样的Vuejs绑定表达式Waming：.Wvr:Jh*Mr*n*MJM*ar*,;r*1J.2.1$:，IJJ.twB11:*U4r*9e11Mure过滤器IimitBy可以接受两个参数，第一个参数是设置显示个数，第二个参数为可选，指从开始元素的数组下标。VueJs内置了10个过滤器，下面简单介绍它们的功能和用法。capitalize：字符串首字符转化成大写UPPerCase：字符串转化成大写lowercase：字符串转化成小写CUrrenCy参数为String货币符号,Number小数位,将数字转化成货币符号，并且会自动添加

31、数字分节号。例如：amount|currency,2)/-若amount值为100O0,则输出10,000.00PlUraliZe参数为Siringsingle,double,triple,字符串复数化如果接收的是一个参数,那复数形式就是在字符串末尾直接加一个“s”。如果接收多个参数，则会被当成数组处理,字符串会添加对应数组下标的值。如果字符串的个数多于参数个数，多出部分会都添加最后一个参救的值。例如：CIluralize,item*cIluralize,st,nd,rd,输出结果：Iitcm1st2itcms2nd3itcms3rd4itcms4thjson参数为Numberindem空格缩

32、进数，与JSON.slringify()作用相同，将json对象数据输出成符合json格式的字符串。debounce传入值必须是函数，参数可选，为Numberwait,即延时时长。作用是当调用函数n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。例如：/input元素上监听了keyup事件，并且延迟50IimitBy传入值必须是数组，参数为Numberlimit,Numberoffset,limit为显示个数,OffSet为开始显示数组下标。例如：/items为数组，且只显示数组中的前十个filterBy传入值必须是数组，StringFunctiontargetStri

33、ngOrFunction,即需要匹配的字符串或函数(通过函数返回值为true或false来判断匹配结果)；“in”(可选分隔符)；String).SearchKeys,为检索的属性区域。示例:name/检索items数组中值包含1.0的itemjson)/检索it上述两个例子的输出结果为：VucLOname:wVucl.0,version:1.0itemjson/使用自定义methods:CUStomFilter:function(item)if(item,name)returntrue/检索所有元素中包含name属性的元素OrderBy传入值必须是数组，参数为StringIArrayIFun

34、ctionsortKeys,即指定排序策略。这里可以使用单个键名，也可以传入包含多个排序键名的数组。也可以像Array.Sort。那样传入自己的排序策略函数。第二个参数为可选参数(Stringorder,即选择升序或降序，Order=0为升序，Order0为降序。下面以三种不同的参数例子来说明具体的用法：单个键名：item.name!)/items数多个键名：item.name/使自定义排序函数：item.name)methods:CustomOrder:function(a,b)returnparseFloat(a.version)parseFloat(b.version)/对比item中V

35、erSion的值的)需要注意的是，Vue.js2.0中已经去除了内置的过滤器，但也不用担心，我们会在第4章中详细说明过流器的用法，以及如何声明自定义过滤器。而且VueJs的社区中本身就有优秀的开源过滤器，比如处理时间的moment.js,和货币格式化处理的account.js,我们会在第8章中说明如何使用VueJs的插件。5.指令VueJs也提供指令(DireCtiVeS)这一概念，可以理解为当表达式的值发生改变时，会有些特殊行为作用到绑定的DOM上。指令通常会直接书写在模板的HTML元素中，而为了有别于普通的属性，VUajS指令是带有前缀的V-的属性。写法上来说，指令的值限定为绑定表达式，所

36、以上述提到的JaVaSCriPt表达式及过滤器规则在这里也适用。本书会在第3章中详细讲述指令及自定义指令的作用。本节先简单介绍指令绑定数据和事件的语法。参数指令vbind可以在后面带一个参数，用冒号(:)隔开，SrC即为参数。此时img标签中的SrC会与Vm实例中的avatar绑定，等同于：修饰符修饰符(ModifierS)是以半角句号.开始的特殊后缀，用于表示指令应该以特殊方式绑定。V-On的作用是在对应的DoM元素上绑定事件监听器，doClick为函数名，而StoP即为修饰符，作用是停止冒泡，相当于调用了e.stopPropagation()02.2.2计算属性在项目开发中，我们展示的数据

37、往往需要经过一些处理。除了在模板中绑定表达式或者利用过滤器外，VueJs还提供了计算属性这种方法，避免在模板中加入过重的业务逻辑，保证模板的结构清晰和可维护性。1.基础例子varVm=newVue(el:Tapp,data:firstName:lGavinIastName:CLY)computed:(fullName:function()/this指向Vm实例returnthis.firstName+,*+this.IastName)；firstName)/GavinIastName/CLYfullName!)/GavinCLY此时，你对Vm.ErslName和Vm.IaslName进行修改，

38、始终会影响Vm.fullName。2.Setter如果说上面那个例子并没有体现出来计算属性的优势的话，那计算属性的Setter方法，则在更新属性时给我们带来了便利。示例：varvm=newVue(el:#el,data:cents:100computed:price:Iset:function(newValue)this.cents=newValue*100;)/get:function()return(this.cents/100).toFixed(2);1)；在处理商品价格的时候，后端往往会把价钱定义成以分为单位的整型，避免在处理浮点类型数据时产生的问题。而前端则需要把价钱再转成元进行展示

39、，而且如果需要对价钱进行修改的话，则又要把输入的价格再恢复到分传给后端，很是繁琐。而在使用VUeJS的计算属性后，我们可以将vmcents设置为后端所存的数据，计算属性PriCe为前端展示和更新的数据。¥price!)/1.OO此时更改vm.price=2,vm.cents会被更新为200,在传递给后端时无需再手动转化一遍数据。6EKorSWarnnesInfoL09sDtbugHandled price22 VR.cents2M2.2.3表单控件Vuejs中提供v-model的指令对表单元素进行双向数据绑定，在修改表单元素值的同时，实例Vm中对应的属性值也同时更新，反之亦然。本小节会介绍主要input元素绑定v-model后的具体用法和处理方式，示例所依赖的js代码