Vue09-事件处理

作者 : admin 本文共370个字,预计阅读时间需要1分钟 发布时间: 2024-06-10 共3人阅读

一、一个简单的示例

Vue09-事件处理插图

v-on:当xxx的时候。

二、事件处理

2-1、参数说明

    
        

你好呀,{{name}}

Vue09-事件处理插图(1)

a拿到的是:事件对象。是默认拿到的!

Vue09-事件处理插图(2)

Vue09-事件处理插图(3)

Vue09-事件处理插图(4)

Vue09-事件处理插图(5)

2-2、this 

事件中的this就是vue的实例对象。

Vue09-事件处理插图(6)

当showInfo是箭头函数的时候,this是window

Vue09-事件处理插图(7)

Vue09-事件处理插图(8)

所以,所有被vue管理的函数,都写成普通函数!!!

2-3、v-on:click的简写=》@

Vue09-事件处理插图(9)

2-4、传参

Vue09-事件处理插图(10)

不传参:showInfo、传参:showInfo(参数)。

此时,event没有了!解决方式:使用$占位。

Vue09-事件处理插图(11)

2-5、methods对比data

Vue09-事件处理插图(12) 

methods中的函数也在vm实例中,但是没有做数据代理,即没有getter和setter方法。

也可以把 methods中的函数放入到data中,但是此时,函数也做了数据代理,没有必要!

所以,只有data中的数据才做数据代理和数据劫持!

三、小结

Vue09-事件处理插图(13)

本站无任何商业行为
个人在线分享 » Vue09-事件处理
E-->