回忆一下我们使用js实现点击事件的方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on</title>
</head>
<div id="app">
<input id="btn" type="button" value="按钮">
</div>
<body>
<script src="lib/vue.js"></script>
<script>
document.getElementById('btn').onclick = function () {
alert('Hello')
}
</script>
</body>
</html>
这种实现方式操作了DOM，前文中提到，Vue不推荐操作DOM，Vue提供了一个不需要操作DOM就可以实现事件的指令——v-on。使用方法如下：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-on</title>
</head>
<div id="app">
<input v-on:click="show" type="button" value="按钮">
</div>
<body>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
methods:{ // 这个methods属性中定义了当前Vue实例所有可用的方法
show:function () {
alert('Hello')
}
}
})
</script>
</body>
</html>
注意：
- Vue实例中的所有方法都放在
methods下 - 使用
v-on:click绑定一个methods下的方法 v-on:click可以更改为任意浏览器中常用的事件，如v-on:mouseoverv-on:可以缩写为@，即v-on:click缩写为@click
