开发者学堂课程【Vue.js 入门与实战：使用 v-on 指令定义 Vue 中的事件】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8131
使用 v-on 指令定义 Vue 中的事件
一、v-on 指令的使用
Vue 中提供了 v-on: 事件绑定机制
实例：
设置一个按钮，当点击按钮后，要输出一句话：Hello。
继续上一章节在 HTML 文件：02.v-cloak 的学习.html中编辑:
1.不用 Vue 的情况
不用 Vue 的话，要先指定一个 ID，id="btn"
继续打开 02.v doak 的学习.html 编辑程序，
程序段为：
……
<input type= "button" value="按钮" : title="mytitle +‘123’" id="btn">
</div>
……
}）
document.getElementById( 'btn').onclick = function() {
alert( 'Hello' )
}
……
刷新 Deocument 浏览器页面，结果显示：点击按钮，弹出一个有 Hello 内容的弹窗。
2.用 Vue 的情况
Vue 中提供了 v-on:事件绑定机制
这里的 v-on 提供绑定点击按钮的事件。
直接表达为：……
<input type= "button" value= "按钮“title="mytitle + '1230m V- on: click="alert('hello') ">
……
这时候，保存，刷新 Deocument 浏览器页面，发现点击按钮无弹窗，这里出现错误。报错：[Vue warn]: Property or method "alert" is not defined on the instance……
学习 v-bind 的时候，会把 title 里的 mytitle 认为是一个变量。同理，v-on 里面的alert 也会认为是一个变量，这个 alert 的变量还未定义，所以找不到 alert 这个变量值。所以不能这样表达。
正确表达，需要执行一个 show 方法。定义 show 方法，和 data：{}平级，
……<input type- "button" value= "按钮" v-on : click=" show"></div>…… data：{……}，methods: { // 这个methods属性中定义了当前Vue实例所有可用的方法show: function () {alert(‘Hello’)}}……
刷新 Deocument 浏 览器页面，点击按钮，出现一个 Hello 内容的弹窗。
Vue 中提供了 v-on: 事件绑定机制也有一个缩写,是“ @ ”。
上程序段也可以写成：
……
<input type- "button" value= "按钮" @click=" show">
……
这里使用 click 事件，那么用鼠标覆盖事件呢？mouseover 事件也是可行的。
<input type= "button" value="按钮"V-on:mouseover=”shown>
可以看出，
Vue 中 v-on: 事件绑定机制在一些浏览器端常用的事件都是适用的。
