1、首先创建一个名称为onload的html文件，如下图所示。
2、设置标题为 javascript onload，如下图所示。
3、在body标签 中加入onload事件，并在事件中加入自定义函数 myonload。
4、在文档区域加入一个h 元素，加入文本内容“页面加载完成显示页面内容”，当页面加载完成 后 显示该内容。
5、创建一个自定义函数myload，当页面完成后，调用该自定义函数，并加入alert提示语。
6、在浏览器中打开该文件，首先会弹出页面加载完成后调用的myonload函数，在现实页面内容。
修饰符
vue.js为v-on提供了多个修饰符，方便我们处理一些DOM事件的细节，并且修饰符可以串联使用。主要的修饰符如下：
. stop 相当于js中的event.stopPropagation(),它是用来阻止冒泡的；
.prevent 相当于js中event.preventDefault(),它是用来阻止默认行为的；
.capture 捕获事件和冒泡事件(默认)是两种事件流,事件捕获是从document到触发事件的那个元素冒泡事件是从下向上的触发事件；
.self 只有点击当前元素时候，才会触发事件处理函数
.once 只会触发一次
<a v-on:click.stop="doThis"></a>
<form v-on:submit.prevent="onSubmit"></form>
<a v-on:click.stop.prevent="doThat"></a>
<form v-on:submit.prevent></form>
<div v-on:click.capture="doThis">...</div>
<div v-on:click.self="doThat">...</div>
<a v-on:click.once="doThis"></a>
https://blog.csdn.net/qq_39105508/article/details/83008604
除了事件修饰符之外，v-on还提供了按键修饰符，方便我们监听键盘事件中的按键。例如：
<input v-on:keyup.13="submitFn" /> 监听input的输入，当输入回车时触发submitFn函数（回车的keycode值为13），用于处理常见的用户输入完直接按回车提交。
vue.js给一些常用的按键名提供了别称，这样就省去了一些记keyCode的事件。常用按键码别名为：
need-to-insert-img
刚才的<input v-on:keyup.13="submitFn" />可以改为
<input v-on:keyup.enter="submitFn" />
本小节我们介绍 Vue 中如何进行事件处理。在章节 2.2 中我们已经介绍了指令v-on ，本章节我们将详细介绍在v-on的一些用法。包括如何传递参数、如何使用事件修饰符等。其中，事件修饰符是本章节的难点。事件修饰符很多，同学们不需要一下子都记住，只要学会如何使用它，在开发过程中如果有所遗忘，可以通过翻看文档来使用。
使用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
实例演示
"运行案例" 可查看在线运行效果
代码解释： 在 html 第 3 行，我们使用 v-on 指令给 button 元素绑定来一个 click 事件，并在点击的时候执行 count + 1 的操作。
在上面的例子中，我们把事件处理函数直接写在模板中，然而许多事件处理的逻辑都很复杂，所以直接把JS代码写在 v-on 指令中有时并不可行，v-on 指令可以接收一个定义的方法来调用。示例如下：
实例演示
"运行案例" 可查看在线运行效果
代码解释： 在 html 第 3 行，我们使用 v-on 指令给 button 元素绑定来一个 click 事件，并在点击的时候执行 add 方法。 在 JS 代码第 9-11 行，我们定义了方法 add；触发该方法时给 count + 1。
有时候我们需要在事件触发的时候传递一些参数，
实例演示
"运行案例" 可查看在线运行效果
代码解释： 在 html 第 3 行，我们使用 v-on 指令给 button 元素绑定了一个 click 事件，并在点击的时候执行 add 方法。 在 JS 代码第 9-11 行，我们定义了方法 add；触发该方法时给 count + 1。
有时我们需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
实例演示
"运行案例" 可查看在线运行效果
代码解释： 在上述 JS 代码第 9-12 行，我们定义了事件函数 setCount。 在按钮点击事件中，我们将 $event 对象传递给函数，因此，在函数 setCount 中可以访问到原生事件对象。
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。实现方法就是在事件名称后面以后缀的形式添加指定的修饰符。
Vue 提供了以下事件修饰符：
接下来，我们用一个完整的示例来看下这些修饰符的使用方法。
实例演示
"运行案例" 可查看在线运行效果
代码解释： 代码第 4-7 行，stop 案例中，当我们给按钮click事件添加.stop修饰符之后，点击按钮，事件不会向上传递。 代码第 10-16 行，submit.prevent 案例中，当给submit事件添加.prevent修饰符之后，提交事件不再重载页面。 代码第 19-21 行，capture 案例中，我们给父容器添加了capture事件，当点击按钮的时候，会先触发capture中的事件函数，然后再触发按钮绑定的点击事件。 代码第 24-26 行，self 案例中，我们给父容器的点击事件添加了.self的修饰符，所以只有点击父容器的时候才会触发该方法，当点击按钮的时候并不会触发父容器绑定的事件。 代码第 29-31 行，once 案例中，我们给按钮的点击事件添加了.once的修饰符，所以只有首次点击按钮的时候会触发事件函数，再次点击之后将不会触发事件函数。
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
注意：在 Mac 系统键盘上，meta 对应 command 键 ( )。在 Windows 系统键盘 meta 对应 Windows 徽标键 ( )。在 Sun 操作系统键盘上，meta 对应实心宝石键 ( )。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
例如：
Vue提供了.exact修饰符，实现单独的系统按键的事件。
例如：
本节，我们带大家学习了事件处理。主要知识点有以下几点：
