小案例-计数器
现在,我们实现一个小的计数器
点击+计数器+1
点击-计数器-1
这里我们又要使用新的指令和属性
新的属性:methods,该属性用于在Vue对象中定义方法。
新的指令:@click,该指令用于监听某个元素的点击事件,并且需要制定当发生点击时,执行的方法(方法通常是methods中定义的方法)
栗子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>当前计数器:{{counter}}</h2>
<!-- <button v-on:click='counter++'>+</button>
<button v-on:click='counter--'>-</button> -->
<button v-on:click='add'>+</button>
<button v-on:click='subtraction'>-</button>
</div>
<script src="../2020-6-Vuejs/vue.js"></script>
<script>
//语法糖:简写
//proxy
const app = new Vue({
el: '#app',
data: {
counter: 0,
},
methods: {
add: function() {
console.log('add被执行');
this.counter++;
},
subtraction: function() {
console.log('subtraction被执行');
this.counter--;
}
}
})
</script>
</body>
</html>