Java 前端及 应用教程 3

第2章

模板语法与响应式基础CONTENTS目录01

本章学习目标02

文本插值03

响应式数据：ref()与reactive()04

内置指令05

计算属性与侦听器本章学习目标01Vue核心技巧速成指南

Vue模板语法掌握文本插值，理解响应式数据原理，熟练使用内置指令。

Vue高级特性精通计算属性、侦听器应用，明确选项式与组合式API差异。文本插值02基础插值语法：Vue.js数据绑定基础Vue.js数据绑定基础

基础插值语法Vue.js使用Mustache语法，即双大括号"{{}}"进行文本插值，实现数据绑定，如<p>{{msg}}</p>，msg为'Hello,Vue!'。示例代码展示基础插值用法，<template>中<p>{{msg}}</p>绑定msg变量，msg在<scriptsetup>内定义为'Hello,Vue!'。基础插值语法：Vue.js数据绑定基础文本插值应用实例双大括号标签替换为组件实例msg属性值，msg属性更改时文本内容同步更新。插值中的JavaScript表达式插值中的JavaScript表达式

支持单一表达式，以组件实例为作用域，建议复杂逻辑用计算属性或方法。教学提示

表达式应为可放在return后的合法JS代码，每绑定仅支持单一表达式。响应式数据：ref()与reactive()03响应式数据：ref()与reactive()

ref()用法创建响应式引用类型，适用于单一值，如状态管理，表单控件绑定。

reactive()用法转换对象或数组为响应式，适合复杂数据结构，如组件内部数据模型。ref()的使用ref()功能创建响应式数据，包装基本或对象类型，通过.value访问修改。ref()访问使用.value获取或变更ref包装的数据内容，实现响应式更新。基本类型ref()常用于基本类型，包括字符类型（String）、数值类型（Number）、布尔类型（Boolean）等。reactive()的使用

reactive()功能创建响应式对象，递归转换所有属性为响应式数据。

使用场景适用于需要动态更新界面的数据结构，如数组和复杂对象。reactive()的使用：对象类型

reactive()应用示例导入reactive创建响应式对象state，包含count初始值0和list数组[1,2,3]。

访问与修改对象属性访问对象属性用console.log(state.count)输出0，修改对象属性用state.count++。

访问与修改数组元素访问数组元素用console.log(state.list[0])，修改数组元素用state.list[0]=10。reactive()的使用基本类型reactive()不能直接用于基本类型，传递基本类型数据给reactive()不会变成响应式的。ref()与reactive()对比ref()特性适用于任意值，需通过.value访问，支持重新赋值，模板中自动解包。reactive()特性适用于对象/数组，直接访问无需.value，不支持重新赋值，模板中直接使用。适用数据类型ref()适用于基本数据类型和包装对象类型，对象类型常用reactive()。reactive()用于复杂对象和嵌套数据结构，不直接用于基本数据类型。访问和修改方式ref()数据：JS脚本中通过.value访问修改，模板中无需.value。reactive()数据：直接通过对象属性访问修改，无需.value。响应式追踪机制ref()包装对象独立依赖收集，reactive()创建的对象整体依赖收集且内部属性变化可追踪。可变性ref()引用的值可重新赋值。reactive()创建的对象不可重新赋值，只能修改内部属性。内置指令04内置指令

Vue.js内置指令特点以"v-"前缀，赋予DOM响应式功能，高效控制结构、属性、事件及数据绑定。

内置指令作用实现常见DOM操作与逻辑控制，提升开发效率，适用于模板中的动态功能实现。内容渲染指令：v-text、v-html

v-text指令应用v-text指令用于将数据作为纯文本插入元素，覆盖原有内容，等价于{{textContent}}，可隐藏初始渲染前Mustache语法闪烁。

v-html功能与风险v-html指令用于将数据作为HTML插入元素，解析并渲染HTML内容，使用时需注意安全，避免插入恶意代码导致XSS攻击。条件渲染指令：v-if与v-show：v-if指令的使用与特性v-if指令的基本用法

01v-if指令使用用于条件渲染，表达式为真时渲染元素，为假时从DOM移除，节省内存，常与v-else和v-else-if搭配，实现多条件判断。

02v-if特性示例示例中，根据isLoggedIn变量值，动态显示已登录或请登录信息，实现页面内容的条件性展示。条件渲染指令：v-if与v-show：v-if指令的使用与特性v-if指令的高级应用

条件渲染指令通过v-if和v-else实现页面组件的条件性显示，依赖数据状态控制页面渲染，高效管理DOM元素。

v-if特性使用v-if指令可基于条件展示或隐藏HTML元素，条件为真时元素被编译插入，否则被移除，适用于频繁切换的场景。条件渲染指令：v-if与v-show：v-if指令的使用与特性

<template>标签作用<template>标签是不可见包装器，不生成实际DOM节点，可保持DOM结构干净，避免多余<div>标签嵌套。条件渲染指令：v-if与v-show：v-if与v-show的区别v-if与v-show的区别v-if是真正条件渲染，元素会销毁重建，切换开销大，适合条件很少改变情况，可与<template>配合渲染多个元素。v-show的工作原理v-show根据条件显示或隐藏元素，元素始终存在于DOM中，通过修改displayCSS属性控制显示（block）与隐藏（none）。示例代码示例代码中，template部分有div元素，v-show绑定showMessage控制显示隐藏；scriptsetup部分定义了ref变量showMessage并初始化为false。总结对比v-if与v-show指令均可根据条件控制元素显示或消失，但实现原理不同。条件渲染指令：v-if与v-show：v-if与v-show的特性对比

v-if与v-show的渲染机制对比条件为假时，v-if将元素从DOM中移除，v-show通过CSS控制显示，元素始终存在于DOM中。

初始渲染性能的差异v-if条件为假时不渲染，初始性能较好；v-show无论条件如何都渲染，初始加载速度稍慢。

频繁切换的开销分析对于频繁切换的情况，v-if会有较高的开销，而v-show则更适合，开销较小。

使用场景的具体指导v-if适用于运行时条件很少改变的情况，而v-show则适用于需要频繁切换显示状态的场景。列表渲染指令：v-for

v-for指令Vue.js中关键指令，用于循环渲染数组、对象或整数，实现动态列表展示。列表渲染指令：v-for：遍历一维数组

v-for遍历数组基础v-for遍历数组语法为v-for="(item,index)inarray"，item是数组元素，index是元素索引（可选）。列表渲染指令：v-for：遍历一维数组v-for指令应用实例

列表渲染指令使用v-for遍历fruits数组，显示索引和值，数组包含苹果、香蕉、橙子。数据绑定通过ref创建响应式数组fruits，初始化为['苹果','香蕉','橙子']。列表渲染指令：v-for：遍历一维数组

解释v-for指令作用v-for指令用于遍历数组，可获取当前项的值和索引，并需为每个列表项提供唯一key。列表渲染指令：v-for：遍历对象数组使用v-for遍历对象数组

列表渲染使用v-for遍历对象数组，如products，展示每个商品名称、价格和描述，通过:key绑定唯一标识提升性能。v-for示例模板中，以li元素包裹，展示数组中每个item的name、price和description属性，利用v-for实现动态列表生成。列表渲染指令：v-for：遍历对象数组定义响应式数组并遍历

列表渲染指令v-for指令用于遍历对象数组，展示商品信息。

商品数据结构定义商品数组，包含id、name、price和description字段。列表渲染指令：v-for：遍历对象数组渲染商品信息至列表通过v-for遍历响应式数组products，将商品对象item的name、price、description渲染到li元素，用:key="item.id"设唯一标识确保渲染准确高效。列表渲染指令：v-for：遍历对象

v-for遍历对象使用v-for="(value,key,index)inobject"语法，遍历对象属性，生成列表项，示例代码展示具体用法。

v-for示例代码示例中，通过v-for指令遍历名为'user'的对象，生成包含键值对的<li>元素，实现动态列表渲染。列表渲染指令：v-for遍历数字范围v-for可遍历整数范围，语法“(n,index)innum”，循环num次，n从1开始自增1，index为可选索引。列表渲染指令：v-for：<template>标签与v-for联合使用解决v-for与v-if优先级问题

联合使用场景解决v-if和v-for同节点优先级问题，用<template>包裹v-for，优化列表渲染条件判断。

示例代码通过v-for遍历items，结合v-if判断item.isActive，动态渲染<li>元素，确保高效列表展示。列表渲染指令：v-for：<template>标签与v-for联合使用错误做法与正确做法对比

01v-for优化使用<template>包裹v-for，先通过v-if过滤，避免无效循环，提升性能，逻辑更清晰。

02v-for与v-if直接在v-for循环中使用v-if会导致不必要的计算，应将v-if置于<template>标签内，先过滤后渲染。列表渲染指令：v-for：key的重要性

Vue中key的重要性key是v-for的重要特殊属性，为列表节点提供唯一标识，助Vue高效跟踪变化，精准更新DOM，避免不必要渲染，提升性能。列表渲染指令：

v-for

key的重要性列表渲染无key时，Vue误判A→C和B→A为内容变更，导致非必要DOM更新，状态错位。key的重要性使用key，Vue通过item.id识别节点，正确处理新节点C的插入，仅移动A和B，保持状态准确。列表渲染指令：v-for：key的重要性使用key的注意事项必须始终使用key，Vue3强制要求且开发模式会警告缺失情况；选择正确key值，推荐唯一稳定标识如item.id，避免使用数组索引（除非静态列表）。属性绑定指令：v-bind

属性绑定指令：v-bindVue.js核心指令，实现DOM属性与组件数据响应式绑定，数据变化自动更新，提高开发效率，简写形式为":"。属性绑定指令：v-bind：绑定普通属性

v-bind指令基本应用绑定HTML属性如src、href，示例中imgSrc变化更新图片，linkHref变化更新链接地址。

属性绑定示例使用v-bind动态绑定图片src和链接href，实现数据驱动视图更新。属性绑定指令：v-bind：绑定普通属性响应式数据绑定示例

imgSrc和linkHref是响应式数据，通过v-bind绑定到HTML元素属性，数据改变时对应属性更新，实现动态展示图片和链接跳转功能。属性绑定指令：v-bind：绑定布尔型属性

布尔型属性绑定效果v-bind绑定布尔型HTML属性（如disabled、checked），值为true或空字符串时添加属性，为false时移除属性。属性绑定指令：v-bind：绑定布尔型属性

属性绑定使用v-bind动态绑定按钮的disabled属性，控制按钮禁用状态。

布尔型属性通过isButtonDisabled变量的真假值，实现按钮的动态禁用或启用。属性绑定指令：v-bind：绑定布尔型属性

Vue响应式数据定义使用ref定义响应式数据isButtonDisabled，初始值为true，用于控制按钮禁用状态。

控制按钮禁用状态isButtonDisabled为true时，按钮添加disabled属性，处于禁用状态；为false时，移除disabled属性，恢复可用。属性绑定指令：v-bind：绑定多个属性

v-bind简化属性绑定不带参数的v-bind可将含多个属性的对象一次性绑定到元素上，简化代码书写。属性绑定指令：

v-bind绑定多个属性

动态属性绑定使用:[attributeName]="value"语法，根据dynamicAttr动态绑定attrValue至属性，如按钮标题动态显示。属性绑定示例示例代码展示动态属性绑定，通过v-bind实现，最终呈现为按钮标题"动态提示"的动态效果。v-bind指令绑定样怯属性

v-bind指令作用动态控制元素样式，提升视觉交互体验。

绑定class属性系统讲解使用方法，适应不同场景需求。

绑定styles属性灵活调整样式，增强页面吸引力。v-bind绑定style属性

v-bind指令用法通过JavaScript对象描述样式属性与值，支持响应式数据，示例：`<div:style="{width,height,fontSize}">`

样式属性命名采用驼峰命名法，如backgroundColor对应CSS中的background-color，值可为静态或响应式。v-bind绑定style属性

01v-bind绑定style数组组合多个样式对象，动态覆盖同名属性，如基础样式与额外样式结合，实现复杂样式统一管理。

02动态控制样式根据条件添加或移除样式对象，如通过isActive控制activeStyle的绑定，实现样式灵活变化。v-bind绑定style属性混合使用对象语法和数组语法

复杂样式绑定混合使用对象与数组语法，先设基础样式，再动态绑定背景色与字体色，实现灵活控制。

示例代码解析示例展示v-bind指令结合对象和数组语法，用于动态调整元素宽度、高度、背景色及字体颜色，增强样式灵活性。v-bind绑定class属性对象语法绑定class类名

v-bind指令绑定class属性通过对象语法，键为类名，值为布尔，动态控制class添加或移除，如{active:isActive,'text-danger':hasError}，实现样式动态切换。

示例代码解析使用v-bind绑定对象到class，对象中isActive和hasError为响应式变量，控制'active'和'text-danger'类的动态显示，实现样式灵活变化。v-bind绑定class属性数组语法绑定class类名

v-bind绑定class数组语法绑定class，直接添加多个固定类名，结合三元表达式动态控制。

动态数组绑定通过v-bind和ref实现class动态添加与移除，点击按钮切换class状态。v-bind绑定class属性混合使用对象语法和数组语法

01v-bind指令用法通过v-bind指令，数组与对象语法结合，实现复杂class绑定，示例代码展示动态类名添加。

02示例代码解析代码中，先用数组语法定义基础类名，再用对象语法按条件添加active与text-danger类，实现动态样式绑定。事件处理指令：v-on事件处理指令：v-on使用"@"符号简化v-on语法，实现DOM元素事件监听，如点击、鼠标移动、键盘事件，增强页面交互性。事件处理指令：v-on：基本事件绑定v-on的基本语法v-on的语法格式：<标签名v-on:事件名称="事件响应函数或JavaScript语句"></标签名>v-on：基本事件绑定

01事件处理指令使用v-on绑定单击事件，定义handleClick函数，用户点击按钮时，函数调用并在控制台输出信息。

02基本事件绑定示例代码展示如何在Vue中使用v-on指令绑定点击事件，通过@click调用handleClick方法实现按钮点击后的响应动作。事件处理指令：v-on：传递参数

01事件处理与静态参数事件处理函数需传递额外参数时，可在绑定事件时传递静态参数，也可结合$event传递事件对象。

02传递静态参数的示例传递静态参数给事件处理函数是Vue中的常见模式，示例如下：

03使用MouseEvent对象event参数是浏览器原生MouseEvent对象，单击事件触发时Vue自动传递给handleClick()函数，clientX和clientY属性表示鼠标指针相对于浏览器窗口可视区域的坐标（px），通过模板字符串动态拼接坐标信息输出。

04JavaScript前端框架应用实践教程,YJavaScript前端框架应用实践教程（基于Vue3.x）事件修饰符

事件修饰符介绍Vue中简化DOM事件处理的特殊后缀，通过点号表示，用于改变事件监听器默认行为，提升事件处理效率。事件修饰符作用使用户能更便捷处理事件，无需在事件处理函数中编写额外逻辑，提供更精简的代码实现。事件修饰符：常用事件修饰符

.stop—.stop修饰符可阻止事件冒泡（相当于调用event.stopPropagation()），避免事件向父元素传递。事件修饰符：常用事件修饰符.prevent—

阻止默认行为使用.prevent修饰符，阻止事件如表单提交或链接点击的默认行为，示例代码展示阻止表单提交时的页面刷新。

事件修饰符示例通过.prevent阻止默认行为，如表单提交，点击链接等，确保触发自定义方法而非执行默认动作。事件修饰符：常用事件修饰符

.capture—.capture修饰符让事件监听器以捕获模式执行，事件从外向内传递，示例中单击按钮先触发onDivClick()再触发onButtonClick()。

.self—事件仅从元素本身触发时才执行回调，子元素冒泡事件不触发，如直接点击div触发，点击按钮不触发。

.once—.once修饰符使事件监听器只触发一次，执行后被移除，示例中按钮首次点击触发方法，后续点击无反应。

.passive—.passive修饰符不阻止默认行为，用于触摸事件，告知浏览器事件处理函数不调用preventDefault()，可优化触摸事件性能，使滚动更流畅。事件修饰符：按键修饰符

Vue3.x按键修饰符Vue3.x事件按键修饰符是处理键盘事件的特殊语法，允许根据不同按键触发相应事件处理函数。

常用按键修饰符常用按键修饰符对应常见键盘按键，可处理特定按键触发事件，示例含Enter、Delete等键的keyup事件及控制台输出提示。事件修饰符：按键修饰符

事件修饰符用于前端框架如Vue3.x，结合系统按键实现组合键功能，如Ctrl+单击、Alt+Enter，通过".exact"精确控制单个按键事件。

按键修饰符示例中，按钮与输入框绑定不同组合键触发事件，包括Shift+单击、Command+单击，事件处理函数定义于<scriptsetup>，控制台输出提示信息。事件修饰符：按键修饰符

鼠标按键修饰符用于指定触发事件的鼠标按键，如.left、.right、.middle，示例中监听左、右、中键单击，对应处理函数输出提示信息。事件修饰符修饰符串联使用.stop阻止事件冒泡触发handleLink()，.self单击自身触发.selfOnceClick()，.once事件只触发一次，Ctrl+鼠标左键单击按钮触发ctrlLeftClick()双向数据绑定指令：v-modelv-model功能实现表单元素与Vue实例数据双向绑定，数据互更。v-model应用场景适用于input、textarea、select等，同步视图与数据。双向数据绑定指令：v-model

基本语法v-model是语法糖，自动结合表单元素的value属性和input事件。示例中v-model="message"等价于:value="message"且@input="message=$event.target.value"。双向数据绑定指令：v-model：基本使用方法v-model基本用法适用于各类表单元素，实现数据双向绑定，用户输入实时更新Vue实例数据，示例中input元素与text变量同步变化。v-model示例用户在input框输入内容，text变量实时更新；反之亦然，形成双向数据流，确保视图与数据一致性。双向数据绑定指令：v-model：基本使用方法

多行文本框绑定使用v-model与textarea元素绑定，实时更新message变量，同步显示文本。

单选按钮绑定通过v-model绑定picked变量，用户选择不同单选按钮，value属性更新picked，实现双向数据绑定。双向数据绑定指令：v-model基本使用方法

单个复选框绑定绑定布尔值，true选中，false未选中，实现状态与内容双向绑定。多个复选框绑定绑定数组，存储选中复选框value值，选中时添加，取消时移除，内容同步更新。单项选择框绑定绑定单一值，与选中选项value对应，选中选项变化时，变量与显示内容同步更新。双向数据绑定指令：

v-model基本使用方法v-model与多项选择框的绑定及v-for结合

v-for结合v-model动态生成选项，value与text分别绑定option.value和option.text，优化代码维护性。

v-model基本用法实现表单控件与Vue实例进行双向数据绑定，简化数据同步代码。双向数据绑定指令：v-model

v-model修饰符v-model修饰符可修改v-model指令默认行为，以适应不同应用场景，接下来将对不同修饰符进行讲解。双向数据绑定指令.lazy修饰符

v-model与.lazy修饰符默认v-model在input事件触发时更新数据，.lazy修饰符使数据在change事件（输入框失焦或按Enter键）时更新。

示例代码JavaScript前端框架应用实践教程（基于Vue3.x），包含从'vue'导入ref，定义msg为ref('')。

.lazy修饰符效果.lazy修饰符使输入框值在change事件触发时更新msg变量，段落内容同步更新。双向数据绑定指令.number修饰符v-model.number修饰符介绍

v-model默认绑定输入框值为字符串类型，.number修饰符可将输入值自动转换为数字类型。.number修饰符的使用示例

v-model.number指令将输入框值与age变量双向绑定，会尝试将输入值转换为数字类型。输入框与变量的双向绑定

用户输入数字时，age变量更新为输入值，<p>标签显示其类型；有效数字为数字类型，无效则保持初始null或其他无效状态，实现双向数据绑定及类型显示功能。

.trim修饰符.trim修饰符能自动过滤用户输入内容首尾空格，v-model.trim可双向绑定输入框值与变量，实时显示去除首尾空格后的内容。双向数据绑定指令.trim修饰符计算属性与侦听器05计算属性与侦听器

Vue.js计算属性处理依赖数据，自动更新，提高效率，适用于组合式API和选项式API。

Vue.js侦听器监听数据变化，执行异步操作，适用于复杂数据处理，兼容组合式与选项式API。选项式API中的计算属性与侦听器：计算属性

计算属性特性基于依赖响应式数据计算，自动追踪变化，仅依赖更新时重算，优化性能。

计算属性定义组件选项中对象表示，属性代表计算属性，支持只读和可读写两种定义方式。选项式API中的计算属性与侦听器：计算属性

01计算属性只读计算属性自动更新，依赖数据变化时重新计算，直接访问如同普通属性。

02可读写计算属性通过get()返回结果，set()在修改时执行操作，实现更复杂逻辑处理。选项式API中的计算属性与侦听器：侦听器侦听器功能详解选项式API中，侦听器(watch)是对象，属性名是监听的数据属性名，属性值可以是函数、字符串或含handler、deep、immediate等选项的对象。组合式API中的计算属性与侦听器：计算属性

计算属性应用场景适用于需根据其他数据计算值并允许外部修改更新场景，如动态展示与数据同步。

计算属性实现方式通过computed()函数传入含get()和set()方法对象，get()返回值，set()更新相关数据。组合式API中的计算