Vue的事件类型&组件中数据和事件的传递

最新推荐文章于 2024-04-03 08:36:50 发布

THER1881

最新推荐文章于 2024-04-03 08:36:50 发布

阅读量1.3k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/thwr1881/article/details/126251057

版权

一、Vue的事件类型

1、常用事件

事件	说明
click	单击
dblclick	双击
click	单击
click	单击
click	单击
focus	获取焦点
blur	失去焦点
change	元素内容改变
select	元素内容被选中
mousedown	鼠标按键被按下
mouseup	鼠标按键抬起
mousemove	鼠标在组件内移动
mouseout	鼠标移出组件
mouseover	鼠标移入组件
Keydown	键盘按键被按下
Keyup	键盘按键抬起

2、Vue中的按键修饰符：对特殊键识别时需要使用按键修饰符

2.1、检测用户是否按回车键(Enter)

 keyup(event){
   
		     if(event.key == 'Enter')
			 {
   
			    
			 }
		  }

在Vue中的写法：


  	    <input @keyup.enter="keyup"/>

enter、ctrl、alt、shift、left(鼠标左键)、right(鼠标右键)、middle(中间键)

二、Vue的组件

1、组件的创建：

1.1、创建组件的模板

  const obj = {
       
			  data(){
   
			     return {
   
				 
				 }
			  },
			  methods: {
   
			  }
		      template: `模板字符串`  //组件的视图
		  }

1.2、注册组件

  App.component("标识名",组件对象)

演示：

<!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>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
     <my-alert></my-alert