vue事件的绑定

最新推荐文章于 2024-08-25 09:57:22 发布
最新推荐文章于 2024-08-25 09:57:22 发布
阅读量171 收藏
点赞数
文章标签： vue.js html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47683287/article/details/109325155
版权

vue事件绑定

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <script src="vue/vue.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        
        <div id="app">
            <div>
                {{mag}}
            </div>
            <!-- <button v-on:click = "mag++">点击</button> -->
            <button v-on:click = "sd">点击</button>

        </div>
        <!-- 
            vue事件的绑定  v-on
            用法：1、代码很少时     <标签  v-on:事件 = " js代码 ">  </标签>
                   <button v-on:click = "mag++">点击</button>

                  2、回调函数方式执行事件时  <标签  v-on:事件 = " 函数数据变量 ">  </标签>
                    <button v-on:click = "sd">点击</button>

                  简写绑定方式  <标签  @事件 = " 函数数据变量 ">  </标签>   
                函数数据变量要在vue的methode属性中，在写函数，其中重点this指向当前创建的实例，也就是var 后面的对象
                        methods:{
                            sd:function() {
                                this.mag++;       this:指向app，mag是app的属性变量
                            }
                        } 
                 3、函数的调用：
                    1、直接绑定函数变量名，默认传递第一个参数是事件对象event  <标签  v-on:事件 = " 函数数据变量 ">
                    2、调用函数,事件对象必须在最后面，可传递参数，其中事件对象固定写法<标签  v-on:事件 = " 函数数据变量(参数1...,$event) ">    
                                    
            
         -->
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    mag:0,

                },
                methods:{
                    sd:function() {
                        this.mag++;
                    }
                }

            })
        </script>
    </body>
</html>
胡先生的博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue之事件绑定（初识Vue事件）
百赢出品，必属精品
04-19 1815
Vue 的事件绑定是指通过 Vue 提供的v-on指令来监听 DOM 事件，当特定事件被触发时执行相应的方法或表达式。事件绑定在 Vue 中是一种重要的交互机制，它使得开发者可以轻松地响应用户的交互行为，并进行相应的逻辑处理。当在 Vue 中使用事件绑定时，通常会使用v-on或简写形式来监听 DOM 事件，并在触发事件时执行相应的方法。监听事件：使用v-on指令来监听 DOM 事件，语法为v-on:event，其中event是要监听的事件名，例如clickmouseover等。也可以使用简写形式。
vue--事件--事件绑定,事件修饰符,
cmy741741的博客
11-18 577
事件绑定 可以用 v-on 指令监听DOM 事件，并在触发时运行一些 JavaScript 代码。v-on 还可以接收一个需要调用的方法名称。 <button v-on:click="greet">Greet</button> methods: { greet: function (event) { if (event) { alert(event.target.tagName) } // `event` 是原生 DOM 事件 ...
vue事件绑定
leva的博客
02-08 1694
Vue提供了v-on指令来监听DOM事件，在事件绑定上，类似原生JavaScript的onclick事件写法，也是在HTML上进行监听。
Vue事件绑定
过客如期的博客
05-26 7318
一，原生事件绑定 1.在原生js中，我们有三种方式为一个属性绑定事件，分别为： 在HTML标签上添加事件属性 在js中使用html节点的事件属性绑定事件处理程序，例如node.onclick=function(){} 在js中使用addEventListener("click",function(){},false) 想了解更多，可参考js原生事件绑定 二，Vue事件绑定 v-on: 1.在vue.........
vue事件绑定指令
m0_65063660的博客
08-26 1656
vue 提供了v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。语法格式如下：注意：原生 DOM 对象有onclick、oninput、onkeyup等原生事件，替换为 vue 的事件绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明：点击+、-按钮可以进行对count的加减操作。......
Vue 事件绑定与解绑
m0_60273757的博客
03-05 3502
总的来讲，v-on比$ref更加简单，但是$ref更加更加灵活。不局限于函数中而是可以分布在各个位置。
vue事件绑定-参数传递
wangshuai13383347132的博客
09-28 1767
vue事件绑定-参数传递 事件绑定-参数传递 1.如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数，参考handle1函数。 2.如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event ，参考handle2函数。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equi
vue 事件绑定函数加括号和不加括号的区别
weixin_56008510的博客
12-15 3073
自定义事件加不加括号的区别 不加括号: <div> <button @click="test">测试</button> </div> test(id){ console.log(id); } 加括号: <div> <button @click="test()">测试</button> </div> test(id){ console.log(id); } 添加括号传值
vue事件绑定中的事件修饰符
ly_fashion的博客
03-20 1680
vue.js事件修饰符
原理篇---vue事件绑定
weixin_43390711的博客
06-11 2999
一、原生事件和组件事件的绑定 原生事件的绑定是通过addEventLister绑定给真实的元素的；组件事件绑定是通过vue自定义的$on实现的。如果要在组件上使用原生事件，需要加.native修饰符，这样就相当于在父组件中把子组件当做普通html标签，然后加上原生事件。 二、$on和$emit的实现 $on、$emit是基于订阅观察者模式的，维护一个事件中心，on的时候将事件按名称存在事件中心里，称之为订阅者，然后emit将对应的事件进行发布，去执行事件中心里的对应的监听器 1、vue先创建一个构造
vue的事件绑定与方法详解
12-09
Vue 使用 `v-on` 指令来绑定事件监听器。例如，若要绑定一个点击事件，可以这样做： ```html 点我" v-on:click="say();"/> ``` 在这个例子中，`v-on:click` 指令用于监听点击事件，并调用 `say` 函数。要定义这个...
vue绑定事件后获取绑定事件中的this方法
10-18
在Vue中，我们可以使用`v-on`指令或者简写`@`来绑定事件监听器。本文将深入探讨如何在Vue事件绑定中获取`this`，以及如何使用`$event`传递参数。 首先，`this`在JavaScript中是一个非常关键的概念，它指的是当前上...
Python全栈（六）项目前导之8.Vue事件绑定、计算属性、表单输入绑定和自定义组件
01-08
Vue事件绑定、计算属性、表单输入绑定和自定义...事件绑定就是在HTML元素中，通过v-on或者 @ 绑定事件。 事件代码可以直接放到v-on后面，也可以写成一个函数。 测试如下： Vue模板语法 {{count}} 加一 减一 new
vue 实现特定条件下绑定事件
10-16
在Vue.js框架中，有时我们需要根据特定条件来决定是否绑定事件监听器，以实现更灵活的交互逻辑。在给定的例子中，我们将探讨如何在Vue组件中实现这一功能，主要涉及`v-bind`指令、条件渲染以及自定义方法的调用。 ...
实现el-table 两列多选框且不可同时勾选，可单选，可多选
weixin_52740695的博客
08-21 322
审核通过可批量处理，可单选；审核不通过，单选，但两者不可同时勾选☑️。
Ant Design Vue 快速上手指南与常见问题排查
windowshht的博客
08-22 1143
Ant Design Vue 是一款功能强大的 Vue 组件库，能够帮助开发者快速构建高质量的用户界面。通过本文的快速上手指南，您可以轻松地在项目中集成 Ant Design Vue，并解决常见问题。希望这篇文章能为您的开发工作提供帮助，提升您的开发效率。如需深入了解 Ant Design Vue 的更多功能和组件，请参考Ant Design Vue 官方文档。
基于vue3和audio封装的简易音频播放器
weixin_43734732的博客
08-23 277
【代码】基于vue3和audio封装的简易音频播放器。
vue ref和reactive区别
最新发布
灰海
08-25 313
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue export的用法
weixin_41203765的博客
08-23 331
在Vue.js中，export关键字主要用于模块化编程，它允许你将一个文件（模块）中的代码、组件、函数、变量等导出，以便在其他文件中通过import语句来使用。这在Vue项目中非常常见，特别是当你需要重用组件、工具函数或配置时。
vue事件绑定常用事件
07-17
Vue.js 中常用的事件绑定主要有以下几个： 1. **v-on 或 @**: 这是最常见的事件监听器绑定语法，例如 `@click="handleClick"`，表示当元素被点击时，会触发 `handleClick` 函数。 2. **自定义事件**: Vue允许创建和触发自定义事件，比如 `this.$emit('custom-event', data)` 来发送一个事件，并传递数据，`v-on:` 后面可以跟随 `custom-event`。 3. **修饰符**: - `.prevent`: 阻止默认事件行为（如阻止表单提交或链接跳转） - `.stop`: 可取消冒泡（默认事件会在其祖先元素上继续触发，直到到达文档根节点） - `.capture`: 事件处理函数将在捕获阶段被调用，而不是在冒泡阶段 - `.self`: 只作用于当前元素，不包括其子元素 4. **动态绑定**: 使用方括号 `[]` 语法可以在运行时设置事件监听器，如 `v-on:[event] = "handler"`，其中 `event` 是动态字符串变量。 5. **简写语法**: 对于简单的事件处理器，Vue还提供了一种简化的绑定形式，如 `<button v-on:click="doSomething">...</button>` 相当于 `<button @click="doSomething">...</button>`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值