使用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: 事件绑定机制在一些浏览器端常用的事件都是适用的。
