Vue事件绑定

最新推荐文章于 2023-02-25 23:25:24 发布
最新推荐文章于 2023-02-25 23:25:24 发布
阅读量87 收藏
点赞数
分类专栏： vue.js 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45147894/article/details/115576749
版权 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <button v-on:click='num++'>点击</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        let vm = new Vue({
            el: "#app",
            data: {
                num: 0
            }, //注意点：这里不要忘记加逗号
            //methods里主要是定义一些函数
            methods: {

            }
        })
    </script>
</body>
</html>

点击一下就会加一 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <button v-on:click='num++'>点击</button>
            <button @click='num++'>点击</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        let vm = new Vue({
            el: "#app",
            data: {
                num: 0
            }, //注意点：这里不要忘记加逗号
            //methods里主要是定义一些函数
            methods: {

            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <button v-on:click='num++'>点击</button>
            <button @click='num++'>点击1</button>
            <button v-on:click='add'>点击2</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        let vm = new Vue({
            el: "#app",
            data: {
                num: 0
            }, //注意点：这里不要忘记加逗号
            //methods里主要是定义一些函数
            methods: {
                add:function(){
                    this.num++;//在函数中，要想使用data里面的数据，一定要加this
                    console.log(this===vm);//这里的this是vue的实例对象

                }
            }
        })
    </script>
</body>

</html>

点击按钮任意一个就会加一， 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <button v-on:click='num++'>点击</button>
            <button @click='num++'>点击1</button>
            <button v-on:click='add'>点击2</button>
            <button v-on:click='add()'>点击3</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        let vm = new Vue({
            el: "#app",
            data: {
                num: 0
            }, //注意点：这里不要忘记加逗号
            //methods里主要是定义一些函数
            methods: {
                add:function(){
                    this.num++;//在函数中，要想使用data里面的数据，一定要加this
                    console.log(this===vm);//这里的this是vue的实例对象

                }
            }
        })
    </script>
</body>

</html>

 

㼛思雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的事件绑定与方法详解
08-29
主要为大家详细介绍了vue的事件绑定与方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue事件绑定指令
m0_65063660的博客
08-26 1605
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 3360
总的来讲，v-on比$ref更加简单，但是$ref更加更加灵活。不局限于函数中而是可以分布在各个位置。
vue事件绑定-参数传递
wangshuai13383347132的博客
09-28 1707
vue事件绑定-参数传递 事件绑定-参数传递 1.如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数，参考handle1函数。 2.如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event ，参考handle2函数。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equi
vue 事件绑定函数加括号和不加括号的区别
weixin_56008510的博客
12-15 2975
自定义事件加不加括号的区别 不加括号: <div> <button @click="test">测试</button> </div> test(id){ console.log(id); } 加括号: <div> <button @click="test()">测试</button> </div> test(id){ console.log(id); } 添加括号传值
原理篇---vue事件绑定
weixin_43390711的博客
06-11 2960
一、原生事件和组件事件的绑定 原生事件的绑定是通过addEventLister绑定给真实的元素的；组件事件绑定是通过vue自定义的$on实现的。如果要在组件上使用原生事件，需要加.native修饰符，这样就相当于在父组件中把子组件当做普通html标签，然后加上原生事件。 二、$on和$emit的实现 $on、$emit是基于订阅观察者模式的，维护一个事件中心，on的时候将事件按名称存在事件中心里，称之为订阅者，然后emit将对应的事件进行发布，去执行事件中心里的对应的监听器 1、vue先创建一个构造
vue事件绑定中的事件修饰符
ly_fashion的博客
03-20 1668
vue.js事件修饰符
vue事件绑定中如何调用data中的变量
jbluxun的博客
08-31 1294
vue this 事件绑定
vue事件绑定@click
wangshuai13383347132的博客
09-17 8538
vue事件绑定@click 事件绑定 1.Vue如果处理事件？ v-on指令用法 <input type= 'button' v-on:click = 'num++'/> v-on简写形式 <input type = 'button' @click = 'num++' /> 2.事件调用函数方式 直接绑定函数名称 <button v-on:click='say'>Hello</button> 调用函数 <button v-on:cl
Vue之事件绑定
知识应该共享，创造才应收费
02-25 5382
当我们开发完UI界面后，还需要和用户交互，所谓交互也就是用户可以点击界面上的按钮，文字，链接等以及点击键盘上的按钮，我们开发的程序可以做出对应的反应。做出的反应会通过UI界面再反馈给用户，或是对话框，或是跳转到新页面。总之就是响应用户的某个操作。在VUE3中定义事件绑定可以通过在你想注册点击事件的dom元素中，使用@click = "响应操作的JS函数"的方式来实现，方式不唯一，这种方式是一种简写，感兴趣的可以去官网查看不同的写法，这里主要是为了演示VUE3事件绑定
Python全栈（六）项目前导之8.Vue事件绑定、计算属性、表单输入绑定和自定义组件
01-08
Vue事件绑定、计算属性、表单输入绑定和自定义...事件绑定就是在HTML元素中，通过v-on或者 @ 绑定事件。 事件代码可以直接放到v-on后面，也可以写成一个函数。 测试如下： Vue模板语法 {{count}} 加一 减一 new
vue绑定事件后获取绑定事件中的this方法
10-18
今天小编就为大家分享一篇vue绑定事件后获取绑定事件中的this方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 实现特定条件下绑定事件
10-16
今天小编就为大家分享一篇vue 实现特定条件下绑定事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue事件绑定之事件函数参数传递
weixin_45147894的博客
04-10 2487
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div ...
Vue表单基本操作
weixin_45147894的博客
04-23 318
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> form div { height: 40px; line-height: 40px; } form div:nth-child(4) { hei...
Vue中自定义按键修饰符
weixin_45147894的博客
04-13 299
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-on:keyup='handle' v-model='info'> </div&...
vue数据绑定指令之v-text和v-html和v-pre用法
weixin_45147894的博客
11-08 294
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> [v-clock]{ ...
vue之指令数据响应式解析
weixin_45147894的博客
11-08 263
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> [v-clock]{ ...
vue事件绑定在输入事件
最新发布
06-12
在Vue中，可以通过v-on指令将事件绑定到元素上，其中输入事件可以通过v-on指令的缩写@来绑定。例如，可以使用以下代码将一个方法绑定到输入事件上： ``` ``` 或者使用缩写： ``` ``` 这样，当用户在输入框中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值