VUE指令(2)——v-on

最新推荐文章于 2024-05-21 18:43:24 发布

Java小生不才

最新推荐文章于 2024-05-21 18:43:24 发布

阅读量307

点赞数

分类专栏： html 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41596346/article/details/121079707

版权

html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.常规用法

v-on 指令用于给页面元素绑定事件。
语法： v-on:事件名=“js 片段或函数名”, v-on绑定事件,可简写为@

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>
</head>
<body>
    <div id="app">
        <!-- v-on绑定事件,可简写为@ -->
        <!-- <button v-on:click="num++">点赞</button><br> -->
        <!-- 简写 -->
        <button @click="num++">点赞</button><br><br>

        <!-- 绑定方法 -->
        <!-- <button v-on:click="cacle">取消点赞</button><br> -->
        <button @click="cacle">取消点赞</button><br>
        <h1>有{{num}}个赞</h1><br><br>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                num:100
            },
            methods: {
                cacle(){
                    this.num--
                }   
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

2.事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

.stop ：阻止事件冒泡到父元素
.prevent：阻止默认事件发生
.capture：使用事件捕获模式
.self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once：只执行一次

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>
</head>
<body>
    <div id="app">
        <!-- v-on绑定事件,可简写为@ -->
        <!-- <button v-on:click="num++">点赞</button><br> -->
        <!-- 简写 -->
        <button @click="num++">点赞</button><br><br>

        <!-- 绑定方法 -->
        <!-- <button v-on:click="cacle">取消点赞</button><br> -->
        <button @click="cacle">取消点赞</button><br>
        <h1>有{{num}}个赞</h1><br><br>


         <!-- 事件修饰符once事件执行1次,hello vue弹出一次    不加可多次-->
        <div style="border: 2px solid red; padding: 20px;" v-on:click.once="hello">
            大div
            <!-- 事件修饰符stop阻止向父事件冒泡,hello vue弹出一次    不加弹出2次-->
            <div style="border: 1px dashed blueviolet; padding: 20px;" @click.stop="hello">
                小div<br>
                 <!-- 事件修饰符prevent阻止默认事件,hello vue弹出一次不跳百度    不加弹出1次跳百度-->
               <a href="http://www.baidu.com" @click.prevent>百度一下</a>
            </div>
         </div><br><br> 
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                num:100
            },
            methods: {
                cacle(){
                    this.num--
                },
                hello(){
                    alert("hello vue");
                }
            },
        })
    </script>
</body>
</html>

在这里插入图片描述

3.按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>
</head>
<body>
    <div id="app">
        <!-- v-on绑定事件,可简写为@ -->
        <!-- <button v-on:click="num++">点赞</button><br> -->
        <!-- 简写 -->
        <button @click="num++">点赞</button><br><br>

        <!-- 绑定方法 -->
        <!-- <button v-on:click="cacle">取消点赞</button><br> -->
        <button @click="cacle">取消点赞</button><br>
        <h1>有{{num}}个赞</h1><br><br>


         <!-- 事件修饰符once事件执行1次,hello vue弹出一次    不加可多次-->
        <div style="border: 2px solid red; padding: 20px;" v-on:click.once="hello">
            大div
            <!-- 事件修饰符stop阻止向父事件冒泡,hello vue弹出一次    不加弹出2次-->
            <div style="border: 1px dashed blueviolet; padding: 20px;" @click.stop="hello">
                小div<br>
                 <!-- 事件修饰符prevent阻止默认事件,hello vue弹出一次不跳百度    不加弹出1次跳百度-->
               <a href="http://www.baidu.com" @click.prevent>百度一下</a>
            </div>
           </div><br><br> 


        <!-- 按键修饰符keyup,可简写为@keyup  up向上  down向下   @click.alt单击+alt  组合键-->
        <input type="text" v-model="num" v-on:keyup.up="num*=2" @keyup.down="num/=10"  @click.alt="num=0"> 
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>

        new Vue({
            el:"#app",
            data:{
                num:100
            },
            methods: {
                cacle(){
                    this.num--
                },
                hello(){
                    alert("hello vue");
                }
            },
        })
    </script>
</body>
</html>