为了让用户和你的应用进行交互,我们可以用 v-on 指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法
案例:计数器
1、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<button v-on:click="message++">+</button>
<button v-on:click="message--">-</button>
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 0,
},
})
</script>
</body>
</html>
2、实现
3、标签后写方法,遇到复杂的,会显得冗余,改进:将方法放在Vue对象中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<!-- <button v-on:click="message++">+</button>
<button v-on:click="message--">-</button> -->
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 0,
},
methods: {
add: function () {
console.log('调用add方法执行')
this.message++
},
sub: function () {
console.log('调用sub方法执行')
this.message--
},
},
})
</script>
</body>
</html>
4、实现
5、新指令@click,该指令用于监听某个元素的点击事件,并且需要指定发生点击时,执行的方法,是个语法糖,相当于v-on:click的简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<!-- <button v-on:click="message++">+</button>
<button v-on:click="message--">-</button> -->
<!-- <button v-on:click="add">+</button>
<button v-on:click="sub">-</button> -->
<button @click="add">+</button>
<button @click="sub">-</button>
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 0,
},
methods: {
add: function () {
console.log('调用add方法执行')
this.message++
},
sub: function () {
console.log('调用sub方法执行')
this.message--
},
},
})
</script>
</body>
</html>
6、实现