常用的事件处理

拼搏现实的明天。 2023-10-02 22:16 84阅读 0赞

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、键盘事件

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

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

简写

5、深度监视

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

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

备注:

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

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