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

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局部组件64Prop属性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应用对于公司来说都是非常愿意看到的，另外就是使用前端框架的组件功能，只要组件功能强大，什么样的项目都能够开发。简单来说企业就是为了节约时间与成本。那使用什么样的框架了纵观网络大数据，其中用得最多，最火的就属于Angular,ReactzVueo至于企业到底选用那个框架，那就和企业的项目类型，项目大小以及技术选型等有关了。由于我们的项目类型，以及公司技术构成等因素，我所在公司选择的前端框架为vue。虽然我做前端已经很多年了，但VUe这些前端框架也是这几年才兴起的，所以说我也是从小白到入门到精通。为了让像我以前一样有传统html+js+css技术，而没有接触过vue这类框架的小白能快速入门并能在项目中运用起来，我把VUe的基础以及我的实践经验进行整理和总结，能让读者的入门之路没有那么痛苦。该书主要包括两部分，一部门讲解VUe基本知识，第二部分，结合企业开发的实际项目，利用脚手架(vue-cii)工具搭建和开发一个VUe项目。第一部分vue基础vue是什么？Vue是一套用于构建用户界面的渐进式框架，是一个JavaScriptMVVM库。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。请注意上文加粗的部份，首先对VlJe”渐进式框架”理解：每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。使用vue,你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当AngUlar用；还可以用它的视图，搭配你自己设计的整个下层用。那我们在刚学习时，没必要一上来就搞懂Vue的每一个部件和功能，先从核心功能开始学习，逐渐扩展。同时，在使用中，我们也没有必要把全部件能都拿出来，需要什么用什么就是了，而且也可以把VUe很方便的与其它已有项目或框架相结合。再次我们对“MVVM”进行理解：说起这个MVVM框架，就不得不说MVC框架。在传统开发中，将整个前端页面分成View（视图-V）,Controlled控件-C）,Modal（数据源-M）,即MVC框架。VieW（视图）上发生变化，通过Controller（控件）将响应传入到Model（数据源）,由数据源改变VieW上面的数据。整个过程看起来是行云流水，业务逻辑放在Model当中，页面渲染放在View当中,但在实际运用上却存在f问题:那就是MVC框架允许View和Model直接进行通信！换句话说，View和Model之间随着业务量的不断庞大，会出现蜘蛛网一样难以处理的依赖关系，完全背离了开发所应该遵循的“开放封闭原则”。面对这个问题，MVVM框架就出现了，MVVM分别指View,Model,View-ModelzView通过View-Model的DOMLiStenerS将事件绑定到Model上而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,点击右侧点击右侧Clone or download4,选择弹出框里的“DownloadZIP”。5,下载完成后解压到本地。示例：<scriptsrc=*js/vue-dev/dist/vue.js*><script>注意：在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告！第二种通过<script>使用CDN以下是三个CDN的地址：StaticfileCDN（国内）:https:/cdn.staticfile.orQvue2.2.2vue.min.isunpkg：https:LInDcdnjs:https:CdniS对于制作原型或学习，你可以这样使用最新版本：<scriptSrC="https:C<scriptsrc=*https:/npmvue2.6.8/dist/vue.js*>批注×2: npm 全称为 Node Package Manager.<script>第三种INPM方泅在用Vue构建大型应用时推荐使用NPM安装。安装步骤：1.安装node.js和npm：Vue的脚手架是依赖于node.js的，所以无论是安装新版本还是旧版本，我们都要安装node.jso从node官网下载并安装node,安装步骤很简单，只要一路"next"就可以了。安装完成后，打开命令行工具输入命令node-V,如下图,如果出现对应版本号，就说明安装成功了。(c)2018MicrosoftCorporati.保留所有权利.C:Usorsxy>r×x5c-Vv8.12.0C：Usersxy>我们所需要的npm包管理器，是集成在node中的，所以，直接输入npmv就会如下图所示，显示出npm的版本信息。2,安装vue-di脚手架构建工具:Vuejs提供一个官方命令行工具，可用于快速搭建大型单页应用。进入到Cmd命令框输入npminstall-globalvue-cli0QBS5i:C:Wirxiows$ystem32cmd.exeMicrosoftWindows版本61.7601极权所有<c>2009MicrosoftCorporation保留所有权利.C：XUsersxAdninistrator>npinstallglobaluue-cli这个安装还是要几分钟，如果你的网络条件不是很好，可以使用另外一个安装命令:cnpminstallglobalvue-cli（由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue-cli安装成功后将显示如下界面：C：>JJsers×AdnInistratorxAppDatAXRoaning,一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创建项目:一般在传统项目开始中比如用纯的html/css/js开发时,一般会在本地手动创建文件目录，而用脚手架创建项目时就不需要这样，只需要建立一个存放项目的文件夹，然后在命令提示符窗口，cd目录到文件文件夹下，输入：vueinitwebpack项目名称，然后回车就可以了。如：我们在本地建立一个文件夹“vue-obj”，然打开“命令提示符”窗口，一直Cd到“vue-obj”文件夹下,输入:“vueinitwebpack项目名称”。（项目名称：指的就是我们自己命名的项目名）如下图：-3-OXIicrosoftVindovs10.0.17134.5901c)2018MicrosoftCorporation.保IW所权利1zUsrsxy>d:):Xdvork>:vork>cdvue-obj<oricvue-obj>veInltVebPaCkVg-ObJ按下回车后，它会显示一些提示信息，如下图:令It示养veirWtwebp*ckWeObJc)2018MicrosoftCorporation*仅谕所“权利Vsr>xy>d: ：>cdvork ：work>cdVUePbj :workvue-obj>veinitVebpaCkVULObJProjectnu>e(vue-obj)它的意思是项目名称叫:VUe-Obj,如果你确定取这个项目名，按下enter即可。接下来会出现下图提示。-vewvbpccwe-cbj(c)2018MicrosoftCorporation.保小而“松轲：:Usersxy>d:> :>cdwork> :wortc>cdVUe-Obj> :woritvue-obJ>vueInitwebpeckVVbObJProjectne®eProjectdescription(AVue.jsproject)意思是叫项目的描述信息，直接按钮enter即可。接下来又显示下图提示：WeWtwet)(MckueobjeOXMicrosoftWindovs74*10.0.17131.;90(c)2018MicrosoftCorporati保照所有权利.C:Usersxy>d:0:>cdworkOwork>cdVUe-Obj0:workve-obj>vueinitvebpackn>-objProjectru>ProjectdescriptionAuthorIx;onganxiongyantq.co>)它显示的是作者信息，也直接enter。然后又显示如下图提示:专vMlWebPKkM><objc)2018MicrosoftCorporation.保忸所行权利.-Usrxy>d:>:>cdwork>：vork>cdv*e-objKworkvue-obj>vueInltwebpackvue-objProjectnaoeProjectdescriptionAuthorVu«buildInstallw-rutz?(Yn)意思是叫你确定是否安装vue-rOUter（路由），这个根据项目自身情况来选择。我们这里选择输入：no我们后面用到路由时再安装。接下来又提示下图：veMtwebfMckvueobj-DXIc)2018MicrosoftCorporation.保IW所打权料.hUsersxy>d:>cdworkwork>cdVUepbJ:workv¢-obJ>veinvbpackVunObJProjctProjectdescriptionAuthorVuobuildInstallvue-routrz?UseESLinttolintyourcode?(Yn)意思是让你确定是否安装代码校验。eslint是一个JavaScript的校验插件，通常用来校验语法或代码的书写风格。如果安装了,你写的js代码风格有问题都会给你打印出来，反正我不喜欢。这个看个人To我一般选择n。接下来又显示如下图：H加得n*bpkw-obj(c)2018MicrosoftCorporation.保而加仃权利.?:U>«r$xy>d:):>cdwork)Avork>cdVWobj)：workv*e-obj>ueInitvebpackVUU-ObJProjectnaseProjectdescriptionAuthorVuebuildInstallVWrgter?CsESLinttolintyourcoda?Sotupunittests67n)意思是让你确定是否设置单元测试，一般也是选择n。接下来又显示下图:)2018MicrosoftCorporatioa保汨所仃权利.AUsrsxy>d:：cdwork：ork>cdVULobJ:workve-obj>vueInitvebackVUbobJProjectnaa>?ProjectdescriptionAuthorYu。buildInstallv-routr?UseESLinttolintyourcode?SetupunittestsSetupe2etestsvithNightvatch?(Yn)意思是让你是否安装e2e自动化测试，一般也是输入n。接下来就开始创建项目了。npm-×AUsersxy>d:A>cdvork:vork>cdVUe-Obj:三orkm¢-obj>vueInltvebackvue-objProjectmw*ProjectdescriptionAuthorVebuildInstallve-router?UseESLinttolintyourcode?SetupunittestsS6UPe2etestswithNightwetch?ShouldVOrunnpainstallforyouafterth。projecthasb«ncreated?(2COaDQndod)TUbCMGenerated*rue-obj*.brovsrslistt2.11.3:Brovsorslist2couldfailonreadingBrovsorslist>3.0configusdinothert<bfj-node4t5.3.1:SvitcbtothebfJpackaseforfixesandnefeatures!brovsersllsttl.7.7:BrvMrslist2couldfellonreadingBrovserslist>3.0configusedinothertool创建项目还是要花几分钟，当然还是和你网络有关系，创建成功后将显示下图提示：，UgIifyjsv«bPaCk-PlUSin10.4.6postinstallD:vorkvue-objvue-objnode.Bodulesvebpacknode_Dodulesuglify.Iugin>nodellbost,tnsull.Js«createdIockfiUaspackAg*lock.json.YoushouldCoadtthisfiU.032ajv-kyrords3.4.0rqirosapeerofajv<'6.9.1butnoooisinstalled.YoUoustinstallp««rd9pondnciasIf.SKIPPINGOPTIONALDEPENDENCY：fsventsl.2.7(Dode_eodulesfscvents)：SKIPPINGOPnoKMDS1ENDeCY:UnsupportedPlatforBforfsevents<l.2.7:vantedfos":"darwin*.*ach":(current:oa*：*win32*.*arch*j4*1)MidPdl!24paclutgsfroo650contributorsMdaudited10656PaCkagosin110.538sfoundvulnerabilities(Ilv.IBodorato.1)runpauditfixtofixthe&ornpaaudit(fordetailsogotstarted:cdVue-ObJnrundevJocuenutioccnb÷foundathttps:/ruejs"t««plates.glthub.10vebpack接下来我们就可以按照上图画后的地方，依次输入命令：CdVue-Obj回车>cBe<ntatoncanbefoundathttp8r*rUjS-tevlate8.glthub.iazvbpack:workvu-obj>cdTULobj:orkvue-objvue-obj>npmrundev回车专访符-oricvu-objvu"obj>nprundev如果出现下图所示:说明项目创建成功。我们在浏览器窗口输入：“http:I。CalhoSt:8080”如果显示如下界面，那恭喜你，项目创建并启动成功了！WelmetoYourVuejsAppEssentialUnktEcosystem提示：不推荐新手直接使用NPM方式，尤其是在你还不熟悉基于Nodejs的构建工具时。因此本文示例代码所用vue都是通过VSCriPt>方式来引入的。第一个vue页面很多编程语言的第一页面都喜欢用helloword来宣告诞生，我们也不例外就用hellovue.js来个出场白，我们看下面第一个页面代码。示例代码：<!DOCTYPEhtm><htmllang=*en*xmlns:v-on=*http:/www.w3.org1999xhtml*><head><etacharset=*UTF-8*><title>Title<title><scriptsrc=*jsvue-devdistvue.js*><script><.head><body><divid=*app>>message）<div><.body><script>newVue（el:*#appf,要绑定的I）OV3a.k/要绑定的数据message:,HelloVue.js!>,Teaplate./要解析的模板,可以是#id,HTML或某佃DOMelementcomputed,依赖于别的数据:二的数据A.ICh,/监听方法,监听到某一数据变化时,镉要做的对应操作methods,定义可以在元件或模板内使用的方法)<script><html>我们将代码在浏览器运行一下会出现如下界面:虽然页面很简单，但终归是我们的第一个VUC页面。这第一个VUe页面是怎么渲染数据的呢，示例代码都是什么意思了？请看下面的代码介绍。代码介绍：1,我们通过“<scriptsrc=,zjs/vue-dev/dist/vue.js,z><script>”将vue引入或安装到页面。2,每个Vue应用都需要通过实例化VUe构造器来实现。语法格式如下：newVue)3,通过上面的示例代码我们来看一看Vue构造包含那些基本内容。可以看到在Vue构造器中有一个el参数，它是绑定DoM元素中的ido在示例代码中它绑定了id=app的div,这意味着我们接下来的改动全部在以上指定的div内，div外部不受影响。接下来我们看到有一个data对象，它是用来定义页面中所用到的属性或者叫变量。在示例代码中定义了message这个变量并赋值“HelloVue.js!”当一个VUe实例被创建时，它向VlJe的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时，html视图将也会产生相应的变化。在示例中通过message绑定到div中。当message值发生任何变化，都会立即体现到hmtl页面中。随着以后对vue的不断学习，你还会了解到Vue构造器里还包括了诸如：methods,钩子函数，计算属性等一列方法与属性。在起步阶段我们就只做了解，在接下来的学习中我们会深入学习。基本语法从这一章开始，我们开始学习VUe的基础知识，这一章节主要为介绍一些基本语法和指令。双大括号表达式一，文本插值：之前在介绍vue第一个网页时，已经对xxxx这种双大括号有所了解，Vue视图模板是基于Dom实现的，所以Vue模板都可被解析为有效的Html,用双大括号引住的内容被称为“Mustache”语法（小胡子语法），MUStaChe标签会被相应的数据对象属性值替换，且当这个属性变化是也会随之更新。我们看下面代码，（name会被替换成name属性的值：“我是双大括号”示例代码：<body><divid=*app>><p>（name）<p><div><body><script>newVue(el:'ftapp,data:name:'我是双大括号')<script>运行的结果：我是双大括号文本插值就是通过这种方式,访问vue实例中的data对象对应属性并显示到页面。二，JS表达式运算：通过这种方式，还可使用js语法进行简单的运算和处理，看以下面的示例代码。示例代码：<body><divid=*app>>5+5<br>ok?'YES':'NO'<br>message,split(,).reverse().join(,)<div><script>newVue(el:,ftapp,data:ok:true,message:,RUNOOB,)<script><body>运行结果：10YESBOONUR三，三大括号表达式xxx）这种三大括号表达式,可以输出未被编码的文本所以,要显示数据中的html需要使用三大括号表达式但是,如果xxx使用不当，可能会导致XSS攻击自vuc2.0开始,废弃了三大括号插值,由v-html代替。所以我们知道有这个就行了，不做详情介绍。四，总结：数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值。还可使用“Mustache”语法（双大括号）来进行，语法简单的js运算和处理。xxx这种三大括号表达式,可以输出hmtl代码，但自vue2.0开始,废弃了三大括号插值，由v-html代替。所以不做详情介绍。v-text指令v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变,插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。其中：VTeXt可以简写为,并且支持逻辑运算。示例代码：<divid=*app*><pv-text=j,message<><p><div><script>newVue(el:'#app',data:message:'vue基础学习')<script>运行结果：vue基础学习代码介绍：<p>标签用v-text绑定data对象里的message属性，其值将会显示到对应的<P>标签内。v-html指令V-html操作元素中的HTML标签,它将元素当成HTML标签解析后输出。注意：你的站点上动态渲染的任意HTML可能会非常危险，因为它很容易导致XSS攻击。请只对可信内容使用HTML插值，绝不要对用户提供的内容插值。示例代码：<divid=*app*><pv-htmI=*htmlCode*><p><div><script>newVue(el:，#app*,data:htmlCode:*<bStyle='color:red'>我是通过v-html解析<b>")<script>运行结果:代码介绍：p标签用v-html绑定data对象里的htmlCode属性，其值将会被解析成hmtl代码，并将其解析后hlml里的值输出到p标签内。v-bind指令vbind指令用于给html标签绑定属性。一，基本用法：给标签动态绑定id值。示例代码：<divid=*app*><divv-bind:id="idm”>文字<div><div><script>newVue(el:'ttapp,data:idm:,myid,)<script>代码分析：得到<divid="myid”>文字<div>,class属性绑定给标签动态绑定class,可以绑定一个或多个类。注意：v-bind:class指令可以与普通的class特性共存。示例代码：<divid=*app*><divv-bind:class=*CactiveClass,errorClass*class=*box*><div><div><script>newVue(el:'#app',data:activeClass:'active,eorClass:'text-danger')<script>代码分析：<divclass=*box,activeClass,errorClass>><div>,动态为div标签绑定data对象的两属性activeClass和errorClass三>style属性绑定给标签动态绑定style样式。示例代码：<divid=*app*><divv-bind:style=*color:activeColor,fontSize:fontSize+px'"动态样式<div><div><script>newVue(el:'#app*,data:activeColor:'green,fontSize:30)<script>代码分析：动态为<div>标签绑定style样式值。颜色绑定为data对象的actiVeColor的属性值，字体绑定为fontSize属性值。四，动态绑定图片SrC地址给图片动态绑定SrC地址。示例代码：<divid=*app*><imgClaSS="box":src=*url>><div><script>newVue(el:,#app*,data:Ur1:'http)<script>代码分析：动态为<img>标签绑定图片地址。绑定地址为data对象里的url属性值。五，属性拼接可以为标签拼接变更属性。示例代码：<divid="app”><divv-bind:id="'list-'+id”>文字<div><div><script>newVue(el:'#app*,data:id:1)<script>代码分析：得到<divid="：LiSt1">文字<div>.vb字d:id="'list-1+id”可以看到，id="'list-*+id”是表达式，只有list是真正的字符串。六，v-bind缩写v-bind由于太常用，可以缩写。缩写方式是：直接不写，从冒号开始写。示例代码：<7-完整语法<av-bind:href=*url*><a><!-缩写-><a:href=*url*X/a><scrit>newVue(l:'ttapp,data:url:*www.bai.du.COnr)<script>V-on指令V-on指令用来绑定一个事件监听器，通过它调用我们Vue实例中定义的方法。示例代码：<divid=*app>><buttonV-On:CIiCk="openMes">点我</button<div><script>newVue(el:,ftapp,data:mes:“我是按钮",methods:openMesOalert(this,mes);)<script>代码介绍:<button>标签通过V-Oclick='OPenMes'指令绑定单击事件，当点击按钮时就调用methods中定义的方法：OpenMes()o运行结果：IocaIhQst63343V-on缩写由于v-on很常用所以它也有一个简写方式代表v-on:示例代码：<divid=*app*><buttonCliCk="openMes">点我QbUttOn><div><script>newVueel:'ftapp,data:mes:“我是按钮"),methods:OpenMes()aler(this,mes);)<script>代码介绍：这里用V-On:CIiCk='openMes,替换成了CliCk='openMes,但运行结果是一样的。事件修饰符在事件处理程序中event.PreventDefault()或event.StoPProPagatiOn()是非常常见的需求。尽管我们可以在methods中轻松实现这点，但更好的方式是：methods只有纯粹的数据逻辑，而不是去处理DOM事件细节。为了解决这个问题，Vue.js为v-on提供了事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。1, .stop阻止事件继续传播，即阻止它的捕获和冒泡过程示例代码：<divi(l=*app>><divv-on:c1ick=*extemalClick*class=*divl*><divv-on:click.stop=*insideClick*class=*div2*><div><div><div><scripttype=*textjavascript*>newVueel:,#app*,data:nes:'你好！'),methods:externalClick()alert（'我是外部内容'）;,insideClick()alertC我是内部内容'）；)<script>运行结果:(oclhst63343O代码介绍：通过示例代码我们可以看出，内部div标签单击事件通过.stop调用了事件修饰符，因而在单击内部div标签时阻止了冒泡事件，否则单击内部div时会先弹出“我是内部内容”的提示框，然后再弹出“我是外部内容”的提示框。2, .prevent阻止默认事件发生即event,preventdefault（）:示例代码：ahref=*#*v-on:click.preventAra运行结果：阻止了a标签的默认刷新。3, .capture添加事件监听器时使用事件捕获模式，即在捕获模式下触发。示例代码：<divid=*app*><divv-on:click.CaPtUre="extemalClick”>外部点击<divV-On:CliCk="insideClick'>内部点击<div><div><div><scripttype=*text/javascript*>newVue(lftapp,data:Imes:'你好！'),methods：externalclickOalert('我是外部内容')；,insideClickOalertC我是内部内容')；)<script>运行结果:IOCalhst63343包示代码介绍:在点击最里层的div时，externalclick方法先执行，因为externalClick方法在捕获模式执行的，先与冒泡事件。4, .Self当前元素自身时触发处理函数时才会触发函数.原理：是根据event,target确定是否当前元素本身，来决定是否触发的事件函数。示例代码：<divid=*app*><divV-OrECliCk.self="externalClick”>外部点击1<divV-On:CliCk="insideClick”>内部点击2<div><div><div><scripttype=*text/javascript>>newVue(el#app*,data:ffles:'你好!,methods:externalClick()alertC我是外部内容')；),insideClick()aIertC我是内部内