• v-on事件处理指令；简写@事件名

    一、v-on 给元素（标签）绑定事件监听器

            oninput、onclick、onchange、onblur等

           1、 完整方式`v-on:事件名=“函数/方法”`

           2、简写方式`@事件名=“函数/方法”，注意@符号不能加冒号“：”`

            @input /@click/@change/@blur .....

    代码如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>v-on事件处理指令title>
    7. head>
    8. <body>
    9.     
    10.     <div id="app">
    11.         
    12.         <button v-on:click="say">v-on绑定的时间按钮：{{msg}}button>
    13.         
    14.         <button @click="say(123)">简写@绑定的事件按钮：{{msg}}button>
    15.         
    16.         <button @click="doLog('牛逼',$event)">手动传递DOM事件对象button>
    17.  
    18.         <input @blur="doBlur">
    19.     div>
    20.     <script src="./node_modules/vue/dist/vue.global.js">script>
    21.     <script type="text/javascript">
    22.         const {createApp} = Vue;
    23.         const app=createApp({
    24.             data(){
    25.                 return{
    26.                     msg:"aaa"
    27.                 }
    28.             },
    29.             //定义方法的选项
    30.             methods: {
    31.                 say(event){//event 事件对象
    32.                     this.msg="5555"; //this 代表app对象
    33.                     console.log("say something!",event);
    34.                 },//多个必须加逗号
    35.                 doLog(name,event){
    36.                     console.log(name,event);
    37.                 },
    38.                 doBlur(event){
    39.                     console.log('输入框失去焦点',event.target.value); //获取输入框值
    40.                 }
    41.             }
    42.         }).mount("#app");
    43.         console.log("app",app);
    44.     script>
    45.     
    46. body>
    47. html>

    ps:

    1、methods 可以定义多个方法选项，用逗号分隔

     methods: {
                    say(event){//event 事件对象
                        this.msg="5555"; //this 代表app对象
                        console.log("say something!",event);
                    },//多个必须加逗号
                    doLog(name,event){
                        console.log(name,event);
                    },
                    doBlur(event){
                        console.log('输入框失去焦点',event.target.value); //获取输入框值
                    }
                }

    2、事件的处理方法传递了多个参数，如果需要获取远程DOM事件对象，则必须手动传$event

     doLog(name,event){
          console.log(name,event);
     },

  • 相关阅读:
    COS对象存储
    UVA11584划分成回文串 Partitioning by Palindromes
    vue openlayers 加载高德地图等 gcj02 地址的图层偏移问题
    java学习day21（File类和IO流）缓冲流、转换流、序列化流、打印流
    在Windows电脑上快速运行AI大语言模型-Llama3
    Unity粒子系统ParticleSystem各模块及其参数学习
    事件委托代理
    JUC——并发编程—第四部分
    复杂系统设计基本注意事项
    Spring AOP案例：百度网盘密码数据兼容处理 与 SpringAOP总结
  • 原文地址：https://blog.csdn.net/QWERTY55555/article/details/133715141