目录
一、事件处理方法
二、内联处理器的方法
一、事件处理方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的学习</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button @click='greet'>Greet</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
name: "Vue"
},
methods: {
// event是原生DOM事件
greet: function(event) {
alert('Hello '+ this.name + '!')
if(event){
alert(event.target.tagName)
}
},
}
})
// 这里的event原生的DOM事件，当按钮没有被点击的时候，
// 就不会出发if语句中的内容
vm.greet()
</script>
</body>
</html>二、内联处理器的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的学习</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button @click='greet("greet")'>sayGreet</button>
<button @click='bye("bye")'>sayBye</button>
<button @click="warn('Form cannot be submitted yet.',$event)">Submit</button>
</div>
<!-- 内联 JavaScript 语句中调用方法 -->
<script type="text/javascript">
var vm = new Vue({
el: "#app",
methods: {
greet: function(msg) {
alert(msg)
},
bye: function(msg) {
alert(msg)
},
warn: function(msg, event) {
if (event) {
event.preventDefault()
}
alert(msg)
}
}
})
</script>
</body>
</html>
![[附源码]基于Flask的演唱会购票系统](https://img-blog.csdnimg.cn/img_convert/6f0be98c141f22c51acf5ce394ed0a2c.png)