03-计数器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<h2>方法一：使用监听器来调用表达式完成计算</h2>
<h2>当前计算:{{counter}}：绑定数据</h2>
<button @click="counter++">+</button>
<button @click="counter--">-</button>
<hr color="red" size="2">
<h2>方法二：使用监听器调用函数完成计算</h2>
<h2>当前计算:{{counter}}</h2>
<button @click="add()">+</button>
<button @click="sub()">-</button>
<!--
2 监听器： 就是一种编程机制，用户事件处理操作
使用监听器的步骤：
第一步：编写事件处理函数
add(){
this.counter++; //这个对象app的counter++
}
第二步：在发生事件元素上的属性上注册监听器，监听这个对象
发生的事件，如果是相对应的事件就是调用函数完成操作
<button @click="sub()">-</button> 发生事件的源
格式：@click 点击事件监听器
-->
</div>
<script type="text/javascript">
const app=new Vue({
el:'#app',
data:{
counter:0
},methods:{ // 1 app对象管理函数，使用者可以调用
add(){
this.counter++; //这个对象app的counter++
},
sub(){
this.counter--;
}
}
})
</script>
</body>
</html>
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
