Vue——事件处理_html-js-css

事件处理

文章目录事件处理事件的基本使用事件修饰符键盘事件

事件的基本使用使用v-on : xXX或@xxx绑定事件，其中xxx是事件名;事件的回调需要配置在methods对象中，最终会在vm上;methods中配置的函数,不要用箭头函数!否则this就不是vm了;methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象@click="demo”和@click="demo($event)”效果一致，但后者可以传参;

<script src="../js/vue.js">script>
head>
<body>
    <div id="root">
        <h1>欢迎{{name}}来到h1>
        
        <button @click="showInfo1">点我d出提示1(不传参)button>
        <button @click="showInfo2(66,$event)">点我d出提示2(传参)button>
    div>
body>
<script>
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: "#root",
        data: {
            name: 'feliks',
        },
        methods: {
            showInfo1(event) {
                // console.log(event.target.innerText);
                // console.log(this); //此处的this是vm
                alert('hello')
            },
            showInfo2(number) {
                alert(number)
            }
        }
    })
script>

事件修饰符 prevent: 阻止默认事件（常用）;stop:阻止事件冒泡（常用）;once:事件只触发一次（常用）;capture:使用事件的捕获模式;self:只有event.target是当前 *** 作的元素时才触发事件;passive:事件的默认行为立即执行，无需等待事件回调执行完毕;

DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js">script>
head>
<style>

style>

<body>
    <div id="root">
        <h1>欢迎{{name}}h1>
        
        <a href="http://felikschen.vcn.ink" @click.prevent="showInfo">我能阻止默认行为a>

        
        <div @click="showInfo" class="demo1">
            <button @click.stop="showInfo">我能阻止冒泡button>
        div>

        
        <button @click.once="showInfo">我只触发一次button>

        
        <div class="div1" @click.capture="showMsg(1)">
            div1
            <div class="div2" @click="showMsg(2)">
                div2
            div>
        div>

        
        <div @click.self="showInfo" class="demo1">
            <button @click="showInfo">我能阻止冒泡button>
            
            
        div>

        
        <ul class="list" @wheel.passive="demo">
            <li>1li>
            <li>2li>
            <li>3li>
            <li>4li>
        ul>
    div>
body>
<script>
    Vue.config.productionTip = false; //阻止vue 在启动时生成生产提示
    new Vue({
        el: "#root",
        data: {
            name: 'feliks',
        },
        methods: {
            showInfo(e) {
                alert('要去我的主页吗?')
                    // console.log(e.target);
            },
            showMsg(msg) {
                console.log(msg);
            },
            demo() {
                for (let i = 0; i < 10000; i++) {
                    console.log('#');

                }
            }
        }
    })
script>

html>

键盘事件 Vue中常用的按键别名回车=>enter删除=>delete(捕获删除”和“退格”键)退出=>esc空格=>space换行 =>tab(特殊，必须配合keydown使用)上=> up下 = down左=> left右=> right Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名) 例如：CapsLock => caps-lock 系统修饰键(用法特殊）:ctrl、alt、shift、meta(win键) (1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。(2).配合keydown使用:正常触发事件。也可以使用keyCode去指定具体的按键(不推荐)Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名

<body>
    <div id="root">
        <h1>欢迎{{name}}h1>
        <input type="text" placeholder="按下回车提示" @keyup.huiche="showInfo">
        
        
    div>
body>
<script>
    Vue.config.productionTip = false;
    // Vue.config.keyCodes.huiche = 13;//自定义一个别名
    new Vue({
        el: "#root",
        data: {
            name: 'feliks',
        },
        methods: {
            showInfo(e) {
                console.log(e.target.value);
                console.log(e.key, e.keyCode);
            }
        }
    })
script>

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/940597.html

Vue——事件处理

发表评论

评论列表（0条）