Vue事件

最新推荐文章于 2023-10-14 13:53:26 发布

黄宝康

最新推荐文章于 2023-10-14 13:53:26 发布

阅读量331

点赞数

分类专栏： VUE 文章标签： Vue事件

本文链接：https://blog.csdn.net/huangbaokang/article/details/100700620

版权

VUE 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

<!doctype html>
<html lang="gbk">
<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>VUE 练习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
</head>
<body>
   <div id="app">
    <button v-on:click="num+=1">点我加1</button>
    <p>{{num}}</p>
   </div>
<script>
     new Vue({
        el:'#app',
        data:{
           num:0
        }
    });
</script>

</body>
</html>

vue里的学习，个人感觉，需要熟悉那一套语法，本次学习了v-on:click的用法。
如上点击只是让num自增，如果有比较复杂的逻辑，把js代码写到v-on指令是不可行的，我们可以使用@click指定方法名。

<body>
   <div id="app">
    <button @click="hbk">点我，运行复杂逻辑</button>
    <!--也可以使用 <button v-on:click="hbk">点我，运行复杂逻辑</button>   -->
   </div>
<script>
     new Vue({
        el:'#app',
        data:{
           
        },
        methods:{
          hbk(){
            alert("hello huangbaokang");
            console.log("do something else...");
          }
        }
    });
</script>

</body>

参数传递，直接在方法上增加参数即可。

<body>
   <div id="app">
    <button v-on:click="say('hello world')">点我</button>
   </div>
<script>
     new Vue({
        el:'#app',
        data:{
           
        },
        methods:{
         say:function(msg){
          alert(msg);
         }
        }
    });
</script>

</body>

有时需要访问原始的DOM事件，可以传递$event特殊变量。

<div id="app">
 <button v-on:click="say('hello world',$event)">传递特殊变量</button>
</div>

methods:{
 say:function(msg,event){
    if(event) {
      event.preventDefault();
    }
    alert(msg);
   }
  }

事件修饰符

.stop
.prevent
.capture
.self
.once
.passive

写法(使用后缀)：<a v-on:click.stop="doSomething"></a>
支持串联：<a v-on:click.stop.prevent="doThat"></a>

监听按键事件

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

举例：绑定按键esc键

<body>
   <div id="app">
      <input type="text" @keyup.esc="say" v-model="keywords"/>
   </div>
<script>
     new Vue({
        el:'#app',
        data:{
           keywords:"huangbaokang"
        },
        methods:{
            say:function(){
                alert("hello"+this.keywords);
            }
        }
    });
</script>

</body>

运行如下：
在这里插入图片描述

黄宝康

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue事件

<!doctype html><html lang="gbk"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...
复制链接

扫一扫