1.v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button v-on:click="counter+=1">{{counter}}</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
counter: 0,
},
});
</script>
<style type="text/css">
</style>
</body>
</html>
2.事件处理方法
许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在v-on指令中是不可行的。因此v-on还可以接收一个需要调用的方法名称。
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button v-on:click="greet">greet</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
name: "vue",
},
methods: {
greet: function (even) {
//`this` 在方法里指向当前 Vue 实例
alert("hi " + this.name);
if (even) {
alert(even.target.tagName);
}
}
}
});
</script>
<style type="text/css">
</style>
</body>
</html>
3.内联处理器中的方法
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button v-on:click="say('hi')">say hi</button>
<button v-on:click="say('what')">say what</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
methods: {
say: function (str) {
alert(str);
}
}
});
</script>
<style type="text/css">
</style>
</body>
</html>
4.在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法。
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>学习example</title>
<script src="../static/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button v-on:click="say('hello',$event)">say hello</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
methods: {
say: function (str, e) {
alert(str);
alert(e);
console.log(e);
}
}
});
</script>
<style type="text/css">
</style>
</body>
</html>