Vue基础系列事件处理-methods配置项-事件的基本使用

Posted 勇敢*牛牛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue基础系列事件处理-methods配置项-事件的基本使用相关的知识,希望对你有一定的参考价值。

和阿牛一起冲Vue


🌕写在前面
🍊博客主页勇敢link牛牛
🎉欢迎关注:🔎点赞👍收藏⭐️留言📝
🌟本文由 勇敢link牛牛 原创,CSDN首发!
📆首发时间:🌹2022年2月27日🌹
🆕最新更新时间:🎄2022年2月27日🎄
✉️愿你熬过万丈孤独,藏下星辰大海!
📠参考书籍:📚《Vue2》
🙏作者水平很有限,如果发现错误,请留言轰炸哦!万分感谢感谢感谢!

文章目录



前言

青春,因为奋斗与奉献更美丽。


一、什么是事件

通俗点讲就是一个行为的交互(一个动作),当点击某个按钮或者触发一个div之类的,产生等等如如何的一个效果……

1、点击事件

当点击某个按钮,触发事件 v-on:click="showInfo"(触发一个回调函数)。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间处理</title>
</head>

<body>
    <div id="root">
        <h1>欢迎来到message.name的世界</h1>
        <button v-on:click="showInfo">点我提示信息</button>
    </div>

</body>
<script src='vue.js'></script>
<script>
    Vue.config.productionTip = false;
    new Vue(
        el: '#root',
        data: 
            name: 'jack',
            message: 
                url: 'https://blog.csdn.net/m0_46672781?spm=1000.2115.3001.5343',
                name: '勇敢牛牛'
            
        ,
        methods: 
            showInfo() 
                alert('勇敢牛牛,不怕困难')
            
        
    );

</script>

</html>

2、v-on:click=“showInfo”

(通过点击触发一个回调函数)


因为Vue是在vue实例中读取内容,我需要在后面配置回调函数对象,因为是在对象当中,不用写funtion关键字,直接函数名即可,可以接受参数,但是第一个参数就是event事件对象。

methods: 
            showInfo(event) 
                // alert('勇敢牛牛,不怕困难')
                console.log(event.target);
            
        


要是想拿到事件(按钮对象)的内容:

methods: 
            showInfo(event) 
                // alert('勇敢牛牛,不怕困难')
                console.log(event.target.innerText);
            
        

3、参数传入

简写方式

<button @click="showInfo">点我提示信息</button>

参数原理

可以增加元素,但是为了保证event的存在。需要加一个$event占个位

<button @click="showInfo(666,$event)">点我提示信息</button>
^^^^^^^^^
methods: 
            showInfo(number) 
                // alert('勇敢牛牛,不怕困难')
                // console.log(event.target.innerText);
                console.log(number);
            
        

注意:函数是不需要数据代理的(这不需改动的)

二、事件的基本使用

1.使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;
2.事件的回调需要配置在methods对象中,最终会在vm上;
3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象;
5.@click=“demo” 和 @click=“demo($event)” 效果一致,但后者可以传参;

三、代码总结

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时间处理</title>
</head>

<body>
    <div id="root">
        <h1>欢迎来到message.name的世界</h1>
        <!-- <button v-on:click="showInfo">点我提示信息</button> -->
        <button @click="showInfo(666,$event)">点我提示信息</button>

    </div>

</body>
<script src='vue.js'></script>
<script>
    Vue.config.productionTip = false;
    new Vue(
        el: '#root',
        data: 
            name: 'jack',
            message: 
                url: 'https://blog.csdn.net/m0_46672781?spm=1000.2115.3001.5343',
                name: '勇敢牛牛'
            
        ,
        methods: 
            showInfo(number) 
                // alert('勇敢牛牛,不怕困难')
                // console.log(event.target.innerText);
                console.log(number);
            
        
    );

</script>

</html>

以上是关于Vue基础系列事件处理-methods配置项-事件的基本使用的主要内容,如果未能解决你的问题,请参考以下文章

Vue2.0学习—事件处理和事件修饰符(三十二)

5.事件处理

5.事件处理

vue.js基础知识篇:过渡Method和Vue实例方法

vue 基础重要组件 模板指令 事件绑定

Vue.js Method