Vue.js前端框架项目实战（微课版） 课件 第三章 交互特性

3.1

事件处理前端框架技术与应用FrontendFrameworks交互特性事件处理是Vue.js中实现用户交互的核心机制。通过事件处理器，开发者可以捕获用户的输入、点击等操作，并触发相应的响应。Vue.js提供了简洁的语法来绑定事件，同时支持事件修饰符和参数传递，使事件处理更加灵活和便捷。前言1v-on指令2事件修饰符3按键修饰符4系统修饰符目录|CONTENT1v-on指令v-on指令的概念在Vue.js中，绑定事件非常简单。只需在模板中使用v-on指令或其简写形式@，即可将事件绑定到元素上，并在事件触发时执行对应的JavaScript函数。v-on指令的基本语法如下：

<elementv-on:event-name="handleFunction"></element>其中：event-name：是要绑定的事件名称，通常是DOM事件，比如click、input、submit等。handleFunction：是要执行的事件处理器，可以是方法名或者内联表达式。v-on:event-name：也可以简写成@event-name1v-on指令v-on：@v-on指令的语法糖1v-on指令v-on指令的使用监听事件我们可以使用

v-on

指令(简写为

@)来监听DOM事件，并在事件触发时执行对应的JavaScript。用法：v-on:click=“count++"

或

@click="handler"。事件处理器的值可以是：内联事件处理器：事件被触发时执行的内联JavaScript语句。内联事件处理器通常用于简单场景，例如上述例子v-on:click="count++"中的count++。方法事件处理器：一个指向组件上定义的方法的属性名或是路径。随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此v-on也可以接受一个方法名或对某个方法的调用。1v-on指令事件处理器1v-on指令方法事件处理器的使用1v-on指令内联事件处理器中调用方法除了直接绑定方法名，我们还可以在内联事件处理器中调用方法。这允许我们向方法传入自定义参数以代替原生事件：模板编译器会通过检查

v-on

的值是否是合法的JavaScript标识符或属性访问路径来断定是何种形式的事件处理器。举例来说：foo、foo.bar

和

foo[‘bar’]

会被视为方法事件处理器，foo()

和

count++

会被视为内联事件处理器。1v-on指令方法与内联事件的判断2事件修饰符在处理事件时，调用event.preventDefault()或event.stopPropagation()等方法来控制事件行为是很常见的。虽然我们可以直接在方法内部调用这些函数，但如果方法能够专注于数据逻辑，而不涉及DOM事件的细节处理，代码会更加清晰。为了解决这一问题，Vue为v-on提供了事件修饰符，用于简化事件的处理。通过这些修饰符，我们可以控制事件的传播和默认行为，而无需在方法内部显式调用event.preventDefault()或event.stopPropagation()等操作。这样一来，开发者可以更专注于处理业务逻辑，而不必关心繁琐的事件细节，从而提升代码的可读性和维护性。事件修饰符的概念2事件修饰符修饰符是用

.

表示的指令后缀，常用的事件修饰符有：.stop：阻止事件冒泡.prevent：阻止事件的默认行为.capture：在事件捕获阶段触发事件处理函数.self：只有当事件是从绑定元素本身（而不是子元素）触发时才调用事件处理函数.once：事件处理函数只触发一次.passive：告诉浏览器你不想阻止事件的默认行为使用事件修饰符的语法如下:

<elementv-on:event-name.modifier="handleFunction">

<!--内容-->

</element>常用的事件修饰符2事件修饰符事件修饰符的使用3按键修饰符常见的按键修饰符Vue.js提供了按键修饰符，用于简化键盘事件的处理，并限制特定按键的触发。以下是常用的按键修饰符：按键修饰符触发条件使用场景及其作用enter按下Enter键常用于表单提交、搜索框等场景，在用户按下Enter键后执行特定的操作tab按下Tab键用于处理键盘导航或在表单中移动焦点delete按下Delete键或Backspace键在编辑器或表单中删除文本时非常有用esc按下Esc键常用于取消操作，如关闭弹出窗口或退出当前编辑模式space按下空格键在播放/暂停媒体、切换选项等场景中常见up按下上箭头键常用于增加数值、滚动列表向上或导航菜单向上移动down按下下箭头键常用于减少数值、滚动列表向下或导航菜单向下移动left按下左箭头键常用于导航菜单向左移动或在水平滚动的列表中向左滚动right按下右箭头键常用于导航菜单向右移动或在水平滚动的列表中向右滚动3按键修饰符按键修饰符的使用这些按键修饰符可以与Vue.js中的事件监听器一起使用，例如@keydown.enter，以便于开发者能够根据用户的键盘输入执行特定的操作，增强用户交互体验。4系统修饰符系统修饰符的使用在处理键盘或鼠标事件时，Vue还提供了一些系统修饰符，用于处理特殊的键盘组合事件，如ctrl、shift、alt、meta等。这些修饰符可以与其他修饰符组合使用，使得事件处理更加灵活。下面这个例子演示了如何使用Vue.js框架创建一个按钮，并通过监听@click.ctrl事件来检测用户是否在按住Ctrl键的同时点击了按钮，如果是，则执行onCtrlClick方法，在控制台输出一条消息。注意：Vue.js基本指令的作用及其使用范围。解释：指令(Directives)是带有v-前缀的特殊属性。作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。Vue.js基本指令感谢观看前端框架技术与应用FrontendFrameworks3.2计算属性前端框架技术与应用FrontendFrameworks交互特性模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。因此在Vue.js中推荐使用计算属性来描述依赖响应式状态的复杂逻辑。前言1特点和基本用法2与方法的比较目录|CONTENT1特点和基本用法计算属性的特点计算属性是Vue.js组件配置选项中的一个，它可以帮助我们更好地组织和维护复杂的视图逻辑。它允许我们定义基于其他数据属性计算得出的属性，这些计算属性会被缓存，只有当它们的依赖项发生变化时，才会重新计算。它具有以下几个特点：（1）函数形式：计算属性本质上就是一个函数，需要以函数的形式在computed选项中声明。但在使用时，我们把它当成属性来使用，非常方便。（2）自动缓存：计算属性会被缓存，只有当它们的依赖项发生变化时，才会重新计算。这大大提高了性能，避免了不必要的重复计算。（3）依赖响应式数据：计算属性会自动追踪它所依赖的响应式数据。当依赖的数据发生变化时，计算属性就会自动更新，不需要手动调用。这使得数据绑定更加简洁和高效。（4）只读属性：计算属性默认是只读的。当你尝试修改一个计算属性时，会收到运行时警告。如果需要更新计算属性，应该更新它所依赖的源状态，从而触发新的计算。（5）必须有返回值：计算属性中必须有返回值，否则无法正常工作。返回值就是计算属性的最终结果。1特点和基本用法计算属性的基本用法2与方法的比较计算属性与方法的比较在Vue.js中，计算属性和方法的主要区别在于缓存机制：计算属性：基于其响应式依赖被缓存。只有当计算属性的依赖项发生变化时，才会重新计算。这意味着计算属性在多次使用时只会运行一次，直到其依赖项改变。方法：不会缓存计算结果。每次调用方法时，都会重新执行函数，无论依赖项是否改变。因此，方法在多次使用时会多次运行。简而言之，计算属性通过缓存结果提高了性能，而方法则在每次调用时都会重新计算。2与方法的比较计算属性与方法的比较下面我们通过一个例子来演示计算属性和方法的区别，并比较它们在单次调用和多次调用时的行为：2与方法的比较计算属性与方法的比较（关键代码）感谢观看前端框架技术与应用FrontendFrameworks3.3侦听器前端框架技术与应用FrontendFrameworks交互特性在前端开发中，数据变化常需触发异步操作或副作用（如API请求、DOM更新）。Vue.js的计算属性擅长同步数据派生，但无法处理副作用，这正是侦听器的核心价值。作为Vue组件的观察者，侦听器通过监听特定数据变化，以命令式代码响应状态变更，可以说是状态变化的一个响应引擎。其典型场景包括异步请求、多状态联动、手动DOM操作等，与声明式的计算属性形成功能互补：一个专注派生值，一个专注状态响应。前言1基本用法2深层侦听器目录|CONTENT1基本用法侦听器的基本用法侦听器的基本用法是在Vue实例中定义一个watch对象，该对象的属性是我们要观察的数据属性，属性的值是一个函数，这个函数会在观察的数据变化时被调用。1基本用法侦听器的基本用法1基本用法侦听器基本用法的缺点上述写法是Vue侦听器中的方法格式的写法。它存在两个缺点：（1）首次进入浏览器的时候，无法立即触发一次侦听器，只有操作后才会触发。（2）如果侦听的是一个对象，不单单只是一个值，那么对象里面的数据发生了变化，也不会触发侦听器。2深层侦听器深层侦听器的概念在前面的示例中，我们看到了如何使用watch选项来监听数据的变化。但是，如果我们想监听一个对象内部属性的变化，该怎么做呢？这就需要用到深度侦听功能。深度侦听允许我们监听复杂数据结构（如对象或数组）内部属性的变化。它可以帮助我们及时捕获数据的变化，并做出相应的响应。2深层侦听器深层侦听器的使用2深层侦听器深层侦听器的使用初始页面输入文字后控制台显示情况2深层侦听器深层侦听器的使用注意事项在使用深层侦听器时需要注意以下两点：性能影响：深层侦听器可能会对性能产生一定的影响，因为Vue.js