1. 引言
通过前面的章节，我们已经学会了vue的基本语法，有兴趣的同学可以参阅下：
- 《Vue系列教程（01）- 前端发展史》
- 《Vue系列教程（02）- Vue环境搭建、项目创建及运行》
- 《Vue系列教程（03）- Vue开发利器VsCode》
- 《Vue系列教程（04）- VsCode断点调试》
- 《Vue系列教程（05）- 基础知识快速补充（html、css、js）》
- 《Vue系列教程（06）- Vue调试神器（vue-devtools）》
- 《Vue系列教程（07）- Vue第一个程序（MVVM模式的引入）》
- 《Vue系列教程（08）- 基本语法》
本文主要讲解Vue的事件绑定。
2. 事件绑定
直接上代码：
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <!--1.导入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <div id="app"> <button v-on:click="sayHi()">点我</button> </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { message: 'Hello World' }, methods: { sayHi: function () { //'this'在方法里面指向当前Vue实例 alert(this.message); } } }); </script> </body> </html>
运行效果：
更多的事件可以参考JQuery的事件：https://www.w3school.com.cn/jquery/jquery_events.asp
本文完！
