![Vue.js从入门到项目实践(超值版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/987/44509987/b_44509987.jpg)
上QQ阅读APP看书,第一时间看更新
5.2.1 方法及内联处理器
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P90_12305.jpg?sign=1739271624-m1VeGhfQIwM83atVyFtyL1W4j8LEVxuc-0-f114c19f9e3bf3c2c6fca4633c3d01c9)
通过v-on绑定实例选项属性methods中的方法作为事件的处理器,v-on:后的参数接收所有的原生事件名称。
提示:判断是否为内联处理器,其实很好区分,一个有括号,一个没括号。没括号的就是函数名;有括号的实际是一条JS语句,称为内联处理器。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P90_53225.jpg?sign=1739271624-SNMCo5Z2XsnmrzfoZDviWGyaj92n8UQ2-0-39f97304e7e04a9e3869870c0ea0f24a)
运行效果如图5-9所示。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P91_12309.jpg?sign=1739271624-NGUzztsgD2Ke0JFHoxF0c7TYOf9gLcxz-0-6f45a692777cceb4ae5f887c8c9959e2)
图5-9 内联语句运行效果图(一)
提示:v-on的缩写形式为@,例如,@click="sayHello"。v-on支持内联JavaScript语句,但仅限是一条语句的情况。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P91_53227.jpg?sign=1739271624-Kf5WtWjcMBfkodw4g2OVrrUfvJP6p2X1-0-41de9246ef559d940f7d8752c5d32074)
运行效果如图5-10所示。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P91_53228.jpg?sign=1739271624-TvlAeZb0ep6RCe6AVA7FSDPvpHRtqUnq-0-1a1ad13beb6e4932abe2ec8ffb3400b3)
图5-10 内联语句运行效果图(二)
提示:直接绑定methods函数和内联JavaScript,都有可能需要获取原生DOM事件对象。单击图5-10中的SayHello按钮将弹出一个对话框,这就是绑定了一个单击事件监听,但调用的是另一个内置处理器方法sayFrom。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P92_53229.jpg?sign=1739271624-hA7ZVogB8MBqFx5iT6zZ3qgNRg9wwH2A-0-86b61fcfc15d055becb819aa472268a1)
运行效果如图5-11所示。
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P92_12654.jpg?sign=1739271624-KBcgbhyzxo5xsb9rhdwEoaxnDUsB78uQ-0-5cb00f73671809112719fd77e88b8c89)
图5-11 内联语句多事件运行效果图
提示:同一个元素上可以通过v-on绑定多个相同事件函数,执行顺序为顺序执行。