Vue.js前端开发技术 课件全套 第1-9章 Vue基础 -实战项目

模块一：Vue基础荣耀·分享·共成长01.单元一:初始Vue02.单元二:环境安装单元目录荣耀·分享·共成长1单元一：初始Vue荣耀·分享·共成长知识点荣耀·分享·共成长知识点1：前端技术的发展知识点2：MVVM风格开发框架知识点3：什么是Vue知识点4：Vue的优势知识点1：前技术的发展着web2.0时代的到来，前端在web开发中所占的比重越来越大，专注于内容呈现和网站交互的前端开发人员也逐渐展现出其不可替代性。前端所涉及的领域甚至不限于web应用，如HTML5技术允许我们开发原生的移动应用；ReactNative、Flutter等跨平台框架可以用于开发跨平台的移动应用；还有近些年相当流行的微信/支付宝小程序等。此外，随着微软的新项目ReactNativeforWindows的发布，使用前端技术开发Windows桌面应用也成为了可能。web1.0时代-静态内容呈现。web2.0时代-交互时代。web3.0时代-前端需要具备呈现更加复杂的数据的能力，并提供不亚于复杂的系统应用的交互能力和业务逻辑处理能力。荣耀·分享·共成长前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；MVC是后端的分层开发概念;MVVM是前端视图层的概念，主要关注于视图层分离；MVVM可以拆分成：ViewViewModelModel三部分

，看下面的视图。知识点2：MVVM风格开发框架荣耀·分享·共成长MVVM分三部分Model,View,VMViewModel。MVVM是前端视图层的分层开发思想，主要把每个页面分成了M/V/VM，其中VM是MVVM思想的核心，因为VM是M和V之间的调度者。注前端页面使用MVVM的思想主要是为了开发更加方便，因为MVVM的思想提供了双向数据绑定。意：双向数据绑定是由VM提供的。知识点2：MVVM风格开发框架荣耀·分享·共成长荣耀·分享·共成长Vue.js是目前最火的一个前端框架；Vue.js、Angular.js、React.js一起，并成为前端三大框架。

知识点3：什么是VueAngular来自GoogleReact来自FacebookVue是尤雨溪本人维护的，虽然没有大公司支持，但是也比较流行。Vue.js（读音/vjuː/,类似于

view）是一套构建用户界面的

渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。软件下载：官网安装install=-找到开发版本-右击目标另存为。荣耀·分享·共成长1、轻量级框架只关注视图层,是一个构建数据的视图集合,大小只有几十kb。Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。2、简单易学国人开发，中文文档,不存在语言障碍，易于理解和学习。3、双向数据绑定也就是所谓的响应式数据绑定。这里的响应式不是@media媒体查询中的响应式布局，而是指vue.js会自动对页面中某些数据的变化做出同步的响应。也就是说，vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系，就是以input标签的v-model属性来声明的，因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。知识点4：Vue的优势荣耀·分享·共成长这也就是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。4、组件化Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数，然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。5、视图,数据,结构分离使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作6、虚拟DOM现在的网速越来越快了，但打开已经有缓存的页面还是感觉很慢，是因为浏览器知识点4：Vue的优势荣耀·分享·共成长本身处理DOM也是有性能瓶颈的，尤其是在传统开发中，用JQuery或原生的JavaScriptDOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿。而VirtualDOM则是虚拟DOM的英文，就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。7、运行速度更快像比较与react而言,同样都是操作虚拟dom,就性能而言,vue存在很大的优势知识点4：Vue的优势2单元二：环境安装荣耀·分享·共成长知识点荣耀·分享·共成长知识点1：Vue环境安装知识点2：node环境安装以及npm包管理格开发框架荣耀·分享·共成长软件下载：官网安装install-找到开发版本-右击目标另存为知识点1：Vue环境安装知识点2：node环境安装以及npm包管理荣耀·分享·共成长nodejs是js运行时的运行环境，类比java中jvm。nodejs不是一个js框架，千万不要认为是类似jquery的框架。大家习惯将

ECMAScript6.0

简称为

ES6，它是Javascript语言的下一代标准，它的目标，是使得Javascript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。1.安装nodejs2.使用nodejs直接运行js文件在工作空间打开shift+右击-此处打开命令行node文件名.js知识点2：node环境安装以及npm包管理荣耀·分享·共成长1.下载node软件2.安装的时候，一路next下去，不用做任何的额外设置，装完即可。3.安装完成之后，可以查看其版本号：win+r打开cmd方式1：输入node-v即可查看版本号方式2：输入node--version即可查看版本号荣耀·分享·共成长1、安装nodejs，自动带npm命令工具检测node和npm装包工具：node–v和npm–v2、装cnpm因为npm是国外网址。比较慢。所以采用cnpm装包工具cnpm安装命令：npmicnpm–g如果以上指令尝试多次失败。注意：自己的机器安装：npminstall-gcnpm-registry=3、安装nrmnrm是镜像源切换工具。注意：nrm只是提供了一些npm常用的镜像地址（下载包的url地址），帮助我们快速切换地址。还是使用npm和cnpm进行安装。nrm安装：npminrm–g或者：运行：cnpmInrm-g知识点2：node环境安装以及npm包管理荣耀·分享·共成长4、nrm的使用命令：查看当前所有可用的镜像源地址以及当前使用的镜像源地址：nrmls切换npm镜像源地址：nrmusenpm切换淘宝镜像源地址：nrmusetaobao注意：切换以后，*在列表中的位置会变化知识点2：node环境安装以及npm包管理知而获智，智达高远

THANKS模块二：Vue内部指令荣耀·分享·共成长01.

单元一:条件指令和循环指令02.单元二:事件命令单元目录荣耀·分享·共成长03.单元三:html命令1单元一：条件指令和循环指令荣耀·分享·共成长知识点荣耀·分享·共成长知识点1：v-ifv-elsev-show知识点2：v-for指令：解决模板循环问题知识点1：v-ifv-elsev-showv-if：根据表达式的布尔值判断是否插入标签，当条件为true时显示标签内容，当条件为false时隐藏标签内容v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。荣耀·分享·共成长

v-if案例：<divid="app"><pv-if="msg==1">相等</p><pv-if="msg===1">相等类型不同</p><hr/><pv-if="msg=='1'">相等</p><pv-if="msg==='1'">相等</p></div><script>varvm=newVue({el:'#app',data:{msg:'1'}});</script>知识点1：v-ifv-elsev-show荣耀·分享·共成长知识点1：v-ifv-elsev-show荣耀·分享·共成长

v-else是紧跟在v-if或v-else-if之后。

前边v-if或v-else-if表达式的布尔值判断为false时才显示标签内容

v-else案例：<divid="root"><divv-if="show===a">ThisisA</div><divv-else-if="show===b">ThisisB</div><divv-else>Thisisothers</div></div><script>varvm=newVue({el:root,data:{show:true}})</script>知识点1：v-ifv-elsev-show荣耀·分享·共成长知识点1：v-ifv-elsev-show

条件渲染：v-if:每次都会重新删除或者创建元素有比较高的切换性能的消耗如果元素设计频繁的切换，最好不使用v-ifv-show：每次不会重新进行DOM元素的删除和创建，只是切换了元素的display样式有较高的初始渲染的消耗如果元素很少被现实在页面，不推荐使用v-show荣耀·分享·共成长荣耀·分享·共成长知识点2：v-ifv-elsev-showV-show案例<divid="app"><!--<inputtype="button"value="切换"@click="toggle"/>

<inputtype="button"value="切换"@click="flag=!flag"/><divv-if="flag">这是条件渲染元素</div><divv-show="flag">这是条件渲染元素</div></div><script>varvm=newVue({el:'#app',data:{flag:false注意：data中最后数据没有；。用，隔开},/*methods:{toggle(){this.flag=!this.flag;}}*/});</script>荣耀·分享·共成长知识点2：v-for指令：解决模板循环问题如何解决vuejs中复用形式造成的渲染的数据的问题？

key用来表示每一向单独的数据注意：使用v-for遍历数据的时候，使用key作为每荣耀·分享·共成长知识点2：v-for指令：解决模板循环问题

V-for案例：<divv-for="iteminlist":key="item.id"><inputtype="checkbox"/>{{item.id}}{{}}</div>2单元二：事件命令荣耀·分享·共成长知识点荣耀·分享·共成长知识点1：v-on：绑定事件监听器知识点2：v-model指令知识点3：v-bind指令荣耀·分享·共成长v-on指令：事件绑定直接使用指令v-on v-on:事件名；简化形式，缩写，语法糖 @事件名；注意：无：号注意：绑定以后可以使用在vue实例中数据和方法知识点1：v-on：绑定事件监听器知识点1：v-on：绑定事件监听器荣耀·分享·共成长v-on案例：<divid="app"><!--方式1--><inputtype=“button”value=“点击有惊喜”v-on:click=“show”/>注意：括号可有可无，有参数时必须写<!--方式2缩写，语法糖--><inputtype="button"value="点击有惊喜"@click="show"/></div><script>varvm=newVue({el:'#app',data:{msg:'hello'},methods:{/*show:function(){//写法1：alert('哈哈');console.log('哈哈');}*///写法2：ES6语法ES6就是ECMAScript6是新版本JavaScript语言的标准，目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。show(){//alert(‘哈哈’);//console.log(‘哈哈’);alert(this.msg);//注意：this必须有，指当前的对象。多个方法之间使用，分开}}});</script>知识点2：

v-model指令荣耀·分享·共成长v-model指令：双向数据绑定；指令使用；什么是双向数据绑定？单向绑定：data里的数据可以影响dom元素的表现，但是dom不能影响data，即数据都是从data传向dom。双向绑定：data里的数据和dom元素的表现双方可以互相决定对方的值荣耀·分享·共成长v-model案例：<divid="app">单向的数据绑定M->V<inputtype="text"v-bind:value="msg"/>双向的数据绑定M<->V<inputtype="text"v-model="msg"/></div><script>varvm=newVue({el:'#app',data:{msg:'哈哈'}});</script>知识点2：

v-model指令荣耀·分享·共成长v-bind指令：属性绑定；（注意v-bind绑定属性和样式，如src、style、class）直接使用指令 v-bind:属性名；简化形式，缩写，语法糖 :属性名；知识点3：v-bind指令荣耀·分享·共成长v-bind案例：<divid="app"> <imgsrc="img/1.png"><br/> <!--方式1--><imgv-bind:src="url"><br/> <!--方式2：语法糖,缩写--><img:src="url"><br/></div><script> varvm=newVue({ el:'#app’, data:{url:'img/1.png’ } });</script><imgv-bind:src="url"v-bind:width="myWidth"/>data:{myWidth:'200px',url:'img/1.jpg'}知识点3：v-bind指令3单元三：html命令荣耀·分享·共成长知识点荣耀·分享·共成长知识点1：文本插值知识点2：v-pre&v-cloak&v-once知识点3：v-text&v-html知识点1：文本插值插值表达式（Mustache）错误的：不可以连续写{{firstNamelastName}}<br/> 正确的：可以写变量，也可以写表达式{{firstName+lastName}}<br/> {{firstName+''+lastName}}<br/> {{firstName}}{{lastName}}<br/> 可以写表达式 {{counter*2}}<br/>荣耀·分享·共成长荣耀·分享·共成长知识点1：文本插值插值表达式（Mustache）案例<divid="app"> {{msg}} </div> <!--注意：script位于<div>之后，放在头部不显示ViewModel中间的调度者--> <script> varvm=newVue({ el:'#app’, data:{ msg:'中国加油’ } }); </script>事件修饰符；.stop 阻止冒泡。冒泡：点击子元素，会触发父元素的事件。给子元素添加stop.prevent阻止默认事件.capture添加事件侦听器时使用事件捕获模式。实现捕获触发事件的机制,即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。给父元素添加capture.self 只当事件在该元素本身（比如不是子元素）触发时触发回调。给父元素设置.once事件只触发一次荣耀·分享·共成长.prevent阻止默认事件知识点2：v-pre&v-cloak&v-once荣耀·分享·共成长.prevent阻止默认事件案例<divid="app"><ahref="">百度一下</a><br/>触发事件，默认的跳转实现<ahref=""@click="link">百度一下</a><br/>触发事件，默认的行为被阻止<ahref=""@click.prevent="link">百度一下</a><br/></div><script>varvm=newVue({el:'#app',data:{},methods:{link(){console.log('触发a标签的事件');}}})</script>使用场景：<a>删除</a>知识点2：v-pre&v-cloak&v-once荣耀·分享·共成长可以使用v-cloak指令设置样式，这些样式会在Vue实例编译结束时，从绑定的HTML元素上被移除。当网络较慢，网页还在加载Vue.js，而导致Vue来不及渲染，这时页面就会显示出Vue源代码。我们可以使用v-cloak指令来解决这一问题。知识点2：v-pre&v-cloak&v-once荣耀·分享·共成长v-cloak案例：<script>varapp=newVue({el:'#app',data:{context:'互联网头部玩家钟爱的健身项目'}});</script><divid="app"v-cloak>{{context}}</div>css：[v-cloak]{display:none;}知识点2：v-pre&v-cloak&v-once荣耀·分享·共成长荣耀·分享·共成长.once事件只触发一次知识点2：v-pre&v-cloak&v-once知识点2：v-pre&v-cloak&v-once荣耀·分享·共成长.once事件只触发一次案例<divid="app">触发事件，默认的行为被阻止<ahref=""@click.once.prevent="link">百度一下</a><br/>触发事件，默认的行为被阻止，只有一次<ahref=""@click.once.prevent="link">百度一下</a><br/></div><script>varvm=newVue({el:'#app',data:{},methods:{link(){console.log('触发a标签的事件');}}})</script>v-text用于渲染普通文本，无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。知识点3：v-text&v-html荣耀·分享·共成长荣耀·分享·共成长v-text使用<divid="app"> <div>原来的内容{{msg}}</div> <divv-text="msg">原来的内容</div><script> varvm=newVue({ el:'#app’, data:{ msg:'<h1>中国加油</h1>’ } });</script>知识点3：v-text&v-htmlv-html如果你想输出真正的HTML，你需要使用v-html指令，v-text仅渲染标签，不能解析HTML代码。知识点3：v-text&v-html荣耀·分享·共成长荣耀·分享·共成长v-html使用<divid="app"> <div>原来的内容{{msg}}</div> <divv-html="msg">原来的内容</div></div><script> varvm=newVue({ el:'#app’, data:{ msg:'<h1>中国加油</h1>’ } });</script>结果图：知识点3：v-text&v-html相同点：都可以向页面中插入内容；不同点：位置不同-插值表达式（Mustache）在文本中，v-text/v-html在标签里对原来内容的影响-插值表达式相当于占位符，不会覆盖原来的内容，v-text/v-html指令会覆盖页面中原有的内容带有标签的字符串的展示样式v-html指令，会以html响应的形式展示字符串内容相对来说，后续课程中插值表达式用的比较多，但是v-text和v-html页需要掌握；知识点3：v-text&v-html知而获智，智达高远

THANKSVue组件开发目录5认识组件化1Vue组件化开发247638子级向父级传递父级向子级传递父子组件通信注册组件组件其他补充组件数据存放插槽slot人面对复杂问题的处理方式：任何一个人处理信息的逻辑能力都是有限的所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。但是，我们人有一种天生的能力，就是将问题进行拆解。如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。组件化也是类似的思想：如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。什么是组件化？Vue组件化开发我们将一个完整的页面分成很多个组件。每个组件都用于实现页面的一个功能块。而每一个组件又可以进行细分。Vue组件化思想组件化是Vue.js中的重要思想它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一颗组件树。Vue组件化开发组件化思想的应用：有了组件化的思想，我们在之后的开发中就要充分的利用它。尽可能的将页面拆分成一个个小的、可复用的组件。这样让我们的代码更加方便组织和管理，并且扩展性也更强。所以，组件是Vue开发中，非常重要的一个篇章，要认真学习。注册组件的基本步骤Vue组件化开发组件的使用分成三个步骤：创建组件构造器。注册组件。使用组件。我们来看看通过代码如何注册组件。查看运行结果：和直接使用一个div看起来并没有什么区别。但是我们可以设想，如果很多地方都要显示这样的信息，我们是不是就可以直接使用<my-cpn></my-cpn>来完成呢？注册组件步骤解析这里的步骤都代表什么含义呢？Vue组件化开发1.Vue.extend()：调用Vue.extend()创建的是一个组件构造器。通常在创建组件构造器时，传入template代表我们自定义组件的模板。该模板就是在使用到组件的地方，要显示的HTML代码。事实上，这种写法在Vue2.x的文档中几乎已经看不到了，它会直接使用下面我们会讲到的语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。2.Vponent()：调用Vponent()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。所以需要传递两个参数：1、注册组件的标签名2、组件构造器。3.组件必须挂载在某个Vue实例下，否则它不会生效。（见下页）我们来看下面我使用了三次<my-cpn></my-cpn>而第三次其实并没有生效：第三部的解析Vue组件化开发Vue组件化开发注册组件步骤解析当我们通过调用Vponent()注册组件时，组件的注册是全局的。这意味着该组件可以在任意Vue示例下使用。如果我们注册的组件是挂载在某个实例中,那么就是一个局部组件。在前面我们看到了组件树：组件和组件之间存在层级关系。而其中一种非常重要的关系就是父子组件的关系。我们来看通过代码如何组成的这种层级关系：父子组件错误用法：以子标签的形式在Vue实例中使用因为当子组件注册到父组件的components时，Vue会编译好父组件的模块。该模板的内容已经决定了父组件将要渲染的HTML（相当于父组件中已经有了子组件中的内容了）。<child-cpn></child-cpn>是只能在父组件中被识别的。类似这种用法，<child-cpn></child-cpn>是会被浏览器忽略的。父组件和子组件Vue组件化开发Vue组件化开发注册组件语法糖在上面注册组件的方式，可能会有些繁琐。Vue为了简化这个过程，提供了注册的语法糖。主要是省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来代替。模块的分离写法刚才，我们通过语法糖简化了Vue组件的注册过程，另外还有一个地方的写法比较麻烦，就是template模块写法。如果我们能将其中的HTML分离出来写，然后挂载到对应的组件上，必然结构会变得非常清晰。Vue提供了两种方案来定义HTML模块内容：使用<script>标签使用<template>标签Vue组件化开发组件可以访问Vue实例数据吗?Vue组件化开发组件是一个单独功能模块的封装：这个模块有属于自己的HTML模板，也应该有属性自己的数据data。组件中的数据是保存在哪里呢？顶层的Vue实例中吗？我们先来测试一下，组件中能不能直接访问Vue实例中的data。我们发现不能访问，而且即使可以访问，如果将所有的数据都放在Vue实例中，Vue实例就会变的非常臃肿。

结论：Vue组件应该有自己保存数据的地方。组件数据的存放组件自己的数据存放在哪里呢?组件对象也有一个data属性(也可以有methods等属性，下面我们有用到)。只是这个data属性必须是一个函数。而且这个函数返回一个对象，对象内部保存着数据。Vue组件化开发为什么是一个函数呢？为什么data在组件中必须是一个函数呢?首先，如果不是一个函数，Vue直接就会报错。其次，原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响。Vue组件化开发父子组件的通信Vue组件化开发在上一个小节中，我们提到了子组件是不能引用父组件或者Vue实例的数据的。但是，在开发中，往往一些数据确实需要从上层传递到下层：比如在一个页面中，我们从服务器请求到了很多的数据。其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)。如何进行父子组件间的通信呢？Vue官方提到通过props向子组件传递数据。通过事件向父组件发送消息。在下面的代码中，我直接将Vue实例当做父组件，并且其中包含子组件来简化代码。真实的开发中，Vue实例和子组件的通信和父组件和子组件的通信过程是一样的。props基本用法Vue组件化开发在组件中，使用选项props来声明需要从父级接收到的数据。props的值有两种方式：方式一：字符串数组，数组中的字符串就是传递时的名称。方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。我们先来看一个最简单的props传递：props数据验证Vue组件化开发在前面，我们的props选项是使用一个数组。我们说过，除了数组之外，我们也可以使用对象，当需要对props进行类型等验证时，就需要对象写法了。验证都支持哪些数据类型呢？StringNumberBooleanArrayObjectDateFunctionSymbol当我们有自定义构造函数时，验证也支持自定义的类型。子级向父级传递Vue组件化开发props用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件中。我们应该如何处理呢？这个时候，我们需要使用自定义事件来完成。什么时候需要自定义事件呢？当子组件需要向父组件传递数据时，就要用到自定义事件了。我们之前学习的v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件。自定义事件的流程：在子组件中，通过$emit()来触发事件。在父组件中，通过v-on来监听子组件事件。我们来看一个简单的例子：我们之前做过一个两个按钮+1和-1，点击后修改counter。我们整个操作的过程还是在子组件中完成，但是之后的展示交给父组件。这样，我们就需要将子组件中的counter，传给父组件的某个属性，比如total。单击此处添加大标题自定义事件代码Vue组件化开发父子组件的访问方式：$childrenVue组件化开发有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问跟组件。父组件访问子组件：使用$children或$refsreference(引用)子组件访问父组件：使用$parent我们先来看下$children的访问this.$children是一个数组类型，它包含所有子组件对象。我们这里通过一个遍历，取出所有子组件的message状态。父子组件的访问方式：$refs$children的缺陷：通过$children访问子组件时，是一个数组类型，访问其中的子组件必须通过索引值。但是当子组件过多，我们需要拿到其中一个时，往往不能确定它的索引值，甚至还可能会发生变化。有时候，我们想明确获取其中一个特定的组件，这个时候就可以使用$refs。$refs的使用：$refs和ref指令通常是一起使用的。首先，我们通过ref给某一个子组件绑定一个特定的ID。其次，通过this.$refs.ID就可以访问到该组件了。Vue组件化开发父子组件的访问方式：$parentVue组件化开发如果我们想在子组件中直接访问父组件，可以通过$parent注意事项：尽管在Vue开发中，我们允许通过$parent来访问父组件，但是在真实开发中尽量不要这样做。子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了。如果我们将子组件放在另外一个组件之内，很可能该父组件没有对应的属性，往往会引起问题。另外，更不好做的是通过$parent直接修改父组件的状态，那么父组件中的状态将变得飘忽不定，很不利于我的调试和维护。非父子组件通信刚才我们讨论的都是父子组件间的通信，那如果是非父子关系呢?非父子组件关系包括多个层级的组件，也包括兄弟组件的关系。在Vue1.x的时候，可以通过$dispatch和$broadcast完成$dispatch用于向上级派发事件。$broadcast用于向下级广播事件。但是在Vue2.x都被取消了。在Vue2.x中，有一种方案是通过中央事件总线，也就是一个中介来完成。但是这种方案和直接使用Vuex的状态管理方案还是逊色很多。并且Vuex提供了更多好用的功能，所以这里我们暂且不讨论这种方案，后续我们专门学习Vuex的状态管理。Vue组件化开发ABC为什么使用slotslot翻译为插槽：在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽。插槽的目的是让我们原来的设备具备更多的扩展性。比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。组件的插槽：组件的插槽也是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么。栗子：移动网站中的导航栏。移动开发中，几乎每个页面都有导航栏。导航栏我们必然会封装成一个插件，比如nav-bar组件。一旦有了这个组件，我们就可以在多个页面中复用了。Vue组件化开发

如何封装这类组件呢？slot如何去封装这类的组件呢？它们也很多区别，但是也有很多共性。如果，我们每一个单独去封装一个组件，显然不合适：比如每个页面都返回，这部分内容我们就要重复去封装。但是，如果我们封装成一个，好像也不合理：有些左侧是菜单，有些是返回，有些中间是搜索，有些是文字，等等。如何封装合适呢？抽取共性，保留不同。最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。是搜索框，还是文字，还是菜单。由调用者自己来决定。这就是为什么我们要学习组件中的插槽slot的原因。Vue组件化开发了解了为什么用slot，我们再来谈谈如何使用slot？在子组件中，使用特殊的元素<slot>就可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。我们通过一个简单的例子，来给子组件定义一个插槽：<slot>中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容有了这个插槽后，父组件如何使用呢？Vue组件化开发slot基本使用Vue组件化开发具名插槽slot当子组件的功能复杂时，子组件的插槽可能并非是一个。比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？这个时候，我们就需要给插槽起一个名字。如何使用具名插槽呢？非常简单，只要给slot元素一个name属性即可。<slotname='myslot'></slot>Vue全局指令vm.$refVue全局指令ref主要有两种用法：1、ref加在普通的元素上，获取页面中所有含有ref属性的DOM元素。使用的时候用this.$refs.（ref值）获取到的是dom元素。<!--`vm.$refs.p`将会是DOM结点--><pref="p">hello</p>注意：如vm.$refs.hello，获取页面中含有属性ref=“hello”的DOM元素，如果有多个元素，那么只返回最后一个。2、ref加在子组件上，用this.refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.refs.（ref值）.方法（）就可以使用了。<!--`vm.$refs.child`将会是子组件实例--><child-componentref="child"></child-component>注意：ref需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期mounted(){}钩子中调用，或者在this.$nextTick(()=>{})中调用。Vue.useVue全局指令通过全局方法Vue.use()使用插件。它需要在你调用newVue()启动应用之前完成。//调用`MyPlugin.install(Vue)`Vue.use(MyPlugin)newVue({//...组件选项})Vue.use会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。Vue.js官方提供的一些插件(例如vue-router)在检测到Vue是可访问的全局变量时会自动调用Vue.use()。然而在像CommonJS这样的模块环境中，你应该始终显式地调用Vue.use()vm.$optionsVue全局指令vm.$options是用来获取data属性之外属性的方法。通过这种方式我们可以定义一些变量属性，避免污染全局。请视情况使用。 newVue({customOption:'foo',created:function(){console.log(this.$options.customOption)//=>'foo'}})Vue全局指令vm.$el获取Vue实例使用的根DOM元素。ABrender简单的说，在vue中我们使用模板HTML语法来组建页面的，使用render函数我们可以用js语言来构建DOM。因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定它的简写叫h。createElementVue全局指令Vue.js利用createElement方法创建VNode。createElement方法实际上是对_createElement方法的封装，它允许传入的参数更加灵活，在处理这些参数后，调用真正创建VNode的函数_createElement。_createElement方法有5个参数，context表示VNode的上下文环境，它是Component类型；tag表示标签，它可以是一个字符串，也可以是一个Component；data表示VNode的数据，它是一个VNodeData类型，可以在flow/vnode.js中找到它的定义，这里先不展开说；children表示当前VNode的子节点，它是任意类型的，它接下来需要被规范为标准createElementVue全局指令

的VNode数组；normalizationType表示子节点规范的类型，类型不同规范的方法也就不一样，它主要是参考render函数是编译生成的还是用户手写的。那么至此，我们大致了解了createElement创建VNode的过程，每个VNode有children，children每个元素也是一个VNode，这样就形成了一个VNodeTree，它很好的描述了我们的DOMTree。回到mountComponent函数的过程，我们已经知道vm._render是如何创建了一个VNode，接下来就是要把这个VNode渲染成一个真实的DOM并渲染出来，这个过程是通过vm._update完成的，接下来分析一下这个过程。THANKSVue-cli脚手架VueCLI安装前注意事项Vue-cli脚手架4配置文件CLI插件vuecreate创建项目安装@vue/cli

vue-cli旧版本卸载VueCLI的包名称由

vue-cli改成了@vue/cli。如果你已经全局安装了旧版本的

vue-cli(1.x或2.x)，你需要先通过npmuninstallvue-cli-g或yarnglobalremovevue-cli卸载它。安装vue-cli3.0可以使用下列任一命令来安装新版本npminstall-g@vue/cli或yarnglobaladd@vue/cli。这里node版本必须在8.9或更高版本，可以通过node-v检测，如果低于8.9可去官网下载：/zh-cn/download/这里在安装的时候可能会安装的特别慢或者安装不下来的情况，这里可以用cnpm去安装：

1.先导入cnpmnpminstall-gcnpm--registry=

2.安装@vue/clicnpminstall-g@vue/cli。然后通过vue-V检测版本是否在3.0及以上VueCLI安装前注意事项Vue-cli脚手架安装@vue/cli1.安装@vue/cli默认简单配置和手动配置cnpm

install

-g

@vue/cli@3.3.0

2.使用vuecreate来创建一个新项目。默认简单配置和手动配置Vue-cli脚手架使用vuecreate

来创建一个新项目。Vue-cli脚手架vue项目用到的模块路由history模式Vue-cli脚手架选择Sass/Scss预处理选择Standard标准语法检查及两模块使用vuecreate

来创建一个新项目。Vue-cli脚手架各个模块存为单独的页面是否存配置记录,如果存则下次可选择此记录配置使用vuecreate

来创建一个新项目。Vue-cli脚手架进入项目文件夹并且vue启动项目使用vuecreate

来创建一个新项目。Vue-cli脚手架访问vue项目界面使用vuecreate

来创建一个新项目。CLI插件Vue-cli脚手架vue项目配置中已经安装的模块CLI插件Vue-cli脚手架Vue项目的常用安装的模块Elment-uiMint-uiVant在cmd中安装ui模块并且main.js中配置CLI插件Vue-cli脚手架Vue项目的常用安装的模块SwiperAxios在cmd中安装ui模块并且main.js中配置配置文件Vue-cli脚手架vue.config.js去掉语法检查Vue代理配置及修改端口号配置文件Vue-cli脚手架Vue项目结构谢谢观看Vue路由初识路由vue路由基础2query方式传参什么是动态路由vue-router基本使用vue-router工作原理路由对象属性params方式传参什么是嵌套路由9什么是命名视图什么是命名路由常用的router的指令初识路由对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；vue-router工作原理SPA(singlepageapplication):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。vue-router使用

path-to-regexp

作为路径匹配引擎，用来匹配path和params单页面应用(SPA)的核心之一是:更新视图而不重新请求页面vue-router在实现单页面前端路由时，提供了三种方式：Hash模式和History模式；根据mode参数以及运行环境决定采用哪一种方式初识路由vue路由基础引入vue框架和vue-router模块生成子组件或导入子组件使用VueRouter实例化VueRouter配置路由挂路由使用路由router-link和router-viewvue路由基础vue-router

基本使用使用路由对象属性在使用了vue-router的应用中，路由对象会被注入每个组件中，赋值为this.$route，并且当路由切换时，路由对象会被更新。vue路由基础使用路由对象属性vue路由基础$route.path

字符串，等于当前路由对象的路径，会被解析为绝对路径，如"/home/news"。$route.params

对象，包含路由中的动态片段和全匹配片段的键值对。$route.query

对象，包含路由中查询参数的键值对。例如，对于/home/news/detail/01?favorite=yes，会得到$route.query.favorite=='yes'。$route.matched

数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。$

当前路径的名字，如果没有使用具名路径，则名字为空。Vue路由传参vue路由传参什么是动态路由动态路由是指路由器能够自动的建立自己的路由表，并且能够根据实际情况的变化实时地进行调整。Vue路由传参的主要有query和params两种方式Query方式传参vue路由传参query传值字符串和对象写法$route.query接收query对象传值Params方式传参vue路由传参params传值字符串和对象写法$route.params接收params对象传值使用vuecreate

来创建一个新项目vue路由传参$router.push编程式路由Vue-router在vue-cli项目中的使用Vue-router的导入实例化及配置和导出路由高级使用Vue-router在vue-cli项目中的使用路由高级使用子组件Home.vue和About.vueVue-router在vue-cli项目中的使用路由高级使用Main.js中导入router对象并在Vue中挂载Vue-router在vue-cli项目中的使用路由高级使用Router-link实现路由跳转什么是嵌套路由路由高级使用嵌套路由就是路由里面嵌套他的子路由，子路由关键属性children每一个子路由里面可以嵌套多个组件，子组件又有路由导航和路由容器举例：假设page页面下包含home子组件和goods子组件配置嵌套路由（在page路由下增加一个children属性，配置home和goods两个子组件路由）什么是嵌套路由路由高级使用什么是命名路由给路由命名就是在routers配置路由的时候加一个name属性，特别是在嵌套路由path名称特别长的时候，通过name名称来标识一个路由更加方便一些。以下四种方式都可以导航到/page/home路径：template模板里什么是命名视图路由高级使用简单来说就是，给不同的router-view定义不同的名字，通过名字进行对应组件的渲染。如果router-view没有设置名字，那么默认名字为default。适用场景

有时候我们想在一个界面里同时(同级)展示多个视图，而不是嵌套展示，例如创建一个布局，有

topNav(顶部导航)、sidebar(侧导航)和main(主要内容)三个视图，这个时候命名视图就派上用场了。配置路由：根路由下定义了三个组件index(主内容)：映射在router-view默认视图上。topNav(顶部导航)：映射在router-view的name为top的视图上。sideNav(侧边栏)：映射在router-view的name为side的视图上。常用的router的指令路由高级使用路由元信息meta定义对象的keepAlive使用常用的router的指令路由高级使用路由卫士全局路由卫士beforeEach先抛出一个问题,在SPA项目中如何修改网页标题?

网页标题是通过<title></title>来显示的,但是SPA只有一个固定的HTML,切换到不同页面时,标题并不会变化,但是可以通过JavaScript修改window.document.title='要修改的标题'

那么问题来了,在VUE工程里,在哪里,什么时候修改呢?比较理想的一个方法是,在路由页面发生改变时,统一配置.vue-router提供了导航钩子beforeEach和afterEach,它们会在路由即将改变和改变后触发,所以设置标题可以在beforeEach中完成.导航钩子有3个参数

·to即将进入的目标的路由对象

·from当前导航即将要离开的路由对象

·next调用该方法后才能进入下一个钩子常用的router的指令路由高级使用全局路由卫士afterEach某些页面需要判断是否登录，如果登录了可以访问，否则跳转到登录页面。这里我们通过

localStorage来简易判断：常用的router的指令路由高级使用局部卫士beforeRouteEnter谢谢观看VueX状态管理什么是Vuexvuex基础stateVuex状态管理模式mutationsgettersactionsmodulesdevtoolsplugins

vuex基础什么是Vuex

Vuex是一个专为

Vue.js

应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化.Vuex

作用状态管理-非父子通信缓存后端数据避免重复请求，影响用户体验时光旅行-调试什么是vuex安装npminstallvuex--savesrc中创建store/index.js文件在store.js中导入vuex状态管理库

importVuefrom'vue’

importVuexfrom'vuex'Vue.use(Vuex)实例化并导出vuexExportdefaultnewVuex.Store({…})vuex基础Vuex状态管理模式使用步骤Vuex使用原理图Vuex使用Vuex

的对象stateMutationsActionsGettersmodulespluginsdevtoolsVuex中的stateVuex的使用state:单一状态树

,每个应用将仅仅包含一个

store

实例,vuex的基本数据，用来存储变量。store/index.js定义state子组件template使用stateVuex中muationsVuex的使用提交更新state数据的方法，必须是同步的(如果需要异步使用action)。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。store/index.js定义mutations子组件template使用mutationsVuex中actionsVuex的使用

actions提交的是mutations，而不是直接变更状态,actions可以包含任意异步操作。store/index.js定义actions子组件template使用actionsVuex中gettersVuex的使用store/index.js定义getters从基本数据(state)派生的数据，相当于state的计算属性,具有返回值的方法子组件template使用gettersVuex中modulesVuex的使用模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。store/index.js定义modules子组件template定义子模块cart子组件template使用modules中的vuex对象Vuex中PluginsVuex的使用vuex

可以提供一些组件的使用，这个参数可以订阅一个函数，让这个函数在所有的mutations结束之后执行。Devtools工具Vuex的使用工具包的安装vue-devtools

工具包：/vuejs/vue-devtoolsDevtools的调试使用mapState,mapGetters,mapActions的使用Vuex的使用mapState,mapGetters是把state,getters对象映射到computed中，mapActions是把actions中的方法映射到methods中谢谢观看Vue动画Vue动画transition组件使用@keyframes创建CSS动画appear初始渲染动画什么是过渡和动画 自定义类名结合animate.css实现动画 钩子函数实现动画Vue动画什么是过渡和动画CSS3的出现，使得前端动画直接上了一个层次。我们可以抛掉落后的.animate()方法，通过transition、animation等样式属性，只需要配置起点终点、时间、加速度曲线，甚至还可以配置关键帧、循环播放等，就可以实现超级高大上的动效，同时还不用小心翼翼地避开性能问题。而Vue则是再一次优化了动画的使用，提供了多组件过渡、多元素过渡、CSS动画、Javascript动画等各种方式，开发者可以很方便地实现一些常用的列表过渡、页面切换等动画效果。不知道大家平时用的多不多，但如果你也有仔细研究的话，会发现还是挺有意思的。Vue动画transition组件<transition>元素作为单个元素/组件的过渡效果，它只会把过渡效果应用到其包裹的内容上，而不会额外渲染DOM元素，也不会出现在检测过的组件层级中。Vue过渡主要分为两类：CSS动画和Javascript动画。根据官方描述，Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果，举例如下：在CSS过渡和动画中自动应用class（CSS动画）可以配合使用第三方CSS动画库，如Animate.css（CSS动画）在过渡钩子函数中使用JavaScript直接操作DOM（Javascript动画）可以配合使用第三方JavaScript动画库，如Velocity.js（Javascript动画）Vue动画CSStransitionCSStransitions提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用CSStransitions后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。通常将两个状态之间的过渡称为隐式过渡（implicittransitions），因为开始与结束之间的状态由浏览器决定。transition使用CSStransitions可以决定哪些属性发生动画效果(明确地列出这些属性)，何时开始(设置delay），持续多久(设置duration)以及如何动画(定义timingfuntion，比如匀速地或先快后慢)。CSS过渡由简写属性transition定义是最好的方式：CSS过渡Vue动画csstransition的基本使用csstransition属性说明property 指定哪个或哪些CSS属性用于过渡。只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。all则为全部属性duration 指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长timing-function 指定一个函数，定义属性值怎么变化。常用如linear、easedelay 指定延迟，即属性开始变化时与过渡开始发生时之间的时长例子，下面是简写和不简写的例子：Vue动画transition组件使用Vue提供了transition的封装组件，可以给元素和组件添加entering/leaving过渡。我们看看有哪些情况下可以使用transition：条件渲染(使用v-if)条件展示(使用v-show)动态组件组件根节点transition的封装组件，主要是结合组件生命周期，在一些特殊逻辑（如v-if、v-show、v-for）里增加钩子，来触发动画的实现。我们知道，Vue里面实现动画过渡有CSS和Javascript两种，而两种又是可以结合的。Vue动画transition组件例子Vue动画transition组件例子解析这里是使用的CSStransition方式来实现动画过渡的，我们看看在切换v-if的时候都发生了什么:(1)v-if绑定值的变更，导致插入或删除包含在transition组件中的元素。(2)自动嗅探目标元素是否应用了CSS过渡或动画。这里的确使用CSS过渡，于是会在元素添加时添加CSS类名，并判断动画加载完之后删除CSS类名。(3)如果过渡组件提供了JavaScript钩子函数，这些钩子函数将在恰当的时机被调用。（这里由于没有使用到，故不会执行）(4)如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM操作(插入/删除)在下一帧中立即执行。（当然在我们的例子中，这一步也不会生效）Vue动画transition组件实现逻辑根据前面内容，我们可以获得以下的信息。可以使用requestAnimationFrame来请求浏览器在下一次重绘之前调用指定的函数来更新动画当CSStransition结束时，会触发transitionend事件所以结合之前的Vue源码，能大概得到这里的实现方式transition组件关注子元素是否展示，包括使用v-if/v-else/v-for等指令绑定数据生成的元素。当元素状态变更（display->none或none->display）时，预埋的钩子检测是否应用了CSS过渡。若使用了CSS过渡，则分两种情况讨论。Vue动画transition组件实现逻辑进入动画可当元素插入完成后（mounted），给元素添加对应v-enter和v-enter-active类名，此时元素开始动画过渡。同时通过requestAnimationFrame来指定下一帧绘制前，给元素添加v-enter-to类名，同时移除v-enter类名。设置动画结束时间，或者通过transitionend事件监听，在过渡结束后，移除v-enter-to和v-enter-active类名。离开动画

当元素删除前（beforeDestroy），给元素添加对应v-leave和v-leave-active类名，此时元素开始动画过渡。同时通过requestAnimationFrame来指定下一帧绘制前，给元素添加v-leave-to类名，同时移除v-leave类名。设置动画结束时间，或者通过transitionend事件监听，在过渡结束后，移除v-leave-to和v-leave-active类名，同时执行元素删除操作。Vue动画关键帧动画通一旦完成动画的时间设置，接下来就需要定义动画的表现。通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。因为动画的时间设置是通过CSS样式定义的，关键帧使用percentage来指定动画发生的时间点。0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。当然，也可包含额外可选的关键帧，描述动画开始和结束之间的状态。Vue动画CSSanimationCSSanimations使得可以将从一个CSS样式配置转换到另一