常用的事件处理

最新推荐文章于 2022-11-07 23:58:17 发布

igxia

最新推荐文章于 2022-11-07 23:58:17 发布

阅读量118

点赞数

分类专栏： Vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weilaaer/article/details/127415843

版权

Vue 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

1、事件修饰符

Vue中的事件修饰符:

1.prevent:阻止默认事件（常用）;

2.stop:阻止事件冒泡（常用）;

3.once:事件只触发一次（常用）;

4.capture:使用事件的捕获模式;

5.self:只有event.target是当前操作的元素是才触发事件;

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

例：

<body>
    <div id="app">
        <a href="www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
    </div>    
</body>

<script>
    new Vue({
        el: '#app',
        methods: {
            showInfo() {
                alert("同学你好");
            }
        }
    })
</script>

2、键盘事件

@keydown（v-on:keydown）键盘按下立即触发事件
@keyup（v-on:keyup）键盘按下且起来后才触发事件

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

回车 =>enter

广删除=>delete(捕获“删除”和“退格”键)

退出=>esc

空格=>space

换行=> tab（特殊，必须且只能配合keydown使用）

上 => up

下=> down

左=>left

右=> right

例：

<input type="text" @keyup.enter="showInfo">

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

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

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

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

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

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

2.3、计算属性（computed）

1.定义:要用的属性不存在,要通过已有属性计算得来。

2.原理:底层借助了objcet.defineproperty方法提供的getter和setter。

3.get函数什么时候执行?

(1).初次读取时会执行一次。

(2).当依赖的数据发生改变时会被再次调用。

4.优势:与methods实现相比，内部有缓存机制(复用），效率更高，调试方便。

5.备注:

1.计算属性最终会出现在vm上，直接读取使用即可。

2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化

计算属性完整写法
new Vue({
    computed: {
        fullName: {
            get() { 
                console.log('get方法被调用了')
                return this.firstName + '-' + this.lastName
            },
            set(value) {
                console.log('set', value);
                const arr = value.split("-");
                this.firstName = arr[0];
                this.lastName = arr[1];
            }
        }
    }
})

简写,只考虑读取，不考虑修改时可以简写
new Vue({
    computed: {
        fullName() {
            console.log('get方法被调用了')
            return this.firstName + '-' + this.lastName
        }
    }
})

4、监视属性（watch）

当监视的属性发生变化时，回调函数自动调用，进行相关操作
坚实的属性必须存在，才能进行监视
坚实的两种写法
1. new Vue时传入watch配置
2. 通过vm.$watch监视

<script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data: {
                isHot: true
            },
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot;
                }
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            // watch: {
            //     isHot: {
            //         immediate: true,
            //         handler(newValue, oldValue) {
            //             console.log('isHot被修改了', newValue, oldValue);
            //         }
            //     }
            // }
        })
        vm.$watch('isHot', {
            immediate: true,
            handler(newValue, oldValue) {
                console.log('isHot被修改了', newValue, oldValue);
            }
        })
    </script>

简写

<script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data: {
                isHot: true
            },
            methods: {
                changeWeather() {
                    this.isHot = !this.isHot;
                }
            },
            computed: {
                info() {
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            // 完整写法
            // watch: {
            //     isHot: {
            //         immediate: true,
            //         handler(newValue, oldValue) {
            //             console.log('isHot被修改了', newValue, oldValue);
            //         }
            //     }
            // }
            // 简写
            watch: {
                isHot(newValue, oldValue) {
                    console.log('ioHot被修改了', newValue, oldValue);
                }
            }
        })
        
        vm.$watch('isHot', function(newValue, oldValue) {
            console.log('isHot被修改了', newValue, oldValue)
        })
    </script>

5、深度监视

(1).Vue中的watch默认不监测对象内部值的改变（一层）。

(2).配置deep:true可以监测对象内部值改变(多局。

备注:

(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!

(2).使用watch时根据数据的具体结构,决定是否采用深度监视。

<script>
    new Vue({
        data: {
            numbers: {
                a: 1,
                b: 1
            }
        },
        watch: {
            numbers: {
                //监视多级结构种所有属性的变化
                deep: true,
                handler() {
                    console.log('numbers改变了');
                }
            }
        }
    })
</script>

igxia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
常用的事件处理

/ console.log('isHot被修改了', newValue, oldValue);// console.log('isHot被修改了', newValue, oldValue);console.log('ioHot被修改了', newValue, oldValue);console.log('isHot被修改了', newValue, oldValue);console.log('isHot被修改了', newValue, oldValue)
复制链接

扫一扫