dom和sub是啥（第8天 14天搞定Vue3.0，事件处理(详细)）

Vue3.0中的事件处理机制

在Vue.js 3.0中，当用户与UI组件交互时，可以通过事件来触发相应的操作。用户点击按钮、滚动文本、移动鼠标或按下键盘等操作都会触发相应的事件。

Vue3.0使用v-on指令或其缩写@来DOM事件。当事件被触发时，可以执行一些JavaScript函数。语法为v-on:click="函数名"或@click="函数名"。

8.1 事件处理

为了响应用户的操作事件，我们需要在Vue组件的methods中定义相应的函数。为了简化代码，我们可以直接使用@符号来绑定事件，而不需要使用v-on的完整形式。

示例代码：

Vue3.0事件处理

老陈说

Vue.createApp({

data() {

// 定义数据对象

},

methods: {

say() {

alert("老陈说，爱编程的人真酷!")

}

},

}).mount("app")

输出结果（按下按钮时显示弹窗）

8.2 传递参数

Vue事件绑定不仅支持直接绑定到一个方法，还可以在内联JavaScript语句中调用方法并传递参数。这意味着你可以在事件处理函数中直接传递参数。

示例代码：

老陈说

老头说