vue基本与实践-一个前端人员的心得.docx

《vue基本与实践-一个前端人员的心得.docx》由会员分享，可在线阅读，更多相关《vue基本与实践-一个前端人员的心得.docx（167页珍藏版）》请在课桌文档上搜索。

1、vue入门与实战目录VUe入门与实战1前百2第一部分vue基础3VUe是什么？3Vue安装5第一种通过script引入本地文件5第二种通过script使用CDN6第三种NPM方法7第一个VUe页面15基本语法17双大括号表达式17v-text指令19v-html指令20Vbind指令21V-on指令25V-model指令32V-for指令41Vif指令44V-else指令45v-else-if46V-show指令47V-pre指令48v-cloak指令49V-once指令51自定义指令52methods属性56computed计算属性57watch监听属性59组件63全局组件63局部组件64P

2、rop属性66vue路由:vue-rOUter73安装74单页面应用实例74Vue-router补充78生命周期函数（钩子函数）83第二部分，VUe实战开发90概述90运用VUe脚手架搭建开发环境91一，什么是VUe脚手架91二，安装脚手架之前准备工作91三，用VUe-CIi创建项目93项目文件的介绍99介绍实践项目的功能以及需要了解的技术1开始项目开发IOl首页制作101路由配置106报表界面的制作113表格界面的制作127表格的增删除改查143前言最近这几年企业推崇用框架来做前端开发，那为什么企业喜欢用框架来开发项目了，这个问题简单，首先就是减少造轮子的想法，能够快速的开发一款web应用对

3、于公司来说都是非常愿意看到的，另外就是使用前端框架的组件功能，只要组件功能强大，什么样的项目都能够开发。简单来说企业就是为了节约时间与成本。那使用什么样的框架了纵观网络大数据，其中用得最多，最火的就属于Angular,ReactzVueo至于企业到底选用那个框架，那就和企业的项目类型，项目大小以及技术选型等有关了。由于我们的项目类型，以及公司技术构成等因素，我所在公司选择的前端框架为vue。虽然我做前端已经很多年了，但VUe这些前端框架也是这几年才兴起的，所以说我也是从小白到入门到精通。为了让像我以前一样有传统html+js+css技术，而没有接触过vue这类框架的小白能快速入门并能在项目中运

4、用起来，我把VUe的基础以及我的实践经验进行整理和总结，能让读者的入门之路没有那么痛苦。该书主要包括两部分，一部门讲解VUe基本知识，第二部分，结合企业开发的实际项目，利用脚手架(vue-cii)工具搭建和开发一个VUe项目。第一部分vue基础vue是什么？Vue是一套用于构建用户界面的渐进式框架，是一个JavaScriptMVVM库。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。请注意上文加粗的部份，首先对VlJe”渐进式框架”理解：每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中

5、的使用方式。使用vue,你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当AngUlar用；还可以用它的视图，搭配你自己设计的整个下层用。那我们在刚学习时，没必要一上来就搞懂Vue的每一个部件和功能，先从核心功能开始学习，逐渐扩展。同时，在使用中，我们也没有必要把全部件能都拿出来，需要什么用什么就是了，而且也可以把VUe很方便的与其它已有项目或框架相结合。再次我们对“MVVM”进行理解：说起这个MVVM框架，就不得不说MVC框架。在传统开发中，将整个前端页面分成View（视图-V）,Controlled控件-C）,Modal（数据源-M）,即MVC

6、框架。VieW（视图）上发生变化，通过Controller（控件）将响应传入到Model（数据源）,由数据源改变VieW上面的数据。整个过程看起来是行云流水，业务逻辑放在Model当中，页面渲染放在View当中,但在实际运用上却存在f问题:那就是MVC框架允许View和Model直接进行通信！换句话说，View和Model之间随着业务量的不断庞大，会出现蜘蛛网一样难以处理的依赖关系，完全背离了开发所应该遵循的“开放封闭原则”。面对这个问题，MVVM框架就出现了，MVVM分别指View,Model,View-ModelzView通过View-Model的DOMLiStenerS将事件绑定到Mod

7、el上而Model则通过DataBindings来管理VieW中的数据,这样一来View和model之间就不用直接通信，而通过VieW-MOdel从中起到f连接桥的作甩简单的说,ViewModeI就是VieW与Model的连接器，VieW与Model通过ViewModeI实现双向绑定。MVVMDOMViewPlain JavaScript ObjectsVue安装第一种通过script引入本地文件我们可以在Vuejs的官网上直接下载vue.js并用script标签引入，vue会被注册为一个全局变量。下载方法：1,访问vue.js官网。https:cn.vuejs.org/。GITHUB2,点击

8、右侧点击右侧Clone or download4,选择弹出框里的“DownloadZIP”。5,下载完成后解压到本地。示例：注意：在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告！第二种通过使用CDN以下是三个CDN的地址：StaticfileCDN（国内）:https:/cdn.staticfile.orQvue2.2.2vue.min.isunpkg：https:LInDcdnjs:https:CdniS对于制作原型或学习，你可以这样使用最新版本：scriptSrC=https:C批注2: npm 全称为 Node Package Manager.第三种INPM方泅在用V

9、ue构建大型应用时推荐使用NPM安装。安装步骤：1.安装node.js和npm：Vue的脚手架是依赖于node.js的，所以无论是安装新版本还是旧版本，我们都要安装node.jso从node官网下载并安装node,安装步骤很简单，只要一路next就可以了。安装完成后，打开命令行工具输入命令node-V,如下图,如果出现对应版本号，就说明安装成功了。(c)2018MicrosoftCorporati.保留所有权利.C:Usorsxyrx5c-Vv8.12.0C：Usersxy我们所需要的npm包管理器，是集成在node中的，所以，直接输入npmv就会如下图所示，显示出npm的版本信息。2,安装v

10、ue-di脚手架构建工具:Vuejs提供一个官方命令行工具，可用于快速搭建大型单页应用。进入到Cmd命令框输入npminstall-globalvue-cli0QBS5i:C:Wirxiows$ystem32cmd.exeMicrosoftWindows版本61.7601极权所有2009MicrosoftCorporation保留所有权利.C：XUsersxAdninistratornpinstallglobaluue-cli这个安装还是要几分钟，如果你的网络条件不是很好，可以使用另外一个安装命令:cnpminstallglobalvue-cli（由于npm是国外的,使用起来比较慢,我们这里使

11、用淘宝的cnpm镜像来安装vue-cli安装成功后将显示如下界面：C：JJsersAdnInistratorxAppDatAXRoaning,一Uue-CliM.9.3 async2.6.0IIodCShe4.175 chlk2.3.2II一AnsiMstyles83.2.1II*-color-conuert81.9.1II*-color-nameBl.1.3I.一supports-color5.3.0I一has-flaH3.0.0 -Coffee-ScriptPl.12.7J-connander2.15.01consolidate0.1453,用vue-cli创建项目:一般在传统项目开始中比

12、如用纯的html/css/js开发时,一般会在本地手动创建文件目录，而用脚手架创建项目时就不需要这样，只需要建立一个存放项目的文件夹，然后在命令提示符窗口，cd目录到文件文件夹下，输入：vueinitwebpack项目名称，然后回车就可以了。如：我们在本地建立一个文件夹“vue-obj”，然打开“命令提示符”窗口，一直Cd到“vue-obj”文件夹下,输入:“vueinitwebpack项目名称”。（项目名称：指的就是我们自己命名的项目名）如下图：-3-OXIicrosoftVindovs10.0.17134.5901c)2018MicrosoftCorporation.保IW所权利1zUsr

13、sxyd:):Xdvork:vorkcdvue-objveInltVebPaCkVg-ObJ按下回车后，它会显示一些提示信息，如下图:令It示养veirWtwebp*ckWeObJc)2018MicrosoftCorporation*仅谕所“权利Vsrxyd: ：cdvork ：workcdVUePbj :workvue-objveinitVebpaCkVULObJProjectnue(vue-obj)它的意思是项目名称叫:VUe-Obj,如果你确定取这个项目名，按下enter即可。接下来会出现下图提示。-vewvbpccwe-cbj(c)2018MicrosoftCorporation.保小

14、而“松轲：:Usersxyd: :cdwork :wortccdVUe-Obj :woritvue-obJvueInitwebpeckVVbObJProjectneeProjectdescription(AVue.jsproject)意思是叫项目的描述信息，直接按钮enter即可。接下来又显示下图提示：WeWtwet)(MckueobjeOXMicrosoftWindovs74*10.0.17131.;90(c)2018MicrosoftCorporati保照所有权利.C:Usersxyd:0:cdworkOworkcdVUe-Obj0:workve-objvueinitvebpackn-ob

15、jProjectruProjectdescriptionAuthorIx;onganxiongyantq.co)它显示的是作者信息，也直接enter。然后又显示如下图提示:专vMlWebPKkMd:cdwork：vorkcdv*e-objKworkvue-objvueInltwebpackvue-objProjectnaoeProjectdescriptionAuthorVubuildInstallw-rutz?(Yn)意思是叫你确定是否安装vue-rOUter（路由），这个根据项目自身情况来选择。我们这里选择输入：no我们后面用到路由时再安装。接下来又提示下图：veMtwebfMckvueo

16、bj-DXIc)2018MicrosoftCorporation.保IW所打权料.hUsersxyd:cdworkworkcdVUepbJ:workv-obJveinvbpackVunObJProjctProjectdescriptionAuthorVuobuildInstallvue-routrz?UseESLinttolintyourcode?(Yn)意思是让你确定是否安装代码校验。eslint是一个JavaScript的校验插件，通常用来校验语法或代码的书写风格。如果安装了,你写的js代码风格有问题都会给你打印出来，反正我不喜欢。这个看个人To我一般选择n。接下来又显示如下图：H加得n*

17、bpkw-obj(c)2018MicrosoftCorporation.保而加仃权利.?:Ur$xyd:):cdwork)AvorkcdVWobj)：workv*e-objueInitvebpackVUU-ObJProjectnaseProjectdescriptionAuthorVuebuildInstallVWrgter?CsESLinttolintyourcoda?Sotupunittests67n)意思是让你确定是否设置单元测试，一般也是选择n。接下来又显示下图:)2018MicrosoftCorporatioa保汨所仃权利.AUsrsxyd:：cdwork：orkcdVULobJ:w

18、orkve-objvueInitvebackVUbobJProjectnaa?ProjectdescriptionAuthorYu。buildInstallv-routr?UseESLinttolintyourcode?SetupunittestsSetupe2etestsvithNightvatch?(Yn)意思是让你是否安装e2e自动化测试，一般也是输入n。接下来就开始创建项目了。npm-AUsersxyd:Acdvork:vorkcdVUe-Obj:三orkm-objvueInltvebackvue-objProjectmw*ProjectdescriptionAuthorVebuild

19、Installve-router?UseESLinttolintyourcode?SetupunittestsS6UPe2etestswithNightwetch?ShouldVOrunnpainstallforyouafterth。projecthasbncreated?(2COaDQndod)TUbCMGenerated*rue-obj*.brovsrslistt2.11.3:Brovsorslist2couldfailonreadingBrovsorslist3.0configusdinothert3.0configusedinothertool创建项目还是要花几分钟，当然还是和你网络有

20、关系，创建成功后将显示下图提示：，UgIifyjsvbPaCk-PlUSin10.4.6postinstallD:vorkvue-objvue-objnode.Bodulesvebpacknode_Dodulesuglify.Iuginnodellbost,tnsull.JscreatedIockfiUaspackAg*lock.json.YoushouldCoadtthisfiU.032ajv-kyrords3.4.0rqirosapeerofajv6.9.1butnoooisinstalled.YoUoustinstallprd9pondnciasIf.SKIPPINGOPTIONALDE

21、PENDENCY：fsventsl.2.7(Dode_eodulesfscvents)：SKIPPINGOPnoKMDS1ENDeCY:UnsupportedPlatforBforfseventscBecdTULobj:orkvue-objvue-objnpmrundev回车专访符-oricvu-objvuobjnprundev如果出现下图所示:说明项目创建成功。我们在浏览器窗口输入：“http:I。CalhoSt:8080”如果显示如下界面，那恭喜你，项目创建并启动成功了！WelmetoYourVuejsAppEssentialUnktEcosystem提示：不推荐新手直接使用NPM方式，尤

22、其是在你还不熟悉基于Nodejs的构建工具时。因此本文示例代码所用vue都是通过VSCriPt方式来引入的。第一个vue页面很多编程语言的第一页面都喜欢用helloword来宣告诞生，我们也不例外就用hellovue.js来个出场白，我们看下面第一个页面代码。示例代码：Titlemessage）newVue（el:*#appf,要绑定的I）OV3a.k/要绑定的数据message:,HelloVue.js!,Teaplate./要解析的模板,可以是#id,HTML或某佃DOMelementcomputed,依赖于别的数据:二的数据A.ICh,/监听方法,监听到某一数据变化时,镉要做的对应操作m

23、ethods,定义可以在元件或模板内使用的方法)我们将代码在浏览器运行一下会出现如下界面:虽然页面很简单，但终归是我们的第一个VUC页面。这第一个VUe页面是怎么渲染数据的呢，示例代码都是什么意思了？请看下面的代码介绍。代码介绍：1,我们通过“”将vue引入或安装到页面。2,每个Vue应用都需要通过实例化VUe构造器来实现。语法格式如下：newVue)3,通过上面的示例代码我们来看一看Vue构造包含那些基本内容。可以看到在Vue构造器中有一个el参数，它是绑定DoM元素中的ido在示例代码中它绑定了id=app的div,这意味着我们接下来的改动全部在以上指定的div内，div外部不受影响。接下

24、来我们看到有一个data对象，它是用来定义页面中所用到的属性或者叫变量。在示例代码中定义了message这个变量并赋值“HelloVue.js!”当一个VUe实例被创建时，它向VlJe的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时，html视图将也会产生相应的变化。在示例中通过message绑定到div中。当message值发生任何变化，都会立即体现到hmtl页面中。随着以后对vue的不断学习，你还会了解到Vue构造器里还包括了诸如：methods,钩子函数，计算属性等一列方法与属性。在起步阶段我们就只做了解，在接下来的学习中我们会深入学习。基本语法从这一章开

25、始，我们开始学习VUe的基础知识，这一章节主要为介绍一些基本语法和指令。双大括号表达式一，文本插值：之前在介绍vue第一个网页时，已经对xxxx这种双大括号有所了解，Vue视图模板是基于Dom实现的，所以Vue模板都可被解析为有效的Html,用双大括号引住的内容被称为“Mustache”语法（小胡子语法），MUStaChe标签会被相应的数据对象属性值替换，且当这个属性变化是也会随之更新。我们看下面代码，（name会被替换成name属性的值：“我是双大括号”示例代码：（name）newVue(el:ftapp,data:name:我是双大括号)运行的结果：我是双大括号文本插值就是通过这种方式,访

26、问vue实例中的data对象对应属性并显示到页面。二，JS表达式运算：通过这种方式，还可使用js语法进行简单的运算和处理，看以下面的示例代码。示例代码：5+5ok?YES:NOmessage,split(,).reverse().join(,)newVue(el:,ftapp,data:ok:true,message:,RUNOOB,)运行结果：10YESBOONUR三，三大括号表达式xxx）这种三大括号表达式,可以输出未被编码的文本所以,要显示数据中的html需要使用三大括号表达式但是,如果xxx使用不当，可能会导致XSS攻击自vuc2.0开始,废弃了三大括号插值,由v-html代替。所以我

27、们知道有这个就行了，不做详情介绍。四，总结：数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值。还可使用“Mustache”语法（双大括号）来进行，语法简单的js运算和处理。xxx这种三大括号表达式,可以输出hmtl代码，但自vue2.0开始,废弃了三大括号插值，由v-html代替。所以不做详情介绍。v-text指令v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变,插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。其中：VTeXt可以简写为,并且支持

28、逻辑运算。示例代码：pv-text=j,messagenewVue(el:#app,data:message:vue基础学习)运行结果：vue基础学习代码介绍：标签用v-text绑定data对象里的message属性，其值将会显示到对应的标签内。v-html指令V-html操作元素中的HTML标签,它将元素当成HTML标签解析后输出。注意：你的站点上动态渲染的任意HTML可能会非常危险，因为它很容易导致XSS攻击。请只对可信内容使用HTML插值，绝不要对用户提供的内容插值。示例代码：newVue(el:，#app*,data:htmlCode:*我是通过v-html解析)运行结果:代码介绍：p

29、标签用v-html绑定data对象里的htmlCode属性，其值将会被解析成hmtl代码，并将其解析后hlml里的值输出到p标签内。v-bind指令vbind指令用于给html标签绑定属性。一，基本用法：给标签动态绑定id值。示例代码：文字newVue(el:ttapp,data:idm:,myid,)代码分析：得到文字,class属性绑定给标签动态绑定class,可以绑定一个或多个类。注意：v-bind:class指令可以与普通的class特性共存。示例代码：newVue(el:#app,data:activeClass:active,eorClass:text-danger)代码分析：,动

30、态为div标签绑定data对象的两属性activeClass和errorClass三style属性绑定给标签动态绑定style样式。示例代码：divv-bind:style=*color:activeColor,fontSize:fontSize+px动态样式newVue(el:#app*,data:activeColor:green,fontSize:30)代码分析：动态为标签绑定style样式值。颜色绑定为data对象的actiVeColor的属性值，字体绑定为fontSize属性值。四，动态绑定图片SrC地址给图片动态绑定SrC地址。示例代码：newVue(el:,#app*,data:

31、Ur1:http)代码分析：动态为标签绑定图片地址。绑定地址为data对象里的url属性值。五，属性拼接可以为标签拼接变更属性。示例代码：文字newVue(el:#app*,data:id:1)代码分析：得到文字.vb字d:id=list-1+id”可以看到，id=list-*+id”是表达式，只有list是真正的字符串。六，v-bind缩写v-bind由于太常用，可以缩写。缩写方式是：直接不写，从冒号开始写。示例代码：7-完整语法newVue(l:ttapp,data:url:*www.bai.du.COnr)V-on指令V-on指令用来绑定一个事件监听器，通过它调用我们Vue实例中定义的方

32、法。示例代码：点我/buttonnewVue(el:,ftapp,data:mes:“我是按钮,methods:openMesOalert(this,mes);)代码介绍:标签通过V-Oclick=OPenMes指令绑定单击事件，当点击按钮时就调用methods中定义的方法：OpenMes()o运行结果：IocaIhQst63343V-on缩写由于v-on很常用所以它也有一个简写方式代表v-on:示例代码：点我QbUttOnnewVueel:ftapp,data:mes:“我是按钮),methods:OpenMes()aler(this,mes);)代码介绍：这里用V-On:CIiCk=ope

33、nMes,替换成了CliCk=openMes,但运行结果是一样的。事件修饰符在事件处理程序中event.PreventDefault()或event.StoPProPagatiOn()是非常常见的需求。尽管我们可以在methods中轻松实现这点，但更好的方式是：methods只有纯粹的数据逻辑，而不是去处理DOM事件细节。为了解决这个问题，Vue.js为v-on提供了事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。1, .stop阻止事件继续传播，即阻止它的捕获和冒泡过程示例代码：newVueel:,#app*,data:nes:你好！),methods:externalClick()a

34、lert（我是外部内容）;,insideClick()alertC我是内部内容）；)运行结果:(oclhst63343O代码介绍：通过示例代码我们可以看出，内部div标签单击事件通过.stop调用了事件修饰符，因而在单击内部div标签时阻止了冒泡事件，否则单击内部div时会先弹出“我是内部内容”的提示框，然后再弹出“我是外部内容”的提示框。2, .prevent阻止默认事件发生即event,preventdefault（）:示例代码：ahref=*#*v-on:click.preventAra运行结果：阻止了a标签的默认刷新。3, .capture添加事件监听器时使用事件捕获模式，即在捕获模式

35、下触发。示例代码：外部点击内部点击newVue(lftapp,data:Imes:你好！),methods：externalclickOalert(我是外部内容)；,insideClickOalertC我是内部内容)；)运行结果:IOCalhst63343包示代码介绍:在点击最里层的div时，externalclick方法先执行，因为externalClick方法在捕获模式执行的，先与冒泡事件。4, .Self当前元素自身时触发处理函数时才会触发函数.原理：是根据event,target确定是否当前元素本身，来决定是否触发的事件函数。示例代码：外部点击1内部点击2newVue(el#app*,data:ffles:你好!,methods:externalClick()alertC我是外部内容)；),insideClick()aIertC我是内部内