案例：计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>当前计数是：{{counter}}</h2>
<!--使用v-on的方式进行操作-->
<button v-on:click="add">+</button>
<!--使用@语法糖的方式进行操作-->
<button @click="sub">-</button>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
counter:0
},
methods:{
add(){
this.counter++
},
sub(){
this.counter--
}
}
})
</script>
</body>
</html>
- 案例效果如下：
- 现在，我们来实现一个小的计数器
- 点击 + 计数器+1
- 点击 - 计数器 -1
- 这里，我们又要使用新的指令和属性了
- 新的属性：methods，该属性用于在Vue对象中定义方法。
- 新的指令：@click, 该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法(方法通常是methods中定义的方法)
更加完整的一种写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>当前计数：{{counter}}</h2>
<button v-on:click="add">+</button>
<button @click="sub">-</button>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
counter:0
},
methods:{
add:function (){
this.counter++;
console.log("add方法被执行")
},sub:function (){
this.counter--;
console.log("sub方法被执行")
}
}
})
</script>
</body>
</html>
