（1）vue基础——1.7 事件处理

事件处理 

 

1.事件处理的基本使用

事件的基本使用：

            1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

            2.事件的回调需要配置在methods对象中，最终会在vm上；

            3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；

            4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；

            5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参

 

 

<body>
    <!-- 
       事件的基本使用：
            1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
            2.事件的回调需要配置在methods对象中，最终会在vm上；
            3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
            4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
            5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参
     -->
 
    <!-- 准备好一个容器 -->
    <div id="root">
       <h2>欢迎来到{{name}}学习</h2>
       <BUtton v-on:click="showInfo">点我提示信息</BUtton>
       <BUtton @click="showInfo1">点我提示信1（不传参）</BUtton>
       <BUtton @click="showInfo2(66,$event)">点我提示信2(传参)</BUtton>
    </div>
    <script type="text/javascript">
        Vue.config.production = true; // 阻止 vue 在启动时生成生产提示。
        const vm = new Vue({
            el:"#root",
            data: {
                name:'尚硅谷'
            },
            methods: {
                showInfo(event){
                    //event.target拿到发生事件的事件目标
                    // console.log(event.target.innerText);
 
                    // console.log(this); //此处的this是vm
 
                    alert('同学你好')
                },
                showInfo1(event){
                    //event.target拿到发生事件的事件目标
                    // console.log(event.target.innerText);
 
                    // console.log(this); //此处的this是vm
 
                    alert('同学你好！')
                },
                showInfo2(number,a){
                    console.log(number,a);
                    //event.target拿到发生事件的事件目标
                    // console.log(event.target.innerText);
 
                    // console.log(this); //此处的this是vm
 
                    alert('同学你好！！')
                },
            }
        })
    </script>
</body>
</html></html>

 

2.事件修饰符 

Vue中的事件修饰符：

            1.prevent：阻止默认事件（常用）；

            2.stop：阻止事件冒泡（常用）；

            3.once：事件只触发一次（常用）；

            4.capture：使用事件的捕获模式；

            5.self：只有event.target是当前操作的元素时才出发事件；

            6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

修饰符可以连续写 

<body>
    <!-- 
       Vue中的事件修饰符：
            1.prevent：阻止默认事件（常用）；
            2.stop：阻止事件冒泡（常用）；
            3.once：事件只触发一次（常用）；
            4.capture：使用事件的捕获模式；
            5.self：只有event.target是当前操作的元素时才出发事件；
            6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
     -->
 
    <!-- 准备好一个容器 -->
    <div id="root">
       <h2>欢迎来到{{name}}学习</h2>
       <!-- 阻止默认事件（常用） -->
       <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
       <!-- 阻止事件冒泡（常用） -->
       <div @click="showInfo" class="demo1">
           <button @click.stop="showInfo">点我提示信息</button>
           <!-- stop.prevent 先停止冒泡再处理默认事件 -->
           <a href="http://www.atguigu.com" @click.stop.prevent="showInfo">点我提示信息</a>
       </div>
        <!-- 事件只触发一次（常用） -->
        <button @click.once="showInfo">点我提示信息</button>
        <!-- 使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>
 
        <!-- 只有event.target是当前操作的元素时才出发事件； -->
        <div @click="showInfo">
            <button @click.self="showInfo">点我提示信息</button>
        </div>
 
        <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
        <!-- scroll 为滚动事件 -->
        <ul class="list" @wheel.passive="demo">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.production = true; // 阻止 vue 在启动时生成生产提示。
        new Vue({
            el:"#root",
            data: {
                name:'尚硅谷'
            },
            methods: {
                showInfo(e){
                    // preventDefault 阻止默认行为
                    // e.preventDefault();
 
                    // stopPropagation 阻止冒泡行为
                    // e.stopPropagation()
                    // alert('同学你好！')
 
                    // console.log(e.target);
                },
                showMsg(msg){
                    console.log(msg);
                },
                demo(){
                    // console.log('@');
                    for (let i = 0; i < 10000; i++) {
                        console.log('#');
                    }
                    console.log('累坏了');
                }
            }
        })
    </script>
</body>
</html></html>

 3.键盘事件

1.Vue中常用的按键别名:

回车 => enter

删除 => delete (捕获"删除"和"退格"键)

退出 => esc

空格 => space

换行 => tab (特殊, 必须配合keydown去使用)

上 => up

下 => down

左 => left

右 => right

2.Vue未提供别名的按键,可以使用案件原始的key值去绑定,但注意要转为kebab-case(短横线命名)

3.系统修饰键 (用法特殊):ctrl、alt、shift、meta

(1).配合keyup使用: 按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发.

(2).配合keydowm使用: 正常触发事件.

 

4.也可以使用keyCode去指定具体的按键 (不推荐)

5.Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名

<body>
    <!-- 
       1.Vue中常用的按键别名:
            回车 => enter
            删除 => delete (捕获"删除"和"退格"键)
            退出 => esc
            空格 => space
            换行 => tab (特殊, 必须配合keydown去使用)
            上 => up
            下 => down
            左 => left
            右 => right
 
        2.Vue未提供别名的按键,可以使用案件原始的key值去绑定,但注意要转为kebab-case(短横线命名)
 
        3.系统修饰键 (用法特殊):ctrl、alt、shift、meta
            (1).配合keyup使用: 按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发.
            (2).配合keydowm使用: 正常触发事件.
        
        4.也可以使用keyCode去指定具体的按键 (不推荐)
 
        5.Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名
    -->
 
    <!-- 准备好一个容器 -->
    <div id="root">
       <h2>欢迎来到{{name}}学习</h2>
       <!-- 键盘事件常用的 keyup,keydown -->
       <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
       <input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo">
    </div>
    <script type="text/javascript">
        Vue.config.production = true; // 阻止 vue 在启动时生成生产提示。
        Vue.config.keyCodes.huiche = 13 // 定义了一个别名按键
        new Vue({
            el:"#root",
            data: {
                name:'尚硅谷'
            },
            methods: {
                showInfo(e){
                    // if (e.keyCoed !== 13) return // 相当于无值返回
                    // console.log(e.target.value);
 
                    // 2.
                    console.log(e.key,e.keyCode);
                }
            }
        })
    </script>
</body>
</html></html>

 

posted @ 2022-07-09 21:20  陈晓猛  阅读(39)  评论(0)  编辑  收藏  举报