Vue 3前端框架应用项目教程（微课版）课件 项目3、4 Vue数据绑定、Vue内置指令

3.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）b