我们用Vue做一个计数器,所以我们学习2个新东西:
新属性: methods
新指令: @click (v-on:click)
逻辑 : 点击+按钮 变量+1并打印 点击-按钮 变量-1并打印:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="app">
<h2>当前数量:{{sum}}</h2>
<!-- 注意这个button千万不能放外面 因为 确保你所有权被Vue控制!! -->
<button v-on:click="sum++;">+</button>
<button v-on:click="sum--;">-</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
sum: 0
}
}
)
</script>
</body>
</html>
所以 v-on:click="xxxx;" 这就是监听,我们有新监听方法替代v-on:
所以既然替代了 那么也别在标签里面写语句了【因为如果写很多会很乱!!!】 我们在Vue中的methods中写:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="app">
<h2>当前数量:{{sum}}</h2>
<!-- 下面写入方法名即可 -->
<button @click="add">+</button>
<button @click="sub">-</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
sum: 0
},
// methods写入函数方法
methods: {
add() {
this.sum++; //一定要加this 为了防止同名而且要养好习惯!
},
sub() {
this.sum--;
}
}
}
)
</script>
</body>
</html>
所以: 很方便啊 很方便:::
总结:
新的属性:methods,该属性用于在Vue对象中定 义方法。
新的指令:@click, 该指令用于监听某个元素的点 击事件,并且需要指定当发生点击时,执行的方法 (方法通常是methods中定义的方法)
这些@click是什么东西?
Vue对象中又是定义el/data/methods,到底都有 哪些东西可以定义,以及它们的作用是什么?
这些疑惑在后续学习中都会一一解开。