zoukankan      html  css  js  c++  java
  • vue入门学习1_事件及修饰符

    vue入门学习1_事件及修饰符
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>
    <body>

    <div id="app">
    <button v-on:click = "showMe('事件', $event)">click me !!!!</button>
     
    <a href="www.baidu.com" v-on:click.prevent = "showMe('事件修饰符,阻止默认事件', $event)">click me !!!!</a>
     
    <div v-on:click = "showMe('事件修饰符1,阻止冒泡事件',$event)">
     
    <button v-on:click.stop = "showMe('事件修饰符2,阻止冒泡事件', $event)">阻止冒泡事件</button>
    </div>
     
    space: <input type="text" v-on:keyup.space = "keyup($event)">
     
    enter: <input type="text" v-on:keyup.enter = "keyup($event)">

    shift: <input type="text" v-on:keyup.shift = "keyup($event)">
    </div>

    <script>
    new Vue({
    el:"#app",
    data:{
    name: "qianyadong"
    },
    methods:{
    showMe: function (me, event){
    alert(me)
    },
    keyup: function (event){
    alert(event.which)
    }
    }
    })
    </script>
    </body>
    </html>

    .stop修饰符

    这个修饰符的作用就是阻止事件冒泡,不让他向外去执行函数,到此为止

    .prevent修饰符

    阻止组件本来应该发生的事件,转而去执行自己定义的事件

    .capture修饰符

    使用.capture修饰符时,网页就会按照捕获的方式触发函数,也就是从外向内执行,但是这个时候一定要注意,.capture修饰符一定要写在外层才能生效

    .once修饰符

    加上此修饰符之后相应的函数只能触发一次,无论你点击多少下,函数就只触发一次

    .self修饰符

    当前元素自身时触发处理函数时才会触发函数,原理:是根据event.target确定是否当前元素本身,来决定是否触发的事件/函数

    • .left - (2.2.0) 只当点击鼠标左键时触发。
    • .right - (2.2.0) 只当点击鼠标右键时触发。
    • .middle - (2.2.0) 只当点击鼠标中键时触发。
    • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
  • 相关阅读:
    Exp5
    Exp4
    Exp3
    Exp02
    【TPM】tpm搭建基础指南
    20155316 Exp1 PC平台逆向破解(5)M
    个人早期写的一些组件
    关于spring @scope("prorotype") 和 @aspectj 一起用的问题
    ThreadLocal内存泄漏需要注意的
    Spring IoC 容器大概流程
  • 原文地址:https://www.cnblogs.com/qydknowledge/p/13347975.html
Copyright © 2011-2022 走看看