vue3前端青铜到黄金王者 - 第三个入门v-on指令监听事件

丸子酱就是我
307 阅读1分钟

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

今天学习v-on。

它解决的问题

给HTML标签的绑定事件。

用法

v-on 指令用于绑定HTML事件 ：v-on:click 缩写为 @click

<a @click=“get()”>aa

稍微跟v-bind对比，该指令用于设置HTML属性：v-bind:href 缩写为 :href

<a :href="{{url}}">aa</a>

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <title>vue3青铜到黄金-丸子酱-vue-0n</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/vue3.1.5_vue.global.js"></script>
</head>
<body>
    <div id="wanziApp">
<h3>监听用户点击事件》</h3>
<div v-on:click="wzClick" v-text="message"></div>
<h3>v-on简写</h3>
<div @click="wzClick" v-text="message"></div>
    </div>
</body>
<script>
    const { createApp } = Vue
    const url = 'https://blog.csdn.net/qq_28008615';
    const message = "丸子酱学Vue3";
    const app = {
        setup() {
            function wzClick(event){
                console.log('用户点击了按钮',event);
                alert('wzzz点击了按钮');
            }
 
            return {
                url,
                message,
                wzClick
            }
        }
    }   
    createApp(app).mount('#wanziApp')
</script>
</html>

效果如下：

在这里插入图片描述

解析

上面展示了v-on的两种使用方式。

核心代码在这里：

第一种为直接使用，

<div v-on:click="wzClick" v-text="message"></div>

渲染文字（v-text)同时绑定了click事件，触发wzClick函数调用。

第二种使用@简写。 总体感觉挺方便的。

<div @click="wzClick" v-text="message"></div>

渲染文字（v-text)同时绑定了click事件，触发wzClick函数调用。

更多用法如下：

缩写：  @
类型：  Function | Inline Statement
参数：  event (required)
修饰符：

  • .stop - 调用 event.stopPropagation()。
  • .prevent - 调用 event.preventDefault()。
  • .capture - 添加事件侦听器时使用 capture 模式。
  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  • .native - 监听组件根元素的原生事件。
  • .once - 只触发一次回调。
  • .left - 只当点击鼠标左键时触发。
  • .right - 只当点击鼠标右键时触发。
  • .middle - 只当点击鼠标中键时触发。
  • .passive - 以 { passive: true } 模式添加侦听器

后面再补充。

我是丸子，每天学会一个小知识。
一个前端开发
希望多多支持鼓励，感谢

avatar
文章
阅读
粉丝