vue指令 v-on事件指令、methods

vue中绑定事件的方式
v-on:原生事件名 的方式绑定事件

image.png
image.png

运行结果
点击按钮后出现如下

image.png
下面@click的方式是v-on:事件名的简写方式
v-on:click=""
双引号里面是一个函数写法
image.png
image.png

调用时候可以直接写上test vue会自动判断test为一个函数然后执行这个函数
也可以写上test()
如下

image.png
运行结果
image.png
还可以箭头函数传参数
image.png
image.png
运行结果
image.png
不通过传参数的方式 箭头函数内部无法获取到vue实例里面的变量
如下
image.png
image.png
运行结果
image.png

报错了 引用不到myname变量
解决方法
1.将箭头函数改成普通function 加入this.变量值
如下

image.png
image.png
这时必须执行test2()小括号必须有
运行结果
image.png
如果去掉小括号 如下调用写法
image.png
运行结果
image.png
找不到myname变量
这时需要使用到methods方法
官方推荐做法 将函数统一放到methods下面
methods方法不能使用箭头函数 因为里面this不会指向vue实例 而是undefined
在methods里面定义方法 是官方推荐的 不在data里面定义 会出一定的问题
在methods里面定义的方法 调用时候 加上小括号 或者不加都可以正常运行
如下
image.png
image.png
运行结果
image.png
改成加上小括号
image.png
运行结果
image.png
总结
vue中要把方法定义在methods里面 是一个对象属性 里面放一堆函数
必须要写成普通function不能是箭头函数 否则会出现this指向undefined
然后函数调用时候 表达式加小括号 不加都可以 不加vue会自动判断表达式是一个function进而执行函数