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配置项-事件的基本使用的主要内容,如果未能解决你的问题,请参考以下文章