3. Vue做一个计数器 --新属性：methods、新的指令：@click

我们用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，到底都有 哪些东西可以定义，以及它们的作用是什么？

这些疑惑在后续学习中都会一一解开。

 

posted @ 2021-06-23 16:28  咸瑜  阅读(244)  评论(0)  编辑  收藏  举报