JavaScript+Vue.jsWeb开发实战教程课件 第八章 Vue 3属性

Vue3属性演讲人：XXXXXXJavaScript+Vue.jsWeb开发实战教程08学习目标掌握计算属性的使用方法掌握侦听器的使用方法掌握样式绑定方法能够创建并使用计算属性能够创建并使用侦听器能够创建并绑定样式思维导图8.1计算属性计算属性通过computed()函数定义，该函数的参数为一个回调函数。开发者需要在回调函数中实现计算功能，并在计算完成后返回计算后的数据。定义计算属性的语法格式如下所示。<scriptsetup>

import{computed}from'vue'

const计算属性名=computed(()=>{

return计算后的数据

})</script>将计算属性定义好后，可以使用Mustache语法输出计算属性。输出计算属性的语法格式如下所示。{{计算属性名}}8.1计算属性接下来通过实际操作演示计算属性的使用方法。通过计算属性实现字符串反转功能，具体步骤如下。<template>

<p>初始message：{{message}}</p>

<p>反转之后的message：{{reversedMessage}}</p>

<button@click="updateMessage">更改</button></template><scriptsetup>

import{ref,computed}from'vue'

constmessage=ref('HelloWorld')

constreversedMessage=computed(()=>message.value.split('').reverse().join(''))

constupdateMessage=()=>{

message.value='hello'

}</script>创建src/components/ComputedComponent.vue文件，代码如下所示。8.1计算属性<scriptsetup>

importComputedComponentfrom'./components/ComputedComponent.vue'</script><template>

<computed-component/></template>在App.vue中引入ComputedComponent组件，切换页面中显示的组件，代码如下所示。图

通过计算属性实现字符串反转功能的页面效果图

单击“更改”按钮后的页面效果在浏览器中访问http://localhost:5173，通过计算属性实现字符串反转功能的页面效果如图所示。单击“更改”按钮后的页面效果如图所示。从图可以看出，单击“更改”按钮后，初始message和反转之后的message都发生了变化，说明当计算属性依赖的数据发生了变化时，计算属性会重新进行计算，并在页面上更新计算结果。8.2侦听器

在Vue3中，开发者可以自定义方法来进行数据更新操作，但不能自动监听数据的状态。如果想在数据更新后进行相应的操作，可以通过侦听器来实现。侦听器通过watch()函数定义。watch()函数的语法格式如下所示。watch(侦听器的来源,回调函数,可选参数)8.2.1侦听器简介watch()函数有3个参数，下面分别进行讲解。01侦听器的来源02数据发生变化时要调用的回调函数数据发生变化时要调用的回调函数中，第1个参数表示新值，即数据发生变化后的值；第2个参数表示旧值，即数据发生变化前的值。03可选参数可选参数是一个对象，其有以下2个常用选项。①deep。默认情况下，在监听一个对象时，无法监听对象中的属性值发生的变化。②immediate。默认情况下，组件在初次加载完毕后不会调用侦听器的回调函数。侦听器的来源可以有以下4种。①

一个函数（返回一个值）。②

一个响应式数据。③

一个响应式对象。④

一个由以上类型的值组成的数组。8.2.2侦听器的使用本小节通过实际操作演示侦听器的使用方法，实现监听输入框的值的变化，具体步骤如下。创建src/components/WatchComponent.vue文件，代码如下所示。<template>

<inputtype="text"v-model="cityName"/></template><scriptsetup>

import{watch,ref}from'vue'

constcityName=ref('beijing')

watch(cityName,(newVal,oldVal)=>{

console.log(newVal,oldVal)

})</script>在App.vue中引入WatchComponent组件，切换页面中显示的组件，代码如下所示。<scriptsetup>

importWatchComponentfrom'./components/WatchComponent.vue'</script><template>

<watch-component/></template>在浏览器中访问

http://localhost:5173

并打开控制台，输入框中默认显示“Beijing”；继续输入“1”“2”“3”，每输入一个数字，控制台就会依次输出当前的值和上一次的值。页面效果和控制台效果如图所示。图

在输入框中输入“1”“2”“3”后的页面效果和控制台效果8.3.1绑定class属性将class属性绑定为字符串01<template>

<divv-bind="className"></div></template><scriptsetup>

constclassName=‘box’;</script>在Vue中，可以将class属性绑定为字符串。示例如下。<divclass="box"></div>运行上述代码后，div元素的渲染结果如下所示。创建src/components/ClassStr.vue文件，代码如下所示。接下来通过实际操作演示如何将class属性绑定为字符串，具体步骤如下。<template>

<divv-bind:class="className">梦想</div></template><scriptsetup>

constclassName='box'

</script>

<style>

.box{border:1pxsolidblack;}</style>8.3.1绑定class属性在App.vue中引入ClassStr组件，切换页面中显示的组件，代码如下所示。<scriptsetup>

importClassStrfrom'./components/ClassStr.vue'</script><template>

<class-str/></template>在浏览器中访问:5173并打开控制台，将class属性绑定为字符串的页面效果和控制台效果如图所示。图

将class属性绑定为字符串的页面效果和控制台效果8.3.1绑定class属性将class属性绑定为对象的示例如下：将class属性绑定为对象02<template>

<divv-bind:class="{className:isActive}"></div></template><scriptsetup>

import{ref}from'vue'

constisActive=ref(true)</script>运行上述代码后，div元素的渲染结果如下所示。<divclass="className"></div>使用v-bind指令绑定的class属性可以与普通的class属性共存。示例如下。<divclass="className1className2"></div>在使用v-bind指令绑定class属性时，如果不想将对象类型的class属性直接写在模板中，可以将属性定义成一个响应式对象或一个返回对象的计算属性。示例如下。<template>

<divv-bind:class="classObject1"></div>

<divv-bind:class="classObject2"></div></template>8.3.1绑定class属性<scriptsetup>

import{computed,reactive,ref}from'vue'

constclassObject1=reactive({

className:true})

constisActive=ref(true)

constclassObject2=computed(()=>({

className:isActive.value

}))</script>接下来通过实际操作演示如何将class属性绑定为对象，具体步骤如下。创建src/components/ClassObject.vue文件，代码如下所示。<template>

<divclass="text"v-bind:class="{box:isBox,border:isBorder}">

<divv-bind:class="{inner:isInner}">春夏</div>

<divv-bind:class="classObject">秋冬</div>

<divv-bind:class="classMeal">一日三餐</div>

</div></template><scriptsetup>

import{computed,reactive,ref}from'vue'

constisBox=ref(true)

constisBorder=ref(true)

constisInner=ref(true)

constisMeal=ref(true)

constclassObject=reactive({inner:true})

constclassMeal=computed(()=>({

meal:isMeal.value

}))</script>8.3.1绑定class属性<style>

.text{

text-align:center;

line-height:30px;

}

.box{

width:100%;

background:linear-gradient(toright,#ff7e5f,#feb47b);

}

.border{

border:1pxsolid#ff7e5f;

}

.inner{

margin-top:10px;

width:100px;

height:30px;

border:1pxdoubleblack;

}

.meal{

width:100px;

height:30px;

border:1pxdashedblue;

}</style>在src/components/ClassObject.vue文件中定义页面所需的样式，代码如下所示。在App.vue中引入ClassObject组件，切换页面中显示的组件，代码如下所示。<scriptsetup>

importClassObjectfrom'./components/ClassObject.vue'</script><template>

<class-object/></template>在浏览器中访问:5173，将class属性绑定为对象的页面效果如图所示。图

将class属性绑定为对象的页面效果8.3.1绑定class属性将class属性绑定为数组03<template>

<divclass="text"v-bind:class="[className1,className2]"></div></template><scriptsetup>

import{ref}from'vue'

constclassName1=ref('active')

constclassName2=ref('error')</script>将class属性绑定为数组的示例如下。<divclass="activeerror"></div>运行上述代码后，div元素的渲染结果如下所示。如果想要有条件地切换class，可以使用三元表达式。示例如下。<divv-bind:class="[isActive?className1:className2]"></div>当需要为class设置条件时，在数组中也可以使用对象语法。示例如下。<divv-bind:class="[{active:isActive},{active2:isActive2}]"></div>8.3.1绑定class属性接下来通过实际操作演示如何将class属性绑定为数组，具体步骤如下。创建src/components/ClassArray.vue文件，代码如下所示。<template>

<divv-bind:class="[activeClass,borderClass]"></div>

<divv-bind:class="[isActive?activeClass:'',borderClass]"></div>

<divv-bind:class="[{active:isActive},borderClass]"></div></template><scriptsetup>

import{ref}from'vue'

constisActive=ref('true')

constactiveClass=ref('active')

constborderClass=ref('border')</script>在src/components/ClassArray.vue文件中定义页面所需的样式，代码如下所示。<style>

.active{

width:100px;

height:10px;

margin-bottom:2px;

background-color:blue;

}

.border{

border:2pxsolidblack;

}</style>8.3.1绑定class属性在App.vue中引入ClassArray组件，切换页面中显示的组件，代码如下所示。<scriptsetup>

importClassArrayfrom'./components/ClassArray.vue'</script><template>

<class-array/></template>保存上述代码后，在浏览器中访问:5173，将class属性绑定为数组的页面效果如图所示。图

将class属性绑定为数组的页面效果8.3.2绑定style属性在Vue中将style属性绑定为对象时，该对象中的属性名表示CSS属性名，属性值为CSS属性值。CSS属性名可以用驼峰式（camelCase）或短横线分隔（kebab-cased）的形式进行设置。例如，用于设置元素的字体大小的属性有fontSize和font-size两种写法。以对象语法绑定元素的style属性，示例如下。将style属性绑定为对象01<template>

<divv-bind:style="{color:'red',fontSize:'20px'}"></div>

<divv-bind:style="{color:activeColor,fontSize:fontSize+'px'}"></div></template><scriptsetup>

import{ref}from'vue'

constactiveColor=ref('red')

constfontSize=ref(30)</script>上述代码将对象直接定义在模板中。除了这种方式外，还可以将对象定义在<script>标签中，示例如下。<template>

<divv-bind:style="styleObject"></div></template><scriptsetup>

import{reactive}from'vue'

conststyleObject=reactive({

color:'red',

fontSize:'12px'

})</script>8.3.2绑定style属性接下来通过实际操作演示如何将style属性绑定为对象，具体步骤如下。<template>

<divv-bind:style="{'background-color':red,width:width,height:height+

'px'}"></div>

<div

v-bind:style="{backgroundColor:isBlue?blue:'black',width:'50px',height:'50px'}"></div>

<divv-bind:style="styleObject"></div></template><scriptsetup>

import{reactive,ref}from'vue'

constisBlue=ref(false)

constblue=ref('blue')

constred=ref('red')

constwidth=ref('100%')

constheight=ref(40)

conststyleObject=reactive({

backgroundColor:'green',

width:'100px',

height:'100px'

})</script>创建src/components/StyleObject.vue文件，代码如下所示。<scriptsetup>

importStyleObjectfrom'./components/StyleObject.vue'</script><template>

<style-object/></template>在App.vue中引入StyleObject组件，切换页面中显示的组件，代码如下所示。图

将style属性绑定为对象的页面效果和控制台效果8.3.2绑定style属性将style属性绑定为数组，可以实现将多个样式应用到同一个元素上。示例如下。将style属性绑定为数组02<divv-bind:style="[classObj1,classObj2]"></div>接下来通过实际操作演示如何将style属性绑定为数组，具体步骤如下。<template>

<divv-bind:style="[activeClass,borderClass]"></div>

<divv-bind:style="[isActive?activeClass:'',borderClass]"></div>

<divv-bind:style="[{backgroundColor:'green',height:'100px'},borderClass]"></div></template><scriptsetup>

import{reactive,ref}from'vue'

constisActive=ref(true)

constactiveClass=reactive({

height:'100px',

backgroundColor:'green'

})

constborderClass=reactive({

border:'20pxsolidred'

})</script>创建src/components/StyleArray.vue文件，具体代码如下所示。8.3.2绑定style属性<scriptsetup>

importStyleArrayfrom'./components/StyleArray.vue'</script><template>

<style-array/></template>在App.vue中引入StyleArray组件，切换页面中显示的组件，代码如下所示。保存上述代码后，在浏览器中访问:5173并打开控制台，将style属性绑定为数组的页面效果和控制台效果如图所示。图

将style属性绑定数组的页面效果和控制台效果【商业案例】

学生信息管理系统——新增和修改学生信息任务1新增学生信息首先，为“新增”按钮绑定click事件，即在HeaderComponent组件中的“新增”按钮上使用v-on指令绑定click事件，当单击时调用handleAdd()方法。使用defineEmits()函数声明一个自定义事件showModal()函数，当单击“新增”按钮时调用emit()函数，告诉父组件打开“新增学生信息”弹窗。emit()函数中需要传入3个参数：第1个参数是自定义事件名称showModal，第2个参数用于指定打开弹窗（传入true）或关闭弹窗（传入false），第3个参数用于定义弹窗状态——新增（add）、修改（edit）和查看（view）。代码如下所示（位置：学生信息管理系统-Vue3版/student-management/src/components/

HeaderComponent.vue）。<template>

<divclass="header">

<divclass="headerTitle">

<divclass="headerLine">学生信息管理系统</div>

</div>

<divclass="headerButton">

<buttonclass="addButton"@click="handleAdd">新增</button>

<buttonclass="deleteButton">删除</button>

</div>

</div></template><scriptsetup>

constemit=defineEmits(['showModal'])

consthandleAdd=()=>{

emit('showModal',true,'','add')

}</script>【商业案例】

学生信息管理系统——新增和修改学生信息

其次，在父组件（IndexComponent）中接收“新增”按钮传过来的自定义事件showModal，同时使用ref()函数定义用于确定是否显示弹窗的变量open、表示当前弹窗状态的变量modalType以及表示当前需要展示的学生信息的变量currentStudent（修改学生信息时需要用到该变量）。代码如下所示（位置：学生信息管理系统-Vue3版/student-management/src/components/

IndexComponent.vue）。<template>

<modal-component

:modalType="modalType"

@showModal="handleModal"

:currentStudent="currentStudent"

@confirmModal="handleConfirmEditStudent"

v-if="open"

/></template><scriptsetup>

importModalComponentfrom'./ModalComponent.vue'

import{computed,ref,reactive}from'vue'

constopen=ref(false)

letcurrentStudent=ref({})

letmodalType=ref('add')

consthandleModal=(show,id,type='add')=>{

}</script>【商业案例】

学生信息管理系统——新增和修改学生信息

再次，定义弹窗组件ModalComponent.vue，弹窗组件中需要展示标题、学生信息、“确定”按钮和“取消”按钮等元素。使用defineProps()函数接收父组件传递过来的当前弹窗需要展示的学生信息，以及当前弹窗的状态，根据弹窗状态动态显示弹窗的标题。然后，使用<input>标签定义每个学生的信息；使用reactive()函数定义变量editStudent，用于存储当前编辑的学生信息。最后，给“确定”按钮和“取消”按钮绑定click事件，当单击“确定”按钮时，将当前编辑的学生信息传递给父组件，父组件向学生信息的数组中插入一条新数据。部分代码如下所示（位置：学生信息管理系统-Vue3版/student-management/src/

components/ModalComponent.vue）。<template>

<divclass="modal">

<divclass="modal-dialog">

<divclass="modal-content">

<divclass="modal-header">

<i@click="handleClose">X</i>

<h4>{{title}}</h4>

</div>

<divclass="modal-body">

<p>

序号：<input

@change="changeStudent('id',$event)"

:value="editStudent.id"

type="text"

disabled

/>

</p><p>

学号：<input

@change="changeStudent('No',$event)"

:value="editStudent.No"

type="text"

/>

</p>

<p>

姓名：<input

@change="changeStudent('name',$event)"

:value="editS"

type="text"

/>

</p><p>

学院：<input

@change="changeStudent('college',$event)"

:value="editStudent.college"

type="text"

/>

</p>

<p>

专业：<input

@change="changeStudent('major',$event)"

:value="editStudent.major"

type="text"

/>

</p>

<p>

年级：<input

@change="changeStudent('grade',$event)"

:value="editStudent.grade"

type="text"

/>

</p>

<p>

班级：<input

@change="changeStudent('className',$event)"

:value="editStudent.className"

type="text"

/>

</p>【商业案例】

学生信息管理系统——构建学生信息列表，开发分页功能<p>

年龄：<input

@change="changeStudent('age',$event)"

:value="editStudent.age"

type="text"

/>

</p>

</div>

<divclass="modal-footer">

<buttonclass="ok-button"@click="handleConfirm">确定</button>

<buttonclass="cancel-button"@click="handleClose">取消</button>

</div>

</div>

</div>

</div></template>

<scriptsetup>

import{computed,reactive}from'vue'

constprops=defineProps({

currentStudent:{

type:Object,

default:()=>{},

},

modalType:{

type:String,

default:()=>'add',

},

})

consteditStudent=reactive(props.currentStudent)

constchangeStudent=(key,e)=>{

editStudent[key]=e.target.value}

constemit=defineEmits(['showModal','confirmModal'])

consttitle=computed(()=>{

consttitleMap={

add:'新增学生信息',

edit:'修改学生信息',

view:'查看学生信息',

}

returntitleMap[props.modalType]

})

consthandleClose=()=>{

emit('showModal',false)}

consthandleConfirm=()=>{

emit('confirmModal',editStudent)}</script>【商业案例】

学生信息管理系统——构建学生信息列表，开发分页功能图“新增学生信息”弹窗任务2修改学生信息【商业案例】

学生信息管理系统——构建学生信息列表，开发分页功能“修改学生信息”弹窗复用ModalComponent组件。与新增学生信息功能不同的是，在打开“修改学生信息”弹窗时，需要将当前的学生信息传给弹窗组件，并在学生信息列表中每个“修改”按钮上使用@click绑定click事件。当单击“修改”按钮时，调用handleEdit()函数将当前学生的序号传给父组件，父组件根据序号去当前页中的学生信息列表中查找学生信息，并传递给弹窗组件，弹窗组件将学生信息展示在弹窗中。由于是根据序号字段去学生信息列表中查找数据的，应确保序号是唯一的，且不支持修改，因此将序号一栏设置为禁用。当单击“确定”按钮时，根据序号更新学生信息数组中的数据。代码如下所示（位置：学生信息管理系统-Vue3版/student-management/src/components/

IndexComponent.vue）。consthandleConfirmEditStudent=(student)=>{

if(modalType.value==='add'){

student.id=students.length+1

students.push(student)

}elseif(modalType.value==='eidt'){

constindex=students.findIndex((item)=>item.id===student.id)

students.splice(index,1,student)

}

open.value=false}<template>

<divclass="container">

<tableid="containerTable">

<theadclass="tableHeader">

<tr>

<th><inputtype="checkbox"/></th>

<th>序号</th>

<th>学号</th>

<th>姓名</th>

<th>学院</th>

<th>专业</th>

<th>年级</th>

<th>班级</th>

<th>年龄</th>

<th>操作</th>

</tr>

</thead>

<tbodyid="tdata">

<tr

class="trHover"

v-for="{id,No,name,college,major,grade,className,age}inprops.data":key="id">

<td><input@change="changeSelectedStudent(id)"type="checkbox"/></td>

<td>{{id}}</td>

<td>{{No}}</td>

<td>{{name}}</td>【商业案例】

学生信息管理系统——构建学生信息列表，开发分页功能代码如下所示（位置：学生信息管理系统-Vue3版/student-management