Vue3.0学习（5）- v-on指令监听事件

最新推荐文章于 2024-08-27 14:03:39 发布

雨winning

最新推荐文章于 2024-08-27 14:03:39 发布

阅读量1k

点赞数

分类专栏： VUE 文章标签： vue.js

本文链接：https://blog.csdn.net/Bthm_123/article/details/107828209

版权

VUE 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、html body 部分

1、v-on + 需要监听的事件 + 执行事件时需要执行的函数

   <div v-on:click="onClick">
        <div>
            点击666
        </div>
    </div>

在这里插入图片描述

2、省略的写法把v-on：替换成 @

    <div @click="onClick">
        <div>
            点击6667
        </div>
    </div>

二、html script部分

1、函数写法注意事项

1.1 函数写在setup里面，并且必须要return出去。
1.2 函数在return里的位置可以在变量前面
1.3 函数区分大小写

const app1={
    setup(){
        function onClick(event){
            alert('hello')
            console.log(event)
        }
        return {
            message2,
            message3,
            onClick
        }
    }
}

三、源码

<!DOCTYPE html>
<html>
    <!-- html+vue 模式需要把 js文件在head中引入进来 -->
    <head>
        <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <script src="vue.beta.17.js"></script>
    </head>
    <body>
        <div id="app5">
            {{message2}}
            <div>
                {{message3}}
            </div>
            <div v-on:click="onClick">
                <div>
                    点击666
                </div>
            </div>
            <div @click="onClick">
                <div>
                    点击6667
                </div>
            </div>
        </div>
    </body>

    <!-- 业务逻辑写在下面的script标签中  加载vue.js写在head中  -->
    <!-- 下方的script类似小程序js文件 -->
    <script>
        // 从对象中提取出来部分属性
        const {createApp,ref,reactive} = Vue
        const message2 ="hello, 9 yue"
        const message3="hello, 10 yue"
        const app1={
            setup(){
                function onClick(event){
                    alert('hello')
                    console.log(event)
                }
                return {
                    message2,
                    message3,
                    onClick
                }
            }
        }
        // mount为挂载的意思，后面可以通过# 来选择div的id 也可以通过 . 来div的class
        createApp(app1).mount('#app5')
    </script>

    <!-- 类似小程序 css -->
    <style>

    </style>
</html>