Vue 3前端框架应用项目教程（微课版）课件 项目1-5 Vue快速入门- Vue组件

1.1编写”HelloWorld”程序Vue快速入门

onetaskVue简介目录CONTENTS什么是Vue1Vue时间线2Vue的优势31.什么是Vue一套用于构建用户界面的渐进式JavaScript框架Vue？Vue可以自底向上逐级的应用简单应用：只需要一个轻量的核心库复杂应用：可以引入各种各样的Vue插件1.什么是Vue主流的前端框架？2.Vue时间线受Angular框架启发，开发了一款轻量级框架—Seed，同年更名为Vue，版本0.6.0Vue正式对外发布，版本号0.8.0；Taylorotwell在Twitter上发动态，说自己正在学习Vue.js10月27日，正式发布1.0.0Evangelion（新世界福音战士）10月1日，正式发布Vue2.0.0GhostintheShell（攻壳机动队）9月18日，正式发布Vue3.0.0Onepiece（海贼王）201320142015201620203.Vue的优势轻量级框架1双向绑定2Vue生态3组件化4Vue相对于Angular框架，Vue是一个轻量级的框架，核心库才100k左右3.Vue的优势——组件化Blog.vueCategory.vueHot.vue4.总结Vue是一套用于构建用户界面的渐进式框架1Vue从2013年发展到现在，由Vue0发展到Vue32Vue是一个轻量级的前端框架，已经形成了完善的前端开发生态3Vue的两大特点：双向绑定和组件化开发4总结开发环境搭建目录CONTENTSVisualStudioCode编辑器1Vue的引入21.VisualStudioCode编辑器短小精悍，运行速度快，占用系统资源少提供语法高亮显示、智能代码补全等常用功能提供了丰富的插件，比如：Chinese、openinbrowser等——优势1.VisualStudioCode编辑器下载地址：https:///Download——安装1.VisualStudioCode编辑器插件：——安装1、Chinese：汉化工具2、openinbrowser：打开浏览器3、Vetur：Vue的重要插件4、Vue3Snippets：Vue代码补全插件5、ESLint：代码检查插件6、HTMLCSSSupport7、JavaScript（ES6）codesnippets2.Vue的引入方式一：直接CDN引入<scriptsrc="/vue@3/dist/vue.global.js"></script>方式二：下载到本地引入1.将Vue3库文件下载到本地2.引入：

<scriptsrc="vue.js"></script>编辑Vue模板：

1、文件->首选项->配置用户代码片段2、搜索html.json3、添加模板脚本2.Vue的引入总结VisualStudioCode编辑器的安装和使用1掌握vue的下载和引入方法2总结编写“HelloVue！”程序任务实现目录CONTENTS提出任务1分析任务2归纳总结4实施任务3本次课任务在页面中显示“HelloVue！”1.提出任务Vscode工具的使用Vue.js库文件的引入方法创建一个Vue实例data选项插值语法任务要点：案例效果：2.分析任务实践实现“HelloVue！”显示3.实施任务4.归纳总结总结创建Vue实例将Vue实例与DOM关联定义数据逻辑功能4.归纳总结总结HTML结构使用{{}}插值语法把data数据渲染到页面下次课见！Seeyounexttime2.1实现简单的计时器Vue语法基础onetasks目录CONTENTScomputed4

watch5在Vue2中创建实例6Vue实例的创建与挂载1数据的定义与渲染2methods31.Vue实例的创建与挂载每个Vue应用的创建都是从使用createApp方法创建一个Vue实例开始的，然后该实例通过mount方法挂载到页面中的某个DOM元素。Vue实例只有在调用mount方法之后才会被渲染出来。constapp=Vue.createApp({//创建Vue实例

/*根组件选项*/}).mount('#app')//挂载Vue实例1.Vue实例的创建与挂载假设页面中存在如下div元素：<divid="app">…</div>创建及挂载Vue实例的方法如下：2.数据的定义与渲染（1）定义数据在Vue中使用选项式API时，会用data选项来声明组件的响应式状态，也就是通过data选项来定义数据。data选项是一个函数，Vue将在创建实例的时候调用此函数。data函数返回一个数据对象，Vue会将这个对象包装到它的响应式系统中。2.数据的定义与渲染（1）定义数据2.数据的定义与渲染问题：如何将data函数中定义的数据展示在页面中呢？2.数据的定义与渲染（2）插值最基本的数据绑定方式是插值，它使用的是Mustache语法，即双花括号“{{}}”，其基本格式如下：<span>{{msg}}</span>3.methodsmethods是一个对象，它包含Vue中定义的所有方法，这些方法可以作为页面的事件处理方法使用，当事件被触发后，Vue就会执行相应的事件处理方法。methods方法有两种使用方式：在{{}}中使用在事件发生时调用3.methods在{{}}中使用在事件发生时调用3.methods需要注意的是，在methods方法中使用data数据时，要通过“this.属性名”形式去访问。this在Vue的methods方法中指向Vue实例本身，所以可以通过this访问data函数中定义的属性。4.computed（1）计算属性的基本使用方法

computed也是Vue实例中一个非常重要的选项，可以定义计算属性，对data选项中定义的数据进行处理，再将处理后得到的结果渲染在页面中。在计算属性中使用data数据时，要通过“this.属性名”形式去访问。使用计算属性时，就像使用普通属性一样，可以将计算属性名放在“{{}}”中。4.computed4.computed（2）计算属性的get方法和set方法computed中的每一个计算属性都对应着一个对象，该对象包含get方法和set方法，分别用来获取属性和设置属性。在绝大多数情况下，计算属性只有get方法，没有set方法，相当于一个只读对象；如果需要设置属性，必须自己添加set方法。4.computed（3）计算属性的缓存功能计算属性具有缓存功能。当计算属性首次被访问时，Vue会执行计算逻辑并缓存结果。在后续对计算属性的访问中，如果其依赖的数据没有发生变化，Vue会直接从缓存中获取结果，而不会再次执行计算逻辑。只有当其依赖的数据发生变化时，Vue才会重新执行计算逻辑并更新缓存。调用方式：computed计算属性在{{}}中使用时不加括号，像访问普通属性一样，如{{total}}；methods方法在{{}}中使用时必须加括号调用，{{getTotal()}}。4.computedcomputed计算属性与methods方法的区别：缓存机制：计算属性：有缓存，只要数据不变，无论模板中使用多少次，都只会执行一次，后续直接用缓存中的结果；methods方法：无缓存，每次调用都会重新执行函数。5.watch使用watch可以监听data中定义的数据，只要监听到数据发生变化，就会调用当前数据绑定的事件处理方法，执行相应的操作。（1）watch监听属性5.watch在Vue实例中设置了watch选项，在其中定义了username方法用于监听username属性，该方法包括两个参数，第一个参数是数据的新值，第二个参数是数据的旧值。5.watch当watch监听的是对象类型的数据时，函数中参数接收的新值和旧值是相等的，因为这两个形参指向的是同一个对象。因此watch提供了deep属性，用来深度监听一个对象，当将deep属性的值设置为true时，它会逐层深入监听对象每个属性的变化。（2）deep属性6.在Vue2中创建实例前面主要讲解的是如何在Vue3中创建实例及配置选项。Vue2和Vue3在创建实例以及挂载实例的方法上有所不同。使用newVue()创建Vue实例使用el选项将Vue实例挂载到页面中使用data选项来定义数据Vue实例的创建与挂载1数据的定义与渲染2总结constapp=Vue.createApp({}).mount(）定义：data(){return{}}渲染：插值{{}}methods选项：定义方法3computed选项：计算属性4watch选项：监听属性（使用deep开启深度监听）5任务1

实现简单的计时器【任务提出】

任务1

实现简单的计时器综合运用Vue实例的data、methods、computed以及watch等选项实现简单的计时器，计时器初始效果如图所示。【任务分析】

任务1

实现简单的计时器本任务要实现简单的计时器：计时器从0开始，单击“开始计时”按钮，启动计时器，按秒计时；单击“暂停计时”按钮，暂停计时器；再次单击“开始计时”按钮，可继续按秒计时。实现思路如下：（1）使用插值在页面中实时渲染数据；（2）分别为“开始计时”和“暂停计时”按钮添加click事件；（3）创建Vue实例，并使用data函数定义计时数据的初始值为0；（4）在methods选项中定义两个方法，分别用于实现计时功能和暂停计时功能；（5）利用computed选项定义计算属性实现数据以两位数的形式显示在页面中；（6）使用watch监听数据的实时变化。【任务实现】

任务1

实现简单的计时器(1)界面代码任务1

实现简单的计时器(2)逻辑代码【任务实现】

下次课见！Seeyounexttime3.1设计应聘信息登记表Vue数据绑定twotasks3.2使用样式绑定实现投票和

撤回投票功能设计应聘信息登记表任务1目录CONTENTSMVVM模式4单向数据绑定1双向数据绑定2修饰符31.单向数据绑定在Vue中，数据绑定可以分为单向数据绑定和双向数据绑定。单向数据绑定通常指的是数据从模型流向视图的过程，也就是将Vue实例的数据与DOM元素的属性或内容连接起来的机制。当Vue实例的数据发生变化时，会自动更新该数据绑定的DOM元素；而DOM的变化不会让Vue实例的数据更新。单向数据绑定主要通过插值和v-bind指令来实现。用于将Vue实例中的数据绑定到HTML元素的一个或多个属性上，它的完整语法为：1.单向数据绑定v-bind指令实际开发中，更常用的是它的简写形式，即省略v-bind，直接使用“:”（语法糖）来绑定属性。v-bind:属性名="表达式或变量"；1.单向数据绑定2.双向数据绑定Vue中使用v-model指令在单行文本框、多行文本框等表单控件上创建双向数据绑定。v-model指令可以监听用户的输入事件来更新数据。在Vue中，双向数据绑定是指数据在视图和模型之间双向流动。这意味着当模型中的数据发生变化时，视图中的数据会自动更新；同时，如果用户通过视图修改了数据，模型中的数据也会相应更新。（1）绑定单行文本框2.双向数据绑定在<input>标签中，使用v-model指令可将Vue实例中定义的数据和单行文本框进行双向数据绑定。（1）绑定单行文本框2.双向数据绑定（2）绑定多行文本框2.双向数据绑定在<textarea>标签中，使用v-model指令可将Vue实例中定义的数据和多行文本框进行双向数据绑定。（3）绑定复选框2.双向数据绑定使用v-model指令将单个复选框绑定到一个布尔值上，当复选框被勾选时，绑定的布尔值为true；当复选框未勾选中时，绑定的布尔值为false。对于复选框组来说，通过v-model指令可将复选框组中的每个复选框都绑定到同一个数组上，该数组将包含所有被勾选的复选框的value属性值。2.双向数据绑定（4）绑定单选按钮2.双向数据绑定通常情况下，单选按钮会成组使用，即多个单选按钮同时只能选择一个，这可以使用v-model指令配合单选按钮的value属性来实现。（5）绑定下拉列表2.双向数据绑定在<select>标签中，使用v-model指令可将Vue实例中定义的数据和下拉列表进行双向数据绑定。若<option>标签中设置了value属性值，则使用v-model指令绑定的数据会被赋值为value属性值；若<option>标签中没有设置value属性值，则使用v-model指令绑定的数据会被赋值为<option></option>之间的文本。（6）绑定多选列表框2.双向数据绑定在<select>标签中设置multiple属性，可以实现多选列表。3.修饰符默认情况下，v-model指令在每次input事件触发后都会同步文本框的值与绑定的数据，即每次键盘输入时都会同步数据。使用.lazy修饰符后，只有在change事件触发时，才会同步文本框的值与绑定的数据。也就是说，只有当文本框的值发生变化并且文本框失去焦点时，绑定的数据才会被更新。（1）.lazy3.修饰符默认情况下，文本框接收的数据属于字符串类型（string），即使在文本框中输入的是数字，其类型仍然是字符串类型。Vue为v-model指令提供了.number修饰符，可以自动将文本框接收的数据转换为数值类型（number）。如果接收的数据无法被转换为有效的数字，则数据的类型仍然为字符串类型。（2）.number3.修饰符Vue为v-model指令提供了.trim修饰符，可以自动过滤用户输入的字符串中首尾的空格。（3）.trimMVVM是一种软件架构设计模式，旨在助力开发可维护、可测试的用户界面应用程序。4.MVVM模式MVVM模式包括3个核心部分：Model、View和ViewModel。4.MVVM模式Model：表示数据和业务逻辑，负责数据管理和业务规则的处理。4.MVVM模式View：表示用户界面，负责显示数据。4.MVVM模式ViewModel：负责连接View和Model，确保两者的一致性。ViewModel实现了双向数据绑定，即当Model更新时，View会自动更新；当View发生变化时，Model也会相应地更新。4.MVVM模式ViewModel中的DOMListeners和DataBindings是实现双向数据绑定的关键。4.MVVM模式DOMListeners是Vue绑定在DOM元素上的事件监听器（比如输入框的input事件），作用是监听DOM的变化（如用户输入），并把变化同步到Model（数据）中。DataBindings是Vue的数据绑定机制，作用是监听Model变化，并把变化同步到DOM中。数据单向绑定v-bind(语法糖“:”）1数据双向绑定v-model2总结修饰符：.lazy.number.trim3MVVM模式4【任务提出】

任务1

设计应聘信息登记表充分理解MVVM模式，利用双向数据绑定，设计应聘信息登记表，收集用户应聘信息，并在控制台输出用户输入的应聘信息。【任务分析】

本任务要实现获取用户应聘信息，并在控制台输出。实现思路如下：（1）使用v-model指令实现Vue实例中的数据与各表单控件的双向数据绑定；（2）使用v-bind指令绑定复选框的值；（3）使用.trim修饰符过滤用户输入的字符串中首尾的空格；（4）为“提交”按钮绑定click事件；（5）定义方法，实现在控制台输出用户输入的信息。任务1

设计应聘信息登记表【任务实现】

(1)界面代码任务1

设计应聘信息登记表【任务实现】

(2)逻辑代码任务1

设计应聘信息登记表3.1设计应聘信息登记表Vue数据绑定twotasks3.2使用样式绑定实现投票和

撤回投票功能使用样式绑定实现投票和撤回投票功能任务2目录CONTENTS绑定样式类5绑定内联样式65.绑定样式类在Vue中，可以通过:class（v-bind:class的简写形式）来动态地添加或移除样式类。Vue提供了两种不同的方式来使用:class，即对象语法和数组语法。5.绑定样式类（1）对象语法<p:class="{'blue':isBlue,border:isBorder}">{{msg}}</p>绑定样式类的对象语法允许传递一个对象给:class。对象的属性就是样式类的类名，类名可以使用引号标识，也可以不使用引号标识。属性值是布尔值，表示是否应用样式类。如果属性值为true，表示应用该样式类；如果属性值为false，则表示不应用该样式类。5.绑定样式类除了使用上述方式绑定样式类外，也可以使用:class绑定在Vue实例中定义的对象变量。5.绑定样式类（1）对象语法还可以使用:class绑定Vue实例中定义的计算属性和方法。<div:class="myComputed">绑定计算属性</div><div:class="myMethods()">绑定方法</div>5.绑定样式类（1）对象语法5.绑定样式类5.绑定样式类（2）数组语法在Vue中，除了使用对象语法方式绑定样式类外，还可以使用数组语法方式绑定多个样式类，每个数组元素代表一个样式类的类名。5.绑定样式类（2）数组语法在被绑定的数组中，元素也可以是Vue实例中定义的变量。6.绑定内联样式在Vue中，可以使用:style（v-bind:style的简写形式）来绑定内联样式，Vue同样提供了两种不同的方式来使用:style，即对象语法和数组语法。（1）对象语法使用对象语法绑定内联样式时，属性名可以使用驼峰式命名，或者使用引号标识的短横线分隔式命名。6.绑定内联样式（1）对象语法使用对象语法绑定内联样式时，也可以使用:style绑定在Vue实例中定义的对象变量。6.绑定内联样式（2）数组语法绑定内联样式的数组语法可以将多个内联样式应用到同一个元素上。6.绑定内联样式绑定样式类:class（v-bind:class的简写形式）

1绑定内联样式:style（v-bind:style的简写形式）2总结对象语法数组语法对象语法数组语法【任务提出】

任务2使用样式绑定实现投票和撤回投票功能为投票状态区域和得票数进行动态样式绑定，实现投票和撤回投票功能。单击“投票”按钮，“得票数”对应的数字加1，投票状态区域中红色区域的宽度增加；单击“撤回投票”按钮，“得票数”对应的数字减1，投票状态区域中红色区域的宽度减少；票数大于或等于10时，“得票数”对应的数字显示为红色且字号变大。【任务分析】

本任务要使用样式绑定实现投票和撤回投票功能，实现思路如下：（1）用投票状态区域表示得票的状态，为其绑定内联样式，实现每投一票红色区域的宽度增加，每撤回一票红色区域的宽度减少；（2）为表示得票数的数字绑定样式类，若得票数大于或等于10，则对数字应用名为red的样式类；（3）为“投票”按钮绑定click事件，在事件处理方法中根据判断条件，实现增加红色区域的宽度、得票数加1，若得票数大于或等于10，将Vue实例中定义的用于控制red样式类应用的布尔类型的变量isRed设置为true；（4）为“撤回投票”按钮绑定click事件，在事件处理方法中根据判断条件，实现减少红色区域的宽度、得票数减1，若得票数小于10，将isRed设置为false。任务2使用样式绑定实现投票和撤回投票功能【任务实现】

(1)CSS样式代码任务2使用样式绑定实现投票和撤回投票功能【任务实现】

(2)界面代码任务2使用样式绑定实现投票和撤回投票功能【任务实现】

(3)逻辑代码任务2使用样式绑定实现投票和撤回投票功能下次课见！Seeyounexttime3.1使用Vue框架实现跑马灯效果3.2使用Vue框架实现购物车效果使用Vue内置指令twotasksV-on指令内容CONTENTSV-on的基本使用1语法糖2事件传参31.v-on的基本使用举例：监听按钮的点击事件按钮1，使用了v-on:click=“counter++”（内联事件处理）按钮2，将事件指向一个在methods中定义的函数（方法事件处理）注：v-on也有对应的语法糖：v-on:click可以写成@click2.语法糖3.事件传参当通过methods中定义方法，以供@click调用时，需要注意参数问题：情况一：如果该方法不需要额外参数，那么调用方法后的()可以不添加。情况二：如果方法本身有一个参数，调用方法后加（）但不传参，得到的是undefine。情况三：如果方法本身有一个参数，调用方法后不加（），那么会默认将原生事件event参数传递进去。情况四：如果需要同时传入某个参数，又同时需要event时，可以通过$event传入事件。3.事件传参$event：指当前触发的是什么事件（鼠标事件，键盘事件等）event.target：则指的是事件触发的目标，即哪一个元素触发了事件，这将直接获取该DOM元素可以通过“event.target.属性”来获取该元素的属性值总结v-on的基本使用1语法糖2事件的传参3总结事件修饰符内容CONTENTS.stop阻止事件冒泡1.prevent阻止默认事件2.once事件触发一次3.caputer事件捕捉4.self自身触发事件5事件修饰符事件修饰符是自定义事件行为，配合v-on指令来使用，写在事件之后，用”.”符号连接修饰符说明.stop阻止事件冒泡.prevent阻止默认事件行为.capture事件捕获.self将事件绑定到自身，只有自身才能触发.once事件只触发一次1.stop事件修饰符默认的事件传递方式是冒泡;事件流传播的顺序应该是从发生事件的元素节点到DOM树的根节点；使用.stop修饰符阻止事件冒泡行为。2.prevent事件修饰符在实际开发中，如果<a>标签的默认行为与事件发生冲突，此时可以使用.prevent修饰符来阻止<a>标签的默认行为。3.once事件修饰符.once事件修饰符：只触发一次事件处理函数4.capture事件修饰符事件捕获的执行顺序是由外部结构向内部结构执行，与事件冒泡的顺序相反。capture修饰符用于为元素添加事件监听时使用事件捕获模式。5.self事件修饰符.self事件修饰符：用来实现只有DOM元素本身会触发事件。总结.stop事件修饰符1.prevent事件修饰符2.once事件修饰符3总结.capture事件修饰符4.self事件修饰符5使用Vue框架实现跑马灯效果任务实现内容CONTENTS提出任务1分析任务2归纳总结4实施任务3本次课任务使用Vue框架实现跑马灯效果。1.提出任务1.为两个按钮绑定点击事件；2.定义事件处理方法；字符的截取与拼接；定时器的使用。任务要点：案例效果：2.分析任务实践使用Vue框架实现跑马灯效果3.实施任务4.归纳总结总结

substring(start[,end])方法：

截取从start位置到end位置之间的一个子字符串，不包括end位置上的字符。

箭头函数()=>箭头函数内部可以解决this指向的问题；箭头函数内部的this永远和外部的this保持一致箭头函数外部的this指向的是VM实例，箭头函数内部的this也指向VM实例。3.1使用Vue框架实现跑马灯效果3.2使用Vue框架实现购物车效果使用Vue内置指令twotasksV-text和v-html内容CONTENTSv-text指令1v-html指令2v-once指令31.v-text指令v-text作用和Mustache语法(也就是双大括号{{}})。比较相似：都是用于将数据显示在界面中，但是v-text不如{{}}灵活，v-text会把标签里的原有内容覆盖掉，所以不推荐使用。不能解析html标记v-text通常情况下，接受一个string类型。2.v-html指令某些情况下，我们从服务器请求到的数据本身就是一个HTML代码如果我们直接通过{{}}来输出，会将HTML代码也一起输出。但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。如果我们希望解析出HTML展示可以使用v-html指令该指令后面往往会跟上一个string类型会将string的html解析出来并且进行渲染2.v-html指令通过使用与不使用v-html效果对比，可以看到使用v-html后，会对html文本进行解析，而不会直接当成字符串处理，相当于JS中的innerHtml属性。3.v-once指令在某些情况下，不希望界面随意的跟随改变，这时候，我们就可以使用一个Vue的指令v-once:

该指令后面不需要跟任何表达式该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。总结v-text指令1v-html指令2v-once指令3总结条件渲染内容CONTENTSv-if指令12v-else指令3v-show指令1.v-if指令v-if指令可以实现条件渲染这个指令与JavaScript的条件语句if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件v-if的原理：v-if后面的条件为true时,会渲染对应的元素及其子元素；v-if后面的条件为false时，不会渲染对应的元素以及其子元素。简单的案例演示：2.v-show指令v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：v-if和v-show对比v-if当条件为false时，不会有对应的元素在DOM中。v-show当条件为false时，元素还存在，仅仅是将元素的display属性设置为none而已。3.v-else指令v-else指令配合搭配v-if使用的，它必须紧跟在v-if后面，否则不起作用。3.v-show指令开发中如何选择呢？当需要在显示与隐藏之间切换很频繁时（一会显示，一会隐藏），使用v-show当只有一次切换时，通过使用v-if总结v-if指令1v-else指令2v-show指令3总结V-for指令内容CONTENTSv-for指令遍历数组1v-for指令遍历对象21.v-for指令遍历数组当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。v-for的语法类似于JavaScript中的for循环；格式如下：v-for=“iteminitems”的形式；其中items

是源数据数组，而item

则是被迭代的数组元素的别名。1.v-for指令遍历数组如果在遍历的过程中，我们需要拿到元素在数组中的索引值语法格式：v-for="(item,index)initems"其中的index就代表了取出的item在原数组的索引值。2.v-for指令遍历对象v-for可以用来遍历对象：比如某个对象中存储着你的个人信息，希望以列表的形式显示；对象本身就是一个key:value的形式，所以遍历对象时，可以有三个参数（value,key,index）对应着对象的属性值，属性和索引值。总结v-for指令遍历数组1v-for指令遍历对象2总结使用Vue框架实现购物车效果任务实现内容CONTENTS提出任务1分析任务2归纳总结4实施任务3本次课任务使用Vue框架实现购物车效果。1.提出任务点击“+”、“-”按钮可以增加、减少数量；点击“移除”按钮，可以从购物车中删除对应商品。根据商品数量和价格，计算出总价；若购物车中没有商品时，显示文字“购物车为空”任务要点：案例效果：2.分析任务商品数据的定义商品的遍历显示数据的格式化“+”、“-”按钮添加点击事件删除功能的实现事件处理方法-计算总计实践使用Vue框架实现购物车效果3.实施任务4.归纳总结总结3Vue的生命周期学习目标：理解什么是Vue生命周期掌握Vue生命周期钩子函数的功能06Vue的生命周期每个Vue实例创建后，都会经历一系列的初始化过程，Vue实例从创建到销毁的过程就是其生命周期；Vue的生命周期分为8个阶段，官方称其为生命周期钩子函数，钩子函数用来描述Vue实例从创建到销毁的整个生命周期；可以利用这些钩子函数在合适的时机执行业务逻辑，以满足功能需求。06Vue的生命周期钩子说明beforeCreate创建实例对象之前执行，（数据不能使用）created创建实例对象之后执行，（数据可以使用）beforeMount页面挂载成功之前执行，（无法访问DOM）mounted页面挂载成功之后执行，（可以访问DOM）beforeUpdate组件更新之前执行（数据与视图不一致）updated组件更新之后执行（数据与视图一致）beforeUnMount实例销毁之前执行，（可以操作DOM）UnMounted实例销毁之后执行，（无法操作DOM）综合案例–图书管理任务描述：实现简单的图书管理功能1.显示图书列表2.添加图书3.修改图书信息4.删除图书5.常用特性应用场景补充知识1：数组常用操作Vue包含一组操作数组的方法，这些方法为响应式，即会触发视图更新。这些方法如下：

push()-添加元素到数组的末尾，如：s.push('aaa');

pop()-删除最后一个元素，如：s.pop();

shift()-删除第一个元素，如：s.shift();

unshift()-添加元素到数组最前面，可以传多个值，如：s.unshift('aaa');

splice(start,num,...item)-用于插入/删除/替换元素，如：s.splice(2,0,'ccc'); start:从第几个元素开始，从0开始计数

num：需要删除或者替换的元素个数

..item：替换后，或者添加的元素

sort()排序（升序）

reverse()排序（降序）综合案例–图书管理补充知识1：数组常用操作综合案例–图书管理补充知识2：字符串截取与拼接——截取综合案例–图书管理slice()方法substring()方法补充知识2：字符串截取与拼接——截取综合案例–图书管理split()方法-按分隔符分割补充知识2：字符串截取与拼接——拼接综合案例–图书管理

加号(+)运算符concat()方法综合案例–图书管理补充知识3：ECMA6新增数组方法（1）filter()方法作用:用于把数组中的某些元素过滤掉，然后返回剩下的元素；（2）some()方法作用：在数组中查找是否有符合条件的元素，有则返回true，没有则返回false。3.1使用组件嵌套制作“校园新闻”版块Vue组件threetasks3.2制作“简易购物车”组件3.3使用具名插槽制作“新闻热点”版块使用组件嵌套制作“校园新闻”版块任务1目录CONTENTS局部组件4

组件嵌套5组件的定义1组件的使用方法2全局组件31.组件的定义Vue采用组件化开发思想，它允许开发人员将一个大的应用程序分割成可复用的、自包含的组件。通俗地说，就是将一个应用程序拆分成若干个较小的功能块，每个功能块是一个组件。组件可以是独立的，也可以相互嵌套组合，从而构建出复杂的应用程序。在实际应用中，组件常常被组织成层层嵌套的树状结构。2.组件的使用方法在Vue中使用组件，大致可以分为以下3个步骤。步骤1：定义组件。步骤2：注册组件。步骤3：调用组件。3.全局组件在Vue中，全局组件是指可以在任何一个Vue实例的模板中使用的组件。组件一旦被注册为全局组件，就无须在每个Vue实例中单独注册，这极大地提高了代码的可复用性和可维护性。全局注册组件的语法格式如下：Vue实例.component('组件名称'，组件对象)3.全局组件4.局部组件在Vue中，局部组件是指在Vue实例内部定义的，仅在该实例或其子组件中可用的组件。局部组件有助于提高代码的模块化和可重用性，同时避免全局组件命名冲突。4.局部组件5.组件嵌套组件嵌套是Vue中一个非常强大的特性，可用于构建复杂的用户界面。组件嵌套是在一个组件的内部调用另一个组件，也就是说，在父组件的模板中以标签的形式去调用子组件。这体现出组件的层级关系。5.组件嵌套组件的定义1组件的使用2总结

全局组件3

局部组件4定义组件、注册组件、调用组件

组件嵌套5Vue实例.component('组件名称'，组件对象)在Vue实例内部定义的，仅在该实例或其子组件中可用的组件在父组件的模板中以标签的形式去调用子组件【任务提出】

任务1

使用组件嵌套制作“校园新闻”版块充分理解MVVM模式，利用双向数据绑定，设计应聘信息登记表，收集用户应聘信息，并在控制台输出用户输入的应聘信息。【任务分析】

本任务要实现获取用户应聘信息，并在控制台输出。实现思路如下：（1）使用v-model指令实现Vue实例中的数据与各表单控件的双向数据绑定；（2）使用v-bind指令绑定复选框的值；（3）使用.trim修饰符过滤用户输入的字符串中首尾的空格；（4）为“提交”按钮绑定click事件；（5）定义方法，实现在控制台输出用户输入的信息。任务1

使用组件嵌套制作“校园新闻”版块【任务实现】

(1)CSS样式代码任务1

使用组件嵌套制作“校园新闻”版块【任务实现】

任务1

使用组件嵌套制作“校园新闻”版块(2)界面代码任务1

使用组件嵌套制作“校园新闻”版块【任务实现】

(3)逻辑代码3.1使用组件嵌套制作“校园新闻”版块Vue组件threetasks3.2制作“简易购物车”组件3.3使用具名插槽制作“新闻热点”版块制作“简易购物车”组件任务2目录CONTENTS父组件向子组件传递数据6子组件向父组件传递数据76.父组件向子组件传递数据父组件向子组件传递数据是通过props实现的。具体来说，在父组件中调用子组件时，通过在子组件标签上添加或动态绑定自定义属性将数据传递给子组件；在子组件中，通过定义props来接收父组件传递的数据。6.父组件向子组件传递数据（1）静态传递数据父组件向子组件静态传递数据是指，在父组件的模板中，直接在子组件标签上添加自定义属性，子组件通过props接收父组件传递的数据。6.父组件向子组件传递数据（2）动态传递数据父组件向子组件动态传递数据主要使用props并通过v-bind指令（或其简写形式:）来实现。动态传递数据的好处是，当父组件中的相关数据发生变化时，子组件会接收到更新的数据。6.父组件向子组件传递数据（3）数据验证在Vue中，可以为子组件的props指定数据验证规则，以确保传入的数据符合预期的格式要求。这需要在组件的props中提供带有props校验选项的对象，如果传入的数据不符合数据验证规则，Vue会在浏览器的控制台中发出警告。7.子组件向父组件传递数据子组件向父组件传递数据通常是通过发送自定义事件的方式来实现的。具体来说，子组件通过$emit方法发送自定义事件，并将需要传递的数据作为事件的参数，父组件则使用v-on指令监听这个事件并接收传递的数据。$emit('eventName',[…args])7.子组件向父组件传递数据$emit方法的语法格式如下：其中，eventName是自定义事件的名称，参数args是向父组件传递的数据，若无须向父组件传递数据，则省略该参数。7.子组件向父组件传递数据父组件向子组件传递数据1子组件向父组件传递数据2总结静态传递数据动态传递数据数据验证$emit('eventName',[…args])【任务提出】

任务2制作“简易购物车”组件使用组件嵌套和父子组件间的数据传递实现简易购物车。【任务分析】

简易购物车功能可以通过父子组件间的数据传递实现，实现思路如下：（1）划分父子组件的关系，在Vue实例（即根组件或顶级父组件）中定义只放置表头信息的单行表格，使用v-for遍历子组件；（2）在子组件模板中定义用于渲染每一条数据的单行表格，并在其中添加“+”“-”按钮并实现数量加减功能，添加“删除”按钮并为其绑定click事件；（3）数据定义在Vue实例中，通过props实现将Vue实例中的数据传递给子组件，并在子组件模板中渲染传递的数据；（4）定义单击“删除”按钮触发的事件处理方法，使用$emit方法向Vue实例发送自定义事件，并将要删除的数据的id作为参数传递给Vue实例；（5）Vue实例监听子组件发送的自定义事件，定义事件处理方法接收子组件传递的数据，并完成删除功能；（6）在Vue实例中定义计算属性，实现计算总价功能，并渲染计算结果。任务2制作“简易购物车”组件【任务实现】

(1)界面代码任务2制作“简易购物车”组件【任务实现】

(2)逻辑代码任务2制作“简易购物车”组件3.1使用组件嵌套制作“校园新闻”版块Vue组件threetasks3.2制作“简易购物车”组件3.3使用具名插槽制作“新闻热点”版块使用具名插槽制作“新闻热点”版块任务3目录CONTENTS动态组件11默认插槽8具名插槽9作用域插槽108.默认插槽Vue提供了多种类型的插槽，包括：默认插槽、具名插槽和作用域插槽。8.默认插槽默认插槽是非常基本的一种插槽，也被称为匿名插槽。子组件通过<slot></slot>标签来定义插槽，类似于内容占位符，它不需要指定名称，该插槽插入什么内容取决于父组件传入什么内容。8.默认插槽如果想在一个组件中使用多个插槽，可以使用具名插槽。具名插槽通过在slot元素上添加name属性来定义，name属性的值就是插槽的名称，用来作为识别插槽的唯一标识。在插入父组件内容时，可以在template元素上使用v-slot指令（或其简写形式#）来指定要将内容插入哪个具名插槽中。9.具名插槽9.具名插槽10.作用域插槽默认插槽和具名插槽的内容都是由父组件决定的，Vue还提供了另外一种特殊的作用域插槽，它允许父组件在模板中访问来自子组件的数据。这使得组件之间的数据传递更加灵活和强大，特别是在构建可复用的组件时。10.作用域插槽使用作用域插槽的关键步骤如下：（1）在子组件模板中使用slot元素定义插槽，并使用v-bind指令绑定一个特定属性，为父组件提供数据。这个特定属性称为插槽prop，它不需要在props中声明。<slotv-bind:attribute='属性值'></slot>其中，属性attribute的名称可以自定义，属性值为子组件data选项中定义的数据。10.作用域插槽（2）在父组件调用子组件时，在template元素中使用v-slot指令来接收子组件传递的数据。使用v-slot指令时可以绑定默认插槽或具名插槽。例如：<!--绑定默认插槽--><templatev-slot:default='slotProps'><div>{{slotProps.attribute}}</div></template>或<!--绑定具名插槽--