v-on基本使用和语法糖

最新推荐文章于 2022-07-29 10:41:28 发布

Eli-sun

最新推荐文章于 2022-07-29 10:41:28 发布

阅读量1.6k

点赞数

分类专栏： Vuejs 文章标签： vue

本文链接：https://blog.csdn.net/vfjcgg/article/details/106593081

版权

Vuejs 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

v-on基本使用和语法糖

在前端开发中，我们需要经常和用户交互。
1.这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等。
2.在Vue中如何监听事件呢？使用v-on指令

v-on介绍：
作用：绑定事件监听器
缩写：@
预期：function | inline statement | Object
参数：event

语法糖：

<button @click="increment">+</button>
        <button @click="decrement">-</button>

栗子：

<!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">
        <h4>当前计数为：{{counter}}</h4>
        <!-- <button v-on:click="counter++">+</button>
        <button v-on:click="counter--">-</button> -->
        <!-- <button v-on:click="increment">+</button>
        <button v-on:click="decrement">-</button> -->

        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>

    <script src="../2020-6-Vuejs/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                counter: 0,
            },
            methods: {
                increment() {
                    this.counter++;
                },
                decrement() {
                    this.counter--;
                }
            }

        })
    </script>
</body>

</html>

Eli-sun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
v-on基本使用和语法糖

v-on基本使用和语法糖在前端开发中，我们需要经常和用户交互。1.这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等。2.在Vue中如何监听事件呢？使用v-on指令v-on介绍：作用：绑定事件监听器缩写：@预期：function | inline statement | Object参数：event语法糖：<button @click="increment">+</button> <button @click="decrem
复制链接

扫一扫