前言
为了让用户和你的应用进行交互,我们可以用 v-on
指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法。
v-on指令的基本用法
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="showmessage">click</button>
</div>
v-on指令的缩写语法
注: v-on:click 的用法与@click的用法是一致的,后者是省略的用法。
<button @click="doSomething">Click me</button>
v-on监听事件并传递参数
如果只传参,不穿event,会丢失event时间,此时我们可以通过$event将event参数一起传递。
<button v-on:click="doSomething('hello', $event)">Click me</button>
methods介绍
当你创建一个 Vue 实例时,你可以在其选项对象中定义一个 methods 对象。该对象可以包含一组方法,这些方法可以在 Vue 实例中使用。如在这段html中,你需要在vue实力里的methods方法中定义一个incrementCounter的方法去处理事件。
<div id="app">
<button v-on:click="incrementCounter">Click me</button>
<p>Counter: {{ counter }}</p>
</div>
var vm = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
incrementCounter: function() {
this.counter++;
}
}
});
需求描述
1. 当点击按钮1时候,出现一个弹框,如你好。
2. 当点击按钮2时候,出现一个弹框告诉学生学号,如你好,你的学号是66.
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>欢迎来{{name}}一起学习</h2>
<button v-on:click="showInfo1">click hello</button>
<button v-on:click="showInfo2($event,66)">click student id</button>
</div>
</body>
<script>
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
name:'西湖区'
},
//方法里不需要数据代理,单独存放。
methods:{
showInfo1(event){
alert(`你好啊`)
},
showInfo2(event, number){
alert(`你好, 你的学号是${number}!`)
},
}
})
</script>
</html>
浏览器功能运行