《Vue应用程序开发（第2版）》全套教学课件

第1章：Vue.js入门《Vue应用程序开发》

01第1章第1节Vue.js入门(1-3节)02第2章第一个Vue.js应用（1-3节）03第2章第一个Vue.js应用（4-6节）04第3章Vue.js内置指令第1节基本指令05第3章Vue.js内置指令第2节v-bind指令06第3章Vue.js内置指令第3节v-model指令07第4章Vue.js组件第1节组件的基本使用08第4章Vue.js组件第2节组件通信09第4章Vue.js组件第动态组件及实例（3-4节）12第5章Vue.js自定义指令13第6章Vue.js过渡和动画css过渡&css动画（1-2节）14第6章Vue.js过渡和动画JavaScript过渡&自定义过渡（3-4节）15第7章Vue脚手架第1节快速构建项目16第7章Vue脚手架第2节前端路由17第7章Vue脚手架第3节服务器端访问axios18第7章Vue脚手架第4节Vite基础19第8章Vuex简单使用（1-3节）20第8章Vuex第4节Vuex的复杂使用21第8章Vuex第5节章节案例22第9章跨平台开发uni-app（1-6节）全套可编辑PPT课件010203005Part11.1初识Vue.jsPart21.2使用Vue.js理解MVVM模式Part31.3Vue.js的响应式理解目录CONTENTS1.1初识Vue.js1.1.1什么是Vue.jsVue（读音/vjuː/）是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。渐进式框架的优点是灵活、易用和高效。Vue.js颠覆了传统前端开发模式，提供了现代Web开发中常见的高级功能。1.1初识Vue.js颠覆了传统的前端开发模式，不需要频繁操作DOM元素，通过数据的双向绑定来更新页面，有更多的时间去思考业务逻辑。下面我们通过两段代码了比较传统开发模式和使用Vue.js开发的不同。1.1.2为什么要使用Vue.js<divid="output"></div><buttonid="increment">Increment</button>varcounter=0;$(document).ready(function(){ var$output=$('#output'); $('#increment').click(function(){ counter++; $output.html(counter); }); $output.html(counter);});<divid="app"> <div>{{ counter }}</div> <buttonv-on:click="increment">Increment</button></div>newVue({ el:'#app', data:{ counter: 0 }, methods:{ increment:function(){ this.counter++; } }});1.轻量高效2.组件化开发3.前端路由4.状态管理5.虚拟DOM1.1初识Vue.jsVue.js还有以下主要特点：1.1初识Vue.js在上面的代码中我们提到了Vue.js在设计上使用了MVVM模式。MVVM全称是ModelViewViewModel，它本质上就是MVC的改进版。MVVM模式使用的是数据绑定基础架构，它可以轻松构建视图UI的必要元素。ViewModel负责取出Model的数据同时帮忙处理View中由于需要展示内容而涉及的业务逻辑。1.1.3MVVM模式1.3Vue.js的响应式理解从图中可以看出：1.Model与ViewModel之间的双向关系（1）Model通过Ajax通信，发送数据给ViewModel。（2）ViewModel也可以通过Ajax通信，发送请求给Model。2.ViewModel与View之间的双向关系（1）ViewModel中的数据改变，可以同时改变View上的显示内容。（2）View上的内容改变，也可以同时改变ViewModel中对应的数据。1.2使用Vue.js理解MVVM模式图中的DOMListeners和DataBindings看作两个工具，它们是实现双向绑定的关键。当View发生变化时，ViewModel中的DOMListeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；当Model中的数据更新时，DataBindings工具会帮我们更新页面中的DOM元素。下面我们通过一个实例帮助我们进一步了解数据的双向绑定，在Vue.js中我们可以使用v-model指令在表单上创建双向数据绑定。1.2使用Vue.js理解MVVM模式<divid="app"><p>input元素：</p><inputv-model="message"placeholder="编辑我……"><p>消息是:{{message}}</p></div><script>newVue({el:'#app',data:{message:'hello',}})</script>1.3Vue.js的响应式理解许多前端框架（如Angular,React,Vue）都有自己的响应式引擎。对于Vue响应式，官方文档的解释是：当你把一个普通的JavaScript对象传给Vue实例的data选项，Vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。简单理解就是：修改data属性之后，Vue立刻监听到，立刻渲染页面，更新页面。下面我们通过一个实例来具体理解以下Vue的响应式。1.3Vue.js的响应式理解感谢聆听

THANKYOUFORLISTENING第2章：第一个Vue.js应用《Vue应用程序开发》

010203005Part12.1Vue.js的使用Part22.2实例及选项Part32.3数据绑定目录CONTENTS0Part42.4计算属性Part52.5生命周期Part62.6章节案例使用Vue.js的方式有很多，本章节介绍最常用的三种方式：1.<scriptsrc="Vue.js"type="text/javascript"></script>2.<scriptsrc="/ajax/libs/vue/3.5.13/vue.global.min.js"></script>3.通过npm安装提示：使用npm安装属于工程化的开发，在第7章Vue脚手架的时候再详细介绍。在第7章以前讲基础内容的时候，我们全部使用引入Vue.js文件的形式，在讲大项目的时候，我们全部使用vue-cli的工程化开发。2.1Vue.js的使用1.编辑器的选择2.

//ajax/libs/vue/3.5.13/vue.global.min.js提示：建议不要使用压缩过的js，虽然体积小，但是没有报错信息，对我们调试程序非常不利。2.1Vue.js的使用2.2实例及选项Vue.js应用的创建很简单，每个Vue应用都会通过createApp()函数创建一个新的应用实例，应用实例必须在调用了.mount()方法后才会渲染出来。创建Vue实例的代码如下：1.Vue实例2.2实例及选项模板（template）选项可以用其指定的模板内容渲染el选项所挂载的位置，原来的<div>标签会被替换为template选项中的<p>标签。实例代码如下：2.模版varapp=Vue.createApp({

template:"<p>template选项渲染的内容</p>",}).mount("#app")2.2实例及选项数据（data）选项是声明页面中可以使用的或者需要双向绑定的数据。通常，所有页面中需要用到的数据都会在data内声明，以避免数据因散落在业务逻辑中而难以维护，真正实现数据和视图的分离。data选项中的数据会存储在挂载的容器内或模板中，并通过一种特殊的语法（双大括号）使用，实例代码如下：3.数据<divid="app">{{msg}}</div><script>varapp=Vue.createApp({template:"<p>template选项渲染的内容：{{msg}}</p>",data(){return{name:"中国谚语",len:14,msg:"一寸光阴一寸金，寸金难买寸光阴。"}}}).mount("#app")</script>2.2实例及选项方法（methods）选项中定义的是页面或模板中需要调用的一些方法，这些方法会运行一些业务逻辑。在methods的内部，开发者可以使用this直接访问组件选项中data()函数返回的数据对象中的属性，实例代码如下：4.方法<divid="app">{{say()}}，{{msg}}</div><scriptsrc="../js/vue.js"></script><script>Vue.createApp({data(){return{name:'中国谚语',msg:'一寸光阴一寸金，寸金难买寸光阴。'}},methods:{say(){return"你好,"+}}}).mount("#app");</script>2.3数据绑定插值是最简单、最常用的数据绑定方法，通过使用{{}}来绑定数据。{{}}是Mustache的语法，实例代码如下：1.插值<divid="app">{{content}}</div><scriptsrc="vue.js"></script><script>Vue.createApp({data(){return{content:'Vue学习教程'}},}).mount("#app")</script>2.3数据绑定{{}}之中除了存放最基本的数据，还可以存放JavaScript表达式，实例代码如下：2.表达式绑定<divid="app">{{number/100}}{{completed?'完成':'未完成'}}{{text.split('.').reverse().join(".")}}</div><scriptsrc="vue.js"></script><script>Vue.createApp({data(){return{number:200,completed:false,text:'abc.123'}}}).mount("#app")</script>2.3数据绑定简单来说，双向数据绑定就是当数据发生变化时，相应的视图会进行更新。当视图更新时，数据也会随之变化，这样开发者就不必去操作DOM对象了。双向数据绑定在Vue.js中的简便的实现方法就是直接使用v-model指令，实例代码如下：3.双向数据绑定<divid="app"><p>端午节有哪些习俗：</p><inputv-model="message"placeholder="请输入"><p>端午节习俗有:{{message}}</p></div><script>Vue.createApp({data(){return{message:"吃粽子",}}}).mount("#app")</script>2.3数据绑定在表达式后边可以添加过滤器，用’|’来进行分隔。例如：{{name|uppercase}}提示：这种方式在第4章详细讲解4.过滤器感谢聆听

THANKYOUFORLISTENING第2章：第一个Vue.js应用《Vue应用程序开发》

010203005Part12.1Vue.js的使用Part22.2实例及选项Part32.3数据绑定目录CONTENTS0Part42.4计算属性Part52.5生命周期Part62.6章节案例2.4计算属性计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue会在其依赖的任何值导致该计算属性改变时更新DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。模板内的表达式常用于简单的运算，当逻辑过于复杂时，通常使用计算属性。举例：2.4计算属性举例说明计算属性和methods的区别：methods方法和computed计算属性，两种方式的最终结果是完全相同计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。methods方法，每当触发重新渲染时，调用方法将总会再次执行函数。2.5生命周期任何事物从产生到消亡都有自己的生命周期。Vue实例创建后，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子。我们可以利用这些钩子，在合适的时机执行我们的业务逻辑，以满足功能需求。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。2.5生命周期Vue.js的生命周期对应的方法方法名含义beforeCreate（创建前）在实例初始化之后，在数据观测（DataObserver）和event/watcher事件配置之前被调用。created（创建完毕）在实例创建完成后被立即调用，此时已完成数据绑定和事件配置，但尚未生成DOM。beforeMount（挂载前）在挂载开始之前被调用，且在服务器端渲染期间不能被调用。mounted（挂载结束）在挂载之后被调用，且在服务器端渲染期间不能被调用。beforeUpdate（更新前）当数据发生变化时调用，此时DOM结构尚未完成更新，且在服务器端渲染期间不能被调用。updated（更新完成）实例和DOM结构完成更新后被调用，在服务器端渲染期间不能被调用。beforeUnmount（卸载前）在Vue实例卸载之前调用，此时实例仍然可用，在服务器端渲染期间不能被调用。unmounted（卸载完成）在Vue实例卸载之后调用，Vue实例指示的所有实例指令和子实例都会解绑定，所有的事件监听器都会被移除，在服务器端渲染期间不能被调用。2.6【章节案例】：简单的计时器2.6.1案例描述页面计时器从0开始，单击“开始计时”按钮，开始按秒计时。单击“暂停计时”按钮，计时会被暂停，当再次单击“开始计时按钮”，会继续计时。2.6.2案例设计使用插值法插入Vue示例的数据给按钮添加单击事件在方法属性中，定义2个方法使用定时器感谢聆听

THANKYOUFORLISTENING第3章：Vue.js内置指令《Vue应用程序开发》

010203005Part13.1基本指令Part23.2v-bind指令Part33.3v-model指令Part43.4章节案例目录CONTENTS第3章Vue.js的内置指令什么是指令呢？在前面章节中我们用到的v-model就是一个指令。Vue.js的指令是以“v-”开头的HTML特性，它们作用于HTML元素。指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML标签属性。内置指令包括哪些指令呢？v-bind、v-model也是内置指令，用法复杂一些，单独讲解。3.1基本指令3.1.1v-text和v-html指令v-text主要用来更新textContent，将实例中的数据当成纯文本输出，可以等同于JavaScript的text属性。v-html会将实例中的数据当成HTML标签解析后输出，它等同于JavaScript的innerHtml属性。3.1基本指令<divid="app"><pv-text="html"></p><pv-html="html"></p></div><scriptsrc="vue.js"></script><script>Vue.createApp({data(){return{html:"<inputtype='date'>"}}}).mount('#app')</script>3.1.1v-text和v-html指令3.1基本指令3.1.2v-cloak指令v-cloak指令是用来保持在元素上直到关联实例结束时进行编译。在页面加载时会闪烁，先显示:{{message}}，然后才会编译为：helloworld!在页面加载慢的时候闪烁情况会尤为明显。V-cloak指令不需要表达式，经常和CSS的“display：none；”配合使用。 [v-cloak]{ display:none; }3.1基本指令v-once指令在日常开发中用的很多，只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。v-once指令也不需要表达式。3.1.3v-once指令<divid="app"><pv-once>原始值：{{msg}}</p><p>后面的：{{msg}}</p><inputtype="text"v-model="msg"/></div><scriptsrc="vue.js"></script><script>Vue.createApp({data(){return{msg:"今天天气很好！"}}}).mount('#app')</script>3.1基本指令v-if可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。<av-if="ok">yes</a>如果属性值ok为true，则显示。否则，不会渲染这个元素。v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。3.1.4v-if、v-else和v-show指令<divid="app"><pv-if="status===1">当status是1时显示该行</p><pv-else-if="status===2">当status是2时显示该行</p><pv-else>否则显示该行</p></div><scriptsrc="vue.js"></script><script>Vue.createApp({data(){return{status:1}}}).mount('#app')</script>3.1基本指令v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染。v-show不管条件是否成立，都会渲染html。检查页面元素发现：v-if是注释，v-show是设置CSS样式display的值为none。3.1.4v-if、v-else和v-show指令3.1基本指令v-on指令是来绑定事件监听器的，类似原生JavaScript的onclick的用法。这样我们就可以做一些交互了。v-on:click可以简写成@click，以后都会使用这种简写方法，不再另行说明。v-on可以绑定很多javascript事件。3.1.5v-on指令3.1基本指令Vue支持以下修饰符<!--阻止单击事件冒泡--><av-on:click.stop="doThis"></a><!--提交事件不再重载页面--><formv-on:submit.prevent="onSubmit"></form><!--修饰符可以串联--><av-on:click.stop.prevent="doThat"></a><!--只有修饰符--><formv-on:submit.prevent></form><!--添加事件侦听器时使用事件捕获模式--><divv-on:click.capture="doThis">...</div><!--只当事件在该元素本身（比如不是子元素）触发时触发回调--><divv-on:click.self="doThat">...</div><!--点击事件将只会触发一次--><av-on:click.once="doThis"></a>v-for指令用于遍历数组和对象，以及迭代整数，其表达式需要结合in来使用,代码如下。3.1.6v-for指令3.1基本指令<divid="app"><ul><liv-for="clothinclothes">{{}}:${{cloth.price}}</li></ul></div><scriptsrc="vue.js"></script><script>Vue.createApp({data(){return{clothes:[{name:'衬衫',price:'180',},{name:'外套',price:'200',},{name:'裤子',price:'380'}]}}}).mount('#app');</script>在v-for表达式中，clothes是数组，cloth是当前数组元素的别名，循环生成的每个<li>标签内部都能访问到与之对应的当前cloth数据。v-for表达式支持将一个可选参数作为当前项的索引，代码如下。3.1基本指令<divid="app"><ul><liv-for="(cloth,index)inclothes">{{index}}-{{}}:${{cloth.price}}</li></ul></div><scriptsrc="vue.js"></script><script>Vue.createApp({data(){return{clothes:[{name:'衬衫',price:'180',},{name:'外套',price:'200',},{name:'裤子',price:'380',}]}}}).mount('#app')</script>v-for指令除了可以遍历数组，还可以遍历对象的属性，代码如下。3.1基本指令<divid="app"><ul><liv-for="valueinuser">{{value}}</li></ul></div><scriptsrc="vue.js"></script><script>Vue.createApp({data(){return{user:{firstName:'John',lastName:'Doe',age:30}}}}).mount('#app')</script>v-for指令遍历对象属性时，有两个可选参数，分别是key和index，代码如下。3.1基本指令<divid="app"><ul><liv-for="(value,key,index)inuser">{{index}}-{{key}}:{{value}}</li></ul></div><scriptsrc="vue.js"></script><script>Vue.createApp({data(){return{user:{firstName:'John',lastName:'Doe',age:30}}}}).mount('#app')</script>Vue包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：push()添加元素pop()删除最后一个元素shift()删除第一个元素unshift()添加一个元素到数组最前面splice()方法用于插入、删除或替换数组的元素sort()排序（升序）reverse()排序（降序）变异方法(mutationmethod)，即使用以上方法会改变被这些方法调用的原始数组。3.1.7数组更新3.1基本指令感谢聆听

THANKYOUFORLISTENING第3章：Vue.js的内置指令《Vue应用程序开发》

010203005Part13.1基本指令Part23.2v-bind指令Part33.3v-model指令Part43.4章节案例目录CONTENTS3.2v-bind指令v-bind

指令的基本语法格式为“v-bind:属性名”，Vue

官方为其提供了一个简写方式，如v-bind:src可以简写成:src，代码如下：3.2v-bind指令使用v-for指令渲染了课程类名和课程列表，如果某课程是热门课程，希望在课程名称后面标注热门图标，则需要绑定样式。例如，在热门课程的数据中增加数据hot:true，在非热门课程的数据中增加数据hot:false（或者不增加数据），代码如下。感谢聆听

THANKYOUFORLISTENING第3章：Vue.js内置指令《Vue应用程序开发》

010203005Part13.1基本指令Part23.2v-bind指令Part33.3v-model指令Part43.4章节案例目录CONTENTS预期：随表单控件类型不同而不同。限制：<input><select><textarea>components修饰符：.lazy-取代input监听change事件.number-输入字符串转为有效的数字.trim-输入首尾空格过滤3.3v-model指令v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：text和textarea元素使用value属性和input事件；checkbox和radio使用checked属性和change事件；select字段将value作为prop并将change作为事件。3.3v-model指令对于需要使用输入法(如中文、日文、韩文等)的语言，你会发现v-model不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用input事件。v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：text和textarea元素使用value属性和input事件；checkbox和radio使用checked属性和change事件；select字段将value作为prop并将change作为事件。3.3v-model指令感谢聆听

THANKYOUFORLISTENING第4章：Vue.js组件《Vue应用程序开发》

010203005Part14.1组件的基本使用Part24.2组件通信Part34.3动态组件Part44.4章节案例目录CONTENTS第4章Vue.js组件组件是可复用的Vue实例，通过“<>”包含组件名（如<button-counter>）在模板中使用。我们可以把组件作为自定义元素来使用。因为组件是可复用的Vue实例，所以它们与newVue接收相同的选项，例如data、computed、watch、methods以及生命周期钩子等。前端组件化开发是现在前端框架中一个非常重要的思想，将页面内容进行拆分之后，可独立开发独立维护，可复用性大大提高。哪个地方出问题，直接去修改的对应的组件即可。团队人员可以各自修改自己的组件，相互不影响，不冲突。第4章Vue.js组件组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：4.1.1全局组件官方提供了直接使用Vue的component方法可以直接全局注册组件。（1）语法格式如下：第一步：注册Vponent(tagName,options)Vponent('my-component',{template:'<div><h1>这里是组件的内容</h1><h2>这里是组件的内容</h2></div>' });tagName为组件名，options为配置选项。第二步：使用组件我们可以通过<my-component></my-component>来调用组件。（2）使用范围：所有实例都能用全局组件。4.1.2局部组件我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用。（1）语法格式如下：第一步：注册<script>varChild={template:"<div><p>我是色板</p>\<inputtype='color'/>\</div>"}Vue.createApp({components:{'my-component':Child}}).mount("#app");</script>my-component为组件名，Child为配置选项。第二步：使用组件我们可以通过<my-component></my-component>来调用组件。（2）使用范围：只能在当前实例中使用该组件。4.1.3组件内的data必须是一个函数组件中的data不是一个对象，而是一个函数。如果data是一个对象则会影响到其他实例，因为JavaScript对象是引用类型。data不是函数data是函数4.1.4使用template元素创建组件为了使HTML代码和JavaScript代码是分离的，便于以后的阅读和维护，我们通常建议使用<script>或<template>标签创建组件模板内容。在上例中，我们将组件内的元素直接写在<template></template>标签内，这样就可以正常给标签换行，符合我们之前写HTML标签的写法规则，使代码的可读性变得更强。这里同样要注意<template></template>内只能由一个根节点，否则浏览器会报错。4.1.5组件嵌套组件嵌套是把组件与组件嵌套在一起，在父组件下的模板中，以标签的形式调用子组件。下图组件树的示意图形象的展示了组件之间的层级关系：4.1.5组件嵌套实例：父组件<parent></parent>以标签的形式调用了子组件<my-child1></my-child1>和<my-child2></my-child2>。4.1.6使用props传递数据组件不仅仅要把模板的内容进行复用，更重要的是组件间要进行通信。通常外部的数据要传给组件或者父组件的数据要传给子组件，这种正向传递数据的过程就是通过props来实现的。在组件中，使用选项props来申明需要从父级接收的数据，props的值可以是两种，一种是字符串数组，一种是对象。1.props的值是数组<divid="app"><my-componentmessage="来自父组件的数据"></my-component></div><script>varapp=Vue.createApp({})ponent('my-component',{props:['message'],template:'<div>{{message}}</div>'});app.mount("#app")</script>1.props的值是数组使用指令v-bind来动态绑定props的值，当父组件的数据变化时，也会传递给子组件。<divid="app"><my-component:message='message'></my-component></div><scriptsrc="vue.js"></script><script>varapp=Vue.createApp({data(){return{message:'外部数据'}}})ponent('my-component',{props:['message'],template:'<div>{{message}}</div>'});app.mount("#app")</script>1.props的值是数组项目开发中会经常遇到以下两种需要改变prop的情况：（1）父组件将初始值传递进来，子组件将它作为初始值保存起来，在自己的作用域中可以随意使用和修改初始值。在这种情况下，可以在组件data中再声明一个数据，并引用父组件的props。（2）props作为需要被转换的原始值传入。这种情况下使用计算属性即可。2.props的值是对象前面我们提到props选项的值为一个对象或者数组，前面实例我们都使用的是数组。有时候我们对传入参数进行检验，那么我们就需要让props的值为一个对象了。下面通过下面实例学习如何对传入参数props进行数据验证。感谢聆听

THANKYOUFORLISTENING第4章：Vue.js组件《Vue应用程序开发》

010203005Part14.1组件的基本使用Part24.2组件通信Part34.3动态组件Part44.4章节案例目录CONTENTS4.2.2组件通信组件是Vue.js最强大的功能之一，组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。使用组件不仅仅是要把模板的内容进行复用，更重要的是组件间的通信。通信方式根据组件之间的关系有不同之处。组件间通信包括三种情况：父组件向子组件通信、子组件向父组件通信、非父子组件之间的通信。1.父组件向子组件传递数据通常父组件的模板中包含子组件，父组件要正向的向子组件传递数据或者参数，子组件接收到后根据参数的不同来进行对应的渲染。这个正向的数据传递就是父-->子组件通信。在Vue组件中是通过props来实现的。props的值有两种：一种是字符串数组，一种是对象。1.父组件向子组件传递数据上面实例中，数据传递的步骤可理解为：子组件在props中创建了两个属性["message","ImgSrc"]，用以接收父组件传过来的值；在父组件中注册子组件；在子组件标签中添加子组件props中创建的属性；把需要传给子组件的值赋给该属性。props字符串数组中的message和imgsrc会作为组件my-component的属性来赋值父组件要传递的数据，子组件中渲染出来的数据是来自与父组件。1.父组件向子组件传递数据由于HTML特性不区分大小写，当使用DOM模板时，驼峰命名（ImgSrc）的props名称在组件中使用时要转为短横分割命名（img-src），否则浏览器会警告，无法正常渲染图片。1.父组件向子组件传递数据所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。2.子组件向父组件传递数据当子组件需要向父组件传递数据时，就要用到自定义事件。v-on除了可以监听DOM事件，还可以用于组件之间的自定义事件。2.子组件向父组件传递数据子组件通过$emit()来触发事件，父组件在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件。在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件2.子组件向父组件传递数据子组件通过$emit()来触发事件，第一个参数是事件名称，第二个参数是传递参数。3.非父子组件通信非父子组件之间通信时，需要引入一个事件总线实例（bus）作为媒介，通过bus触发事件和监听事件来实现组件之间的通信和参数传递。这类似于子组件向父组件通信，但是利用了一个新的Vue实例作为媒介，而不是以当前Vue实例作为媒介。3.非父子组件通信使用空的Vue实例作为中央事件总线（bus）。bus同时负责触发和响应事件，起到了中介的作用。4.2.4创建自定义组件在项目开发的时候，通常需要自己开发组件方便在项目中复用，下面我们通过一个实例完整的学习一下如何创建自定义组件。4.2.4创建自定义组件当点击“请选择课程”的时候，课程列表会显示出来，选择一门课程以后，被选择的课程就会显示在页面。实现该实例首先要进行组件注册，该实例使用全局组件和局部组件都可以实现。4.2.4创建自定义组件代码略代码中使用了组件嵌套，在父组件中使用了子组件，并且实现了组件间的通信。父组件将值下发给子组件，子组件使用v-for将列表值显示出来，这时我们只要改变父组件的值，子组件中列表值也会改变。我们使用$emit()触发事件实现点击子组件的列表项时，就将该列表项的值传到父组件里。【提示】：参考上述代码，尝试将数据放在外部（Vue实例里），我们希望从外部将下拉列表的数据传给父组件，父组件再将它下发给子组件，使用prop完成这个过程。4.2.3内容分发Vue框架实现了一套内容分发的API，使用<slot>标签作为承载分发内容的出口。官网对<slot>的解释为“插槽”，也就是说slot是一个可以插入的槽口，比如插座的插孔。当需要让组件组合使用，混合父组件的内容与子组件的模板时，就会用到slot，这个过程叫内容分发。换句话说，当组件不确定自己的内容是什么，内容由父组件决定时，就会使用slot。内容分发非常适合“固定部分+动态部分”的组件的场景，固定部分可以是结构固定，也可以是逻辑固定，从而实现组件的高度复用，编写的组件更加灵活。4.2.3内容分发Vue框架实现了一套内容分发机制，其核心是通过<slot>标签作为“插槽出口”，实现父组件向子组件插入动态内容。简单来说，当子组件的部分内容需要由父组件决定（而非子组件自身固定）时，就可以使用插槽：子组件通过<slot>标签预留位置（固定部分），父组件在使用子组件时，将动态内容写在子组件标签之间（动态部分），这些内容会自动填充到子组件的<slot>位置。这个过程就是“内容分发”。1.单个slot在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot（插槽）。在父组件模板里，插入在子组件标签内的所有内容将替代子组件的<slot>标签及它的内容。1.单个slot上例子组件my-component的模板内定义一个<slot>元素，并且用一个<p>作为默认的内容，在父组件没有使用slot时，会渲染这段默认的文本；如果写入了slot，那就会替换整个<slot>。2.具名slot给<slot>元素指定一个name后可以分发多个内容，具名slot可以与单个slot共存。感谢聆听

THANKYOUFORLISTENING第4章：Vue.js组件《Vue应用程序开发》

010203005Part14.1组件的基本使用Part24.2组件通信Part34.3动态组件Part44.4章节案例目录CONTENTS4.3动态组件Vue.js提供了一个特殊的元素<component>用来动态的挂载不同的组件，使用is特性来选择要挂载的组件。通过使用保留的<component>元素，动态地绑定到它的is特性上，我们让多个组件可以使用同一个挂载点，并动态切换。根据v-bind:is="组件名"中的组件名去自动匹配组件，如果匹配不到则不显示。4.3动态组件4.4章节案例4.4.1案例描述利用Vue组件相关知识开发购物车模块，单击加入购物车按钮，左上角商品总数价格进行叠加。4.4.2案例设计自定义CSS样式使用v-for遍历数据注册并使用组件<cart></cart>使用过滤器添加货币符号组件之间的通信实现数据实时变化感谢聆听

THANKYOUFORLISTENING第5章：Vue.js自定义指令《Vue应用程序开发》

01Part25.2钩子函数目录CONTENTS005Part15.1自定义指令注册和使用第5章Vue.js自定义指令什么是自定义指令？自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但是并非所有情况都适合使用数据驱动理念。自定义指令就是一种有效的补充和扩展，不仅可用于定义任意DOM操作，还可以复用。自定义指令的注册方式与组件的注册方式的逻辑一致，均分为全局注册和局部注册两种。5.3自定义指令注册和使用1.全局注册自定义全局指令使用Vue.directive（指令ID，定义对象），其中，参数1是指令的名称，参数2是一个对象，在这个对象上，有一些指令相关的钩子函数，这些函数可以在特定的阶段，执行相关的操作。（1）基本语法：第一步：注册varapp=Vue.createApp();app.directive('red',{mounted(el){el.style.color="red"}});app.mount('#app');第二步：使用指令指令定义完成后需要通过<divv-red>你好</div>来调用。（2）作用域：全局自定义指令可以在任何实例或组件中使用。有时候我们不需要其他钩子函数，我们可以简写为：Vue.directive('red',function(el,binding){ el.style.color='red';})5.3自定义指令注册和使用2.局部注册我们也可以在实例中使用directives选项来注册局部指令。（1）基本语法：第一步：注册directives:{ color:{ mounted(el,binding){ el.style.color=binding.value } }}第二步：使用指令指令定义完成后需要通过<divv-color>你好</div>来调用。（2）作用域：局部自定义指令只能在这个实例或组件中使用。5.4钩子函数Vue提供了自定义指令的几个钩子函数：（1）created：在绑定元素的属性或事件监听器被应用之前调用。（2）beforeMount：指令第一次绑定到元素，且在挂载父组件之前调用。（3）mounted：在绑定元素的父组件被挂载后调用（此时元素已插入DOM）。（4）beforeUpdate：在指令所在组件的VNode（虚拟DOM节点）更新之前调用。（5）updated：指令所在组件的VNode及其子VNode全部更新后调用。（6）beforeUnmount：只调用一次，在指令绑定的元素的父组件卸载之前调用。（7）unmounted：只调用一次，当指令与元素解绑且元素从DOM中移除后调用。所有钩子函数均接收el、binding、vnode这3个基础参数。感谢聆听

THANKYOUFORLISTENING第6章：Vue.js过渡和动画《Vue应用程序开发》

010203005Part16.1CSS过渡Part26.2CSS动画Part36.3JavaScript过渡Part46.4自定义过渡目录CONTENTS第6章Vue.js过渡和动画Vue.js过渡可以让我们的页面元素在出现和消失时实现多种过渡效果。具体体现在：Vue.js在插入、更新或者移除DOM时，提供多种不同方式的过渡效果。Vue.js提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的元素或组件。简而言之，你可以使用Vue.js的<transaction>组件，结合CSS动画(animation)、过渡(transaction)或javascript操作DOM来让你的元素或组件动起来。6.1CSS过渡CSS过渡是指元素在DOM插入、移动或状态切换（如显示或隐藏）时呈现的平滑过渡的效果，常见的过渡有淡入淡出（透明度渐变）、位移飞入等，Vue.js的CSS过渡会自动为目标元素添加6个核心过渡类名（基于<transition>组件的name属性生成前缀，默认前缀为v-）。6.1CSS过渡对class定义的解释如下：（1）v-enter-from：进入动画的起始状态，在元素插入之前添加，在元素插入完成后的下一帧移除。（2）v-enter-active：进入动画的生效状态，应用于整个进入动画阶段，在元素被插入之前添加，在过渡或动画完成之后移除。这个class可以用于定义进入动画的持续时间、延迟与速度曲线类型。（3）v-enter-to：进入动画的结束状态，在元素插入完成后的下一帧被添加（即v-enter-from被移除的同时），在过渡或动画完成之后移除。（4）v-leave-from：离开动画的起始状态，在离开过渡效果被触发时立即添加，在一帧后被移除。（5）v-leave-active：离开动画的生效状态，应用于整个离开动画阶段，在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个class可以用于定义离开动画的持续时间、延迟与速度曲线类型。（6）v-leave-to：离开动画的结束状态，在一个离开动画被触发后的下一帧被添加（即v-leave-from被移除的同时），在过渡或动画完成之后移除。6.2CSS动画Vue的CSS过渡的基本语法格式如下：过渡效果通过<transition>标签将要制作动画的元素包裹起来，并根据name来进行展示。下面通过一个切换按钮的操作来实现内容淡入淡出的切换效果，代码如下。感谢聆听

THANKYOUFORLISTENING第6章：Vue.js过渡和动画《Vue应用程序开发》

010203005Part16.1CSS过渡Part26.2CSS动画Part36.3JavaScript过渡Part46.4自定义过渡目录CONTENTS第6章Vue.js过渡和动画Vue.js过渡可以让我们的页面元素在出现和消失时实现多种过渡效果。具体体现在：Vue.js在插入、更新或者移除DOM时，提供多种不同方式的过渡效果。Vue.js提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的元素或组件。简而言之，你可以使用Vue.js的<transaction>组件，结合CSS动画(animation)、过渡(transaction)或javascript操作DOM来让你的元素或组件动起来。6.3JavaScript过渡JavaScript过渡是指使用JavaScript钩子实现的过渡效果，这些钩子函数可以结合CSStransitions/animations使用，也可以单独使用。当只用JavaScript过渡的时候，在enter和leave中，回调函数done是必须的。否则，它们会被同步调用，过渡会立即完成。6.3JavaScript过渡我们可以通过以下特性来自定义过渡类名：enter-classenter-active-classenter-to-class(2.1.8+)leave-classleave-active-classleave-to-class(2.1.8+)他们的优先级高于普通的类名，这对于Vue的过渡系统和其他第三方CSS动画库，如Animate.css结合使用十分有用。通过下面实例，我们看一下如何使用Animate.css制作一些效果多样的动画。6.4自定义过渡类名如上效果所示，这里边通过添加不同的类，便可以实现不同的动画效果，下面边介绍一下相关的类：主要的动画大类有Attention(晃动效果)、bounce(弹性缓冲效果)、fade(透明度变化效果)、flip(翻转效果)、rotate(旋转效果)、slide(滑动效果)、zoom(变焦效果)、special(特殊效果)这8类。6.4自定义过渡类名我们也可以通过animate.css网站查看动画效果，选择不同的动画类型，可以预览不同的动画效果。网址为：https://daneden.github.io/animate.css/6.5【章节案例】：漂亮的列表过渡动画6.5.1案例描述当用户添加学生信息时，新增加的列表项会从底部进入当前列表并成为其最后一项；当用户选择任意一个列表项时，会删除一条记录，动画效果为自上而下淡出。6.5.2案例设计自定义CSS样式和CSS过渡。使用v-for指令遍历数据。使用push()方法添加数据，使用splice()方法删除数据。6.5【章节案例】感谢聆听

THANKYOUFORLISTENING第7章：Vue脚手架《Vue应用程序开发》

Part17.1快速构建项目Part27.2前端路由Part37.3服务器端数据访问axiosPart47.4webpack基础目录CONTENTSPart57.5章节案例7.1Vue脚手架工具的安装

create-vue是Vue官方推荐的脚手架工具，其安装前提是已经安装了Node.js，因为Node.js自带NPM。安装Node.js可以直接到其中文官网（网址为）下载安装包；也可以在浏览器地址栏中输入网址“/download/”，进入Node.js安装包下载界面。7.1初始化项目

Node.js安装成功后，即可使用官方推荐的Vue脚手架工具create-vue初始化项目。该工具无须全局安装，直接使用以下命令创建项目：若使用最新版本，则运行“npmcreatevue@latest”命令。1．打开命令提示符窗口按“Windows+R”键，输入“cmd”，按“Enter”键，或在“开始”菜单中搜索“命令提示符”并运行该程序，均可打开命令提示符窗口。2．进入目标目录在Windows命令提示符窗口中，若要将项目创建在非系统盘（如D盘）下，则可按以下方式操作。7.1初始化项目

其中，“D:”是目标盘符；“\my-projects”是目标文件夹路径（可自定义）；“/d”参数用于确保同时切换盘符和目录，避免出现常见错误。3．创建Vue3项目（1）运行命令创建项目在Windows命令提示符窗口中运行“npmcreatevue@latest”命令来创建项目（若需指定版本，则可将其替换为npmcreatevue@<版本号>），输入指令后按“Enter”键即可。（2）后续交互说明①若提示“请输入项目名称：”，则可输入项目名称并按“Enter”键继续下一步操作。②若提示“请选择要包含的功能（↑↓切换，空格选择，a全选，回车确认）”，可根据提示对项目进行配置。其配置项说明如下。7.1初始化项目

（3）项目创建完成7.1快速构建项目-Vue目录结构

执行命令：npmrundev来启动项目，启动完成后会自动弹出默认网页：7.1快速构建项目-运行结果

项目目录解析文件名/目录名文件介绍.vscode存放VSCode编辑器的工作区配置（如插件推荐、格式化规则等，仅在使用VSCode开发时自动生成，非项目运行必需）node_modules项目依赖的第三方模块（由npminstall自动安装，不可手动修改）public存放无须编译的静态资源（如favicon.ico图标、robots.txt等，构建时会将其原封不动地复制到输出目录中）public/favicon.ico项目在浏览器标签页中显示的图标文件src项目源码目录，包含所有业务代码和核心逻辑src/assets存放可被编译的静态资源（如图片、全局CSS、字体等）src/components存放可复用的自定义组件（如按钮、表单等通用UI组件，或业务相关的功能组件）src/router存放VueRouter路由配置文件（仅在使用路由功能时存在）src/views存放页面级组件（通常与路由对应，如首页、详情页等，仅在勾选了“VueRouter”复选框时生成，用于区分组件层级）项目目录解析文件名/目录名文件介绍src/stores存放Pinia状态管理的Store文件（仅在勾选了“Pinia”复选框时存在）src/App.vue项目的根组件，负责组装页面结构src/main.js项目入口文件，用于初始化Vue应用、挂载根组件等.gitignoreGit版本控制忽略文件（指定无须提交到仓库的文件/目录，如node_modules，仅在初始化选择Git支持时生成）index.html应用入口HTML模板，Vite会将打包后的JavaScript/CSS资源自动注入此处jsconfig.jsonJavaScript项目的环境配置文件（定义模块路径、编译选项等）package.json项目核心配置文件，用于记录依赖包版本、脚本命令（如dev/build）等README.md项目说明文档（包含启动、构建等基本操作指引）vite.config.jsVite构建工具的配置文件（可自定义打包规则、开发服务器等）7.1.4.初识单文件组件为了更好地适应复杂的项目开发，Vue.js支持以.vue为扩展名的文件来定义一个完整组件。这个组件被称为单文件组件，是Vue.js自定义的一种文件格式。一个扩展名为.vue的文件就是一个单独的组件，在文件中封装了组件相关的代码，如HTML、CSS和JavaScript，最终通过Webpack编译成JavaScript文件并在浏览器中运行。扩展名为.vue的文件由3部分组成：<template>、<style>和<script>。在src/views目录中创建hello.vue文件，内容如下：7.1.4.初识单文件组件要想使用以上文件，需要在App.vue中引入组件，代码如下：<scriptsetup>import{RouterView}from'vue-router';importhellofrom'./views/hello.vue'</script><template><div><hello></hello></div><router-view/></template><stylescoped></style>7.1.5单文件组件嵌套

脚手架项目创建完成后，index.html是应用入口，会加载并渲染根组件App.vue。App.vue作为单文件组件，是整个应用的根组件，其核心功能之一是引入其他单文件组件（即自定义组件），实现单文件组件的嵌套使用，即其他页面或功能组件可以嵌套在根组件中。下面以自定义组件和根组件的嵌套为例来进行讲解，其他自定义组件之间的嵌套方法与此类似。首先，在/src/components文件夹中新建一个自定义单文件组件，并将其命名为Vuejs.vue。内容如下：7.1.6构建一个简单的脚手架项目（1）项目构思和设计项目的核心目标是搭建一个具备通用页面结构的网站脚手架，支持快速扩展不同页面，通过组件化设计实现代码复用，降低后续开发与维护成本。从需求与结构设计来看，图

7-10

所示为简单的网站首页的

UI，整体分为页头、主体部分和页脚三大模块。其中，页头包括登录/注册和个人中心两个核心入口，页脚用于展示版权信息，这两个模块是该网站所有页面的公共元素，需要保持风格和结构的一致性，因此设计为可复用组件；主体部分为首页专属内容，用于展示热点榜信息，需作为独立内容组件进行开发，以方便后续替换为其他页面的核心内容。7.1.6构建一个简单的脚手架项目（2）项目实施基于上述项目构思和设计，项目实施步骤如下。在components文件夹中新建两个Vue文件，分别是index.vue（页面主体部分）、Layout.vue。（整合页面的页头和页脚），组件文件结构如图所示。7.1.7组件通信

父组件与子组件的通信下面通过一个实例来说明父组件如何向子组件传递数据：在子组件Child.vue中如何获取父组件Parent.vue中的数据。①父组件Parent.vue的代码如下：7.1.7组件通信

②子组件Child.vue的代码如下。7.1.7组件通信

③App.vue展示内容的代码如下。7.1.7组件通信

子组件与父组件的通信子组件触发自定义事件并传递数据，父组件监听这些事件并处理传递过来的数据。在Vue3中，使用defineEmits来