《跟热饭一起学习vue吧》Part.17 事件处理器 v-on

简介: 《跟热饭一起学习vue吧》Part.17 事件处理器 v-on


事件处理器 v-on

我们之前说过,v-on是一个可以带参数的指令,不过这样的说法貌似很多同学都觉得别扭,实际上,我们说给一些特殊的属性前面加v-on ,更加便于理解。比如click。


写法举例:


<button v-on:click="函数名"> </button>


那么我们今天要重新学习v-on的真正作用了,它其实就是事件处理器。


什么意思?就是说这里可以关联一些事件,来让这个元素在一些特定动作的时候触发 关联的事件。这些事件一般是表达式,函数等,而函数内则可以做任何事情。


比如这个例子:


image.png


通过绑定一个表达式的方法,来改变vue构造器中data变量counter的值,让其自加1。然后p标签内就会实时的显示这个变化。


再来看下面这个例子:

image.png

这里我们绑定的变成了一个函数名


下面的例子中,函数带了参数


image.png

图中,函数需要一个参数叫message,我们绑定的时候,就需要用函数名+括号的方式把参数带进去。最终这个message被alert弹了出来。注意这里的具体函数内,写的代码依然是传统的js,或者jq。所以大家还是要掌握一定的js/jq基础才可以。

相关文章
|
2天前
|
移动开发 JavaScript 前端开发
vue源码如何学习?
【4月更文挑战第20天】Vue.js源码学习概要:首先,需深入了解Vue基础知识、JavaScript(ES6+)及Node.js+npm。从GitHub克隆Vue源码仓库,安装依赖并构建。学习路径始于`entry-runtime-with-compiler.js`,然后深入`core/observer`、`vdom`、`renderer`和`instance`模块,理解响应式系统、虚拟DOM、渲染及实例创建。此外,研究`src/compiler`以了解模板编译。学习过程需耐心阅读、注解代码,结合相关资源辅助理解。
24 0
|
1天前
|
JavaScript 前端开发 开发者
Vue的事件处理机制提供了灵活且强大的方式来响应用户的操作和组件间的通信
【5月更文挑战第16天】Vue事件处理包括v-on(@)指令用于绑定事件监听器,如示例中的按钮点击事件。事件修饰符如.stop和.prevent简化逻辑,如阻止表单默认提交。自定义事件允许组件间通信,子组件通过$emit触发事件,父组件用v-on监听并响应。理解这些机制有助于掌握Vue应用的事件控制。
14 4
|
2天前
|
JavaScript 编译器
Vue3之事件
Vue3之事件
4 0
|
2天前
|
JavaScript
Vue3基础之v-bind与v-on
Vue3基础之v-bind与v-on
10 0
|
2天前
|
XML 移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable定时捕获事件代码升级修改
ruoyi-nbcio-plus基于vue3的flowable定时捕获事件代码升级修改
|
2天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable定时边界事件代码升级修改(三)
ruoyi-nbcio-plus基于vue3的flowable定时边界事件代码升级修改(三)
|
2天前
|
移动开发 前端开发 JavaScript
VUE3内置组件Transition的学习使用
VUE3内置组件Transition的学习使用
|
2天前
|
移动开发 JavaScript 前端开发
学习vue3使用在线官方开发环境play.vuejs.org进行测试
学习vue3使用在线官方开发环境play.vuejs.org进行测试
10 1
|
2天前
|
JavaScript
Vue3的 组件事件
Vue3的 组件事件
18 0
|
2天前
|
JavaScript 前端开发 开发者
事件处理:深入理解Vue的事件机制
【4月更文挑战第23天】Vue.js的事件处理机制是其核心特性之一,允许开发者响应用户操作。通过`v-on`(或简写`@`)指令绑定DOM事件到方法,当事件触发时执行相应代码。事件修饰符如`.stop`、`.prevent`等简化了常见逻辑。此外,Vue支持自定义事件,便于组件间通信,如子组件通过`$emit`触发事件,父组件使用`v-on`监听并处理。理解这些概念能帮助开发者更有效地控制Vue应用的事件流程。