我是怎么学vue的02：v-on事件监听（附反例）

时间：2023-03-31 14:23:52 vue.js

给元素添加事件给元素添加事件的方法：使用v-on命令。例如给按钮元素添加点击事件：我是一个按钮简写：我是一个按钮@是v-on的语法糖：（语法糖是缩写的意思）。点击后做什么可以写在click=""的引号里（如果只有一行代码），也可以定义一个函数，把函数名写在引号里click="add"。定义函数应该定义在vue实例的methods属性中。constapp=newVue({el:'#app',data:obj,methods:{//这里定义事件对应的函数add:function(){console.log('addisexecuted');}}})案例：计数器如下图所示，初始值为0，点击加号，值为+1，否则为-1。第一步：页面布局，并添加点击事件

当前计数：{{counter}}

第二步：创建vue实例第三步：有两种方式来定义点击事件要执行的动作。这里的例子比较简单。可以直接把代码写到标签里，如下

当前计数：{{counter}}

当然，大多数情况下，actionto执行起来不是那么简单，所以经常使用下面的写法：

当前计数：{{counter}}

add和sub，它们是函数还是方法？是一个方法，因为add中的this绑定了实例app，所以add是一个方法。子是一样的。解析：js中v-on传参的方法和函数的区别1.监听事件时，监听的事件不需要传参，()button可以省略1Button1这种情况下js不需要传入参数，可以save()constapp=newVue({el:'#app',data:{},methods:{btn1Click(){console.log("btn1Click");}}})2.定义事件时，函数需要参数但没有传入，则函数参数的值未定义Button2constapp=newVue({el:'#app',data:{},methods:{btn2Click(event){console.log('--------',event);//--------undefined}}})这种情况下，函数需要传入event参数，但是如果未传递，则函数参数的值未定义。3.定义事件时，如果写方法时省略了括号，但是方法本身需要参数，那么Vue会默认将浏览器产生的事件对象作为参数传递给方法省略括号constapp=newVue({el:'#app',data:{},methods:{btn2Click(event){console.log('--------',event);//--------MouseEvent{isTrusted:true,screenX:133,screenY:86,clientX:133,clientY:15,…}}}})4.定义方法时，无论是事件object是必需的，需要其他参数省略括号constapp=newVue({el:'#app',data:{},methods:{btn4Click(abc,event){//console.log中需要传入多个参数('++++++++',abc,event);//++++++++MouseEvent{isTrusted:true,screenX:201,screenY:92,clientX:201,clientY:21,…}undefined}}})第一种情况，如果我还是不写括号，我会默认传递事件，但是只能传给第一个形参，所以这里形参abc的值为event对象，形参event的值是undefined。在第二种情况下，当我写括号并将值传递给方法时省略括号constapp=newVue({el:'#app',data:{abc:123},methods:{btn4Click(abc,event){//需要传入多个参数console.log('++++++++',abc,event);//++++++++123undefined}}})此时的事件还是undefined。因为如果传值的时候直接写event，vue会认为event是一个变量名，从data中找（就像找abc一样），找不到就报undefined。如果要获取浏览器产生的事件对象，需要使用$event，不能直接写event。btn4Click(abc,$event)v-on的修饰符Modifier函数演示。stop防止事件冒泡。prevent防止默认事件。{keyCode或keyAlias}监听键盘按键。native监听组件根元素的native事件（只在Component中使用）.once只能触发一次Button2