vue中$event的两种用法

最新推荐文章于 2024-06-21 08:59:15 发布
最新推荐文章于 2024-06-21 08:59:15 发布
阅读量2.4k 收藏 3
点赞数 1
分类专栏： javascript Vue 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48079602/article/details/115597366
版权 
<body>
    <div id="app">
        <div>{{msg}}</div>
        <input type="text" v-bind:value="msg" v-on:input='handle'>
        <!-- 在html部分，$event可以将当前对象传递到数据部分当中(其实不写这个$event也可
        以获取到当前对象，已在浏览器中证实，应该是通过window.event这个全局变量传递到过去
        的，可以见事件函数传参.html)；
          还可以在HTML部分内联得到写法获取当前元素,这里用到的是这个时 -->
        <input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
        <input type="text" v-model='msg'>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        // v-model指令的本质
        // ①v-bind 是数据向HTML方向传递
        // ②v-on:input 是HTML向数据方向传递

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            },
            methods: {
                handle: function(event) {
                    // 使用输入域中的最新的数据覆盖原来的数据
                    this.msg = event.target.value;
                }
            }
        });
    </script>
</body>

<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
            <button v-on:click='handle1'>点击1</button>
            <!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，
                 并且事件对象的名称必须是$event (其实不写这个$event也可以获取到当前对象，
                 已在浏览器中证实，应该是通过window.event这个全局变量传递到过去的)
                 传递具体的参数的时候，只能用函数调用的方式
            -->
            <button v-on:click='handle2(1,2)'>点击2</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle1: function(event) {
                    console.log(event.target.innerHTML)
                },
                handle2: function(p, p1) {
                    console.log(p, p1)
                    console.log(event.target.innerHTML)
                    this.num++;
                }
            }
        });
    </script>
</body>
令狐风云
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈vue中$event理解和框架中在包含默认值外传参
11-19
在vue中普通方法中默认带有event DOM事件如greet方法，如果是内联函数的话如warn方法，只需要在定义方法的地方同时传入$event即可，这里需要强调的是在iview中，这里用的是select组件，在其on-change事件中如果想要传入自定义的参数，使用直接传参的方式，获取的是传入的参数， 那么如何获取到该方法默认的返回值（即不传参数时返回的默认选中值），这里使用 $event传入代表选中的值，如test方法，这里似乎也只要$event可以传入代表选中的值，其他的可能就是普通的参数， 至于这个时候想要获取dom事件似乎已经没有了意义，因为这里的select是iview封装的组件。
实例详解vue中的$root和$parent
11-27
在Vue.js框架中，$root和$parent是两个非常重要的属性，它们允许我们在组件之间进行数据和方法的通信。本文将深入探讨这两个属性的工作原理及其在实际开发中的应用。 首先，我们来了解一下$root。$root是Vue实例的...
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
10-15
主要介绍了vue 组件之间事件触发($emit)与event Bus($on)的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3学习日记（day5）
最新发布
BrianGriffin的博客
06-21 468
接下来我们继续探讨文档。
vue中$event的使用
看表该写博客了
05-23 1万+
$event分两种：第一种: 自定义组件（不如自定义父子组件或者elementui/iview组件）的$event 第二种： html原生的$event 先来看第一种吧--自定义组件的$event $event代表的就是 济南 青岛 这个选中的值，此时$event就代表传参 第二种 html原生的$event $event此时是获取的dom元素即 MouseEvent鼠标点击的这个按钮元素，(可理解为当前标签的属性) console....
vue之$event的使用
牛先森家的博客
03-28 1335
最近学习Vue的过程中，接触到了事件对象$event，记录一下。 场景1：获取原生DOM事件的事件对象 在DOM事件的回调函数中传入参数$event，可以获取到该事件的事件对象 <template> <button @click="getData($event)">按钮</button> </template> <script> export default { setup() { const getData = (e)
Vue 方法中 $event 的用法
猎人在吃肉
09-16 5800
Vue 方法中 $event 的用法
vue中$refs, $emit, $on, $once, $off的使用详解
10-16
父组件通过在模板中使用 `@my-event="getMyEvent"` 监听这个事件，并调用 `getMyEvent` 方法来处理传递的数据。 3. **$on** `$on` 是 Vue 实例的方法，用于监听自定义事件。它允许我们在组件内或全局范围内注册一...
Vue $emit $refs子父组件间方法的调用实例
11-30
例如，父组件使用`@my-event="handler"`语法，其中`handler`是父组件中对应的方法，会在子组件触发`my-event`事件时被执行。在例子中，父组件的`getMyEvent`方法接收到子组件传递的数据，并将其打印出来。 2. **$...
Vue中$event的用法
wangatong的博客
12-17 134
<input type=“text” @click=“abc($event,1)” value=“123” /> <input type=“text” @click=“abc” value=“123” /> methods: { abc(event,n) { console.log(event.target.value,n); },abc(e) { console.log(e.target.value,n); } }
Vue中的$event用法
2301_77456141的博客
09-21 1027
此时点击子组件内按钮，就实现了向父组件传值，并且在父组件内应用的效果。通过该对象自带的一些属性，我们可以避免过多的冗余代码，细化代码。注册事件，将数据作为参数传入，在父组件中通过。在DOM事件的回调函数中传入参数。，可以获取到该事件的事件对象。
Vue中的$event详解
热门推荐
violateer的博客
10-02 8万+
最近学习Vue的过程中，接触到了事件对象$event，记录一下我的理解。 场景1：获取原生DOM事件的事件对象 在DOM事件的回调函数中传入参数$event，可以获取到该事件的事件对象 <template> <button @click="getData($event)">按钮</button> </template> <script> export default { setup() { const getData =
vue中的$event
我的博客
06-04 109
普通元素中的$event 绑定函数无参数 - event对象作为默认作为参数传递 <template> <div class="hello" @click="e_Click"> </div> </template> <script> export default { methods: { e_Click(evt) { console.log(evt); } } </scr.
vue 中$event 的见解
阿洒洒洒洒洒
08-04 634
在vue的使用中，有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量$event把它传入方法： <button v-on:click="say('hello!', $event)">Submit</button> // ... methods: { say: function (msg, event) { // 现在我们可以访问原生事件对象 event.preventDefault() //进行其他操作 ... } ..
vue @click传递$event
06-03
当你在Vue中使用@click指令时，如果需要在触发事件时传递$event对象，可以通过以下两种方式实现： 方式一：使用内联JavaScript语句 ```html ($event)">Click me export default { methods: { handleClick...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值